
Aligning Text Smartly in CSS - usablecode
http://nocode.in/aligning-text-smartly-in-css/
======
_kush
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:

    
    
      |     <figcaption>    |
    
      |  <figcaption     >  |
    
      |<figcaption         >|
    

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.

~~~
eterm
Thank you, your explanation was a lot clearer than the one in the article
which I found hard to read. I think it would have been much more clear if they
had shown the markup for the content.

~~~
_kush
Yes, I had to fiddle with the codepen example[1] to understand it correctly.

1:
[http://codepen.io/usablecode/pen/EjERem](http://codepen.io/usablecode/pen/EjERem)

------
flixic
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.

~~~
Rzah
Agreed, this would also look bad if a caption was just a few chars short of
the width causing it to look indented compared to surrounding multiple line
captions. Use left, right or centre, not a mishmash.

------
wereHamster
> text-align: center; /* Set text align to center */

Thanks for the comment. Wouldn't have figured out what the line does without
it!

~~~
_kush
I think those comments are there to put emphasis on the key properties which
are required for the trick.

~~~
talmand
Then why not say that instead of just repeating the property in the comment?

------
brianzelip
A comment in the OP offers a flexbox solution that only applies style to
figure as opposed to figure and figcaption like the OP.[0].

tl;dr

``` /* the simple trick */ display: flex; flex-direction: column; align-items:
center; ```

[0][http://codepen.io/MoOx/pen/XdVjpK](http://codepen.io/MoOx/pen/XdVjpK)

------
armandososa
Nice.

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](https://en.wikipedia.org/wiki/Fahrner_Image_Replacement)

------
ctstover
Good riddance! Back in my day we had character cells, and we had pixels. Is it
not self evident that the entire browser ecosystem is wholly dysfunctional and
psychotic? Personally, I'm holding out for left-align text as a service that
uses a client with a 2GB dependency tree and infinite polling.

------
amelius
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...](http://stackoverflow.com/questions/20443220/how-to-absolutely-
position-the-baseline-of-text-in-html)

~~~
at-fates-hands
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.

~~~
amelius
Well, sometimes the UX designer wants to change all the fonts in the interface
at once (perhaps to a slightly different font). It is cumbersome to have to
reposition all the texts in those cases, because many fonts have their
baselines defined in a different way.

At other times, we may want the user to define/select the font, and keep the
baselines at the same position.

------
jjar

        No there is no CSS property text-align:smart or smartly
    

I laughed out loud at this

------
eps
Damn. The front page of HN for _this_?

Oh, the Erlang days of glory past, I yearn you so much.

~~~
eterm
Are you dismissing this article because you consider it too trivial?

Getting elements to align nicely in CSS is a real pain point for a lot of
developers. The popularity of layout frameworks is also evidence of that. It's
not trivial to take a design from balsamiq or photoshop and replicate it in
CSS. Tricks such as this can make it a lot easier to do with CSS rather than
relying on javascript tweaks.

I've seen functions attached to window.resize which are principally there to
resize a whole bunch of elements dynamically so they still fit together well
on a new layout.

~~~
jjar
If you're replicating a design based on the "Draw a picture in Photoshop and
use the crop tool a lot" thesis, this is probably why you're having to use CSS
tricks. Starting from markup first, and then considering styling, makes your
life a lot easier.

~~~
eterm
And if I were building a site myself, that's how I'd work.

Unfortunately people outside the software development team don't think in
markup, and they're the ones from whom the requirements often come.

Even more technical users often base their designs on the worlds of desktop
software, or type-setting, or desktop publishing, or a myriad of other domains
where "I want these two boxes to always be the same size and aligned to the
bottom of this third box, and I'd like the font size to fit across the
resultant size" is a perfectly reasonable request.

We can't keep going saying "Well the web doesn't work that way, you're going
to have to rethink how you think about sizing" all the time, eventually the
web has fix itself so that sizing and aligning fits better with how a lot of
other domains work.

Flexbox is a step in the right direction but it's not a complete solution.
(And we're still supporting IE9, so we can't even use that yet, thanks
Vista!).

------
wingerlang
That's quite clever

