Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Aligning Text Smartly in CSS

nocode.in

Post reply on HN
Print view View original

11–20 of 30 posts

Re: Aligning Text Smartly in CSS

#11

Post by eterm »

eps wrote: post #6

Damn. The front page of HN for this ? Oh, the Erlang days of glory past, I yearn you so much.

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.

Re: Aligning Text Smartly in CSS

#12

Post by oneeyedpigeon »

_kush wrote: post #2

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.

To make your explanation spot on, you need to add some more text after "figcaption" in the latter two cases. This is the key point: an inline block will auto-width, by default, to its contents. In this technique, the contents will always be left-aligned, but the container centered.

Re: Aligning Text Smartly in CSS

#15

Post by jjar »

eterm wrote: post #11
eps wrote: post #6

Damn. The front page of HN for this ? Oh, the Erlang days of glory past, I yearn you so much.

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 funct…

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.

Re: Aligning Text Smartly in CSS

#16

Post by Rzah »

flixic wrote: post #5

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.

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.

Re: Aligning Text Smartly in CSS

#17

Post by eterm »

jjar wrote: post #15
eterm wrote: post #11

Earlier quoted context omitted.

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 funct…

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.

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!).

Re: Aligning Text Smartly in CSS

#19

Post by _kush »

wereHamster wrote: post #18

> 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.
Post reply on HN