21–30 of 30 posts
> text-align: center; /* Set text align to center */ Thanks for the comment. Wouldn't have figured out what the line does without it!
I think those comments are there to put emphasis on the key properties which are required for the trick.
I'm still wondering if anybody has an elegant solution to this (seemingly simple) text positioning problem: http://stackoverflow.com/questions/20443220/how-to-absolutel...
Which leads me to ask how frequently and where he's changing his fonts. My design specs are usually pretty simple and consistent and would never require something like this.
I'm still wondering if anybody has an elegant solution to this (seemingly simple) text positioning problem: http://stackoverflow.com/questions/20443220/how-to-absolutel...
I'm puzzled to try and figure out when and where you would need to do something like this. OP notes, "This is important, because I don't want to change all the positions in my CSS whenever I change fonts." Which leads me to ask how frequently and where he's changing his fonts. My design specs are usually pretty simple and consistent and would never require something like this.
At other times, we may want the user to define/select the font, and keep the baselines at the same position.
This is very cool. For those who didn't get it, here's how it works. Initially, when figcaption text is short, it behaves something like this: | | | | | | The text inside the figcaption element is always aligned left but the element itself is centered. When the text is longer, figcaption grows to a 100% width while the text is still aligned left.
I'm still wondering if anybody has an elegant solution to this (seemingly simple) text positioning problem: http://stackoverflow.com/questions/20443220/how-to-absolutel...
Plus, based on the description and requirements of the problem it's likely to not be solved because the font-size is an unknown variable in the equation. If it was known how the font-size is determined and applied then maybe something could be leveraged to adjust for the problem.
The easy solution, knowing the font size, is to position a parent element at the coordinate and then move a child element containing the text upward an amount based on the font-size. That way the first line of text in the child element sits on the top line of the parent element, more or less. But we don't know the font-size and it is easily broken if the site is constantly being changed code-wise. In fact, a badly thought out line-height may break it as well.
I'm still wondering if anybody has an elegant solution to this (seemingly simple) text positioning problem: http://stackoverflow.com/questions/20443220/how-to-absolutel...
Technically very cool, but as a designer, I wouldn't want captions to behave like that. Center all, or left align all. Or if there really is a difference between short caption and longer description, differentiate also typographically, by changing font size, style and line height.
I remember that eight or ten years ago, there were a lot of blog posts dedicated to sharing nice tricks and hacks to work around the limitations of CSS and browser implementations. Some techniques even got catchy names[1] and some of their authors became quite popular.
I dreamed of coming with a clever technique myself that would buy me some 15 minutes of internet fame after being published in A List Apart or something. Unfortunately my poor english skills at the time crushed my dreams.
Since CSS3 became the norm and browsers got better I stopped seeing such articles. I supposed we have CSS pretty much figured up. Anyway, all I wanted to say is that this post made me nostalgic and I actually learned something today.
[1]: https://en.wikipedia.org/wiki/Fahrner_Image_Replacement
Damn. The front page of HN for this ? Oh, the Erlang days of glory past, I yearn you so much.
I read this blog post thinking I would see something amazing... but it was simply basic css. I may be biased because I actually learned CSS instead of randomly trying stuff until it work...