Better Icon and Label Alignment | Hacker News Reader

Better Icon and Label Alignment

ishadeed.com

43 pointseustoria8 comments

There's new CSS capabilities [0] that can help solve this problem better now via alignment-baseline [1] and text-box-trim [2].

[0] https://www.w3.org/TR/css-inline-3/#leading-trim

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...

[2] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...

`list-style-image` seems like a more straightforward solution to the same problem.

Or a negative text-indent, if you want arbitrary content rather than just a tick.

Playing around with the demos, none of the solutions seem very centred at all?

I think the lh unit is surely part of the puzzle, but something more is needed. It assumes that the ascent and descent are symmetrical, for one thing.

Recently found the lh unit approach. It’s elegant for centering icons along the first line in dynamic, sometimes wrapping text.

Is it weird that I like the version where the icon is centered on the multiple lines?

If they were just objects, indeed it would look better from a visual standpoint.

I think it would drive most of your fellow humans nuts. My hunch is that people read the bullets as sentence markers, not just a visual flourish.

Yes, that’s pretty much the function of bullet points, visually speaking.

Visual hierarchy is a thing and when you have 3 icons next to single lines, you by default expect the all to follow the same pattern, cratering the icon vertically next to multi line text breaks the established visual pattern.

Author even did some bad things such as expanding the circle radius way too outside the x-height so the emphasis lies strictly on the circle, when it should be on the line… but anyways.

God, this was so complicated to understand just to get an icon aligned properly with multi-line text. Someone needs to re-design CSS from scratch for average human brains. Its has become a rube goldberg machine of complexity.

Reply on news.ycombinator.com