Thread

Better Icon and Label Alignment

43 points · 8 comments · eustoria

Loading the complete thread in the background. This saved snapshot is available now. Refresh

gfat · 1789699677 · focus · HN ↗
Recently found the lh unit approach. It’s elegant for centering icons along the first line in dynamic, sometimes wrapping text.
pveierland · 1789699892 · focus · HN ↗
There's new CSS capabilities [0] that can help solve this problem better now via alignment-baseline [1] and text-box-trim [2].
[0] <a href="https://www.w3.org/TR/css-inline-3/#leading-trim" rel="nofollow">https://www.w3.org/TR/css-inline-3/#leading-trim
[1] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/alignment-baseline" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
[2] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-box-trim" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
lenkite · 1789708939 · focus · HN ↗
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. Its has become a rube goldberg machine of complexity.
LinguaBrowse · 1789712887 · focus · HN ↗
> In this solution, if you change any of the three values, the alignment will just work.
… Except in Safari.
It's a disappointment – I was really hoping to come away with an elegant solution to this problem that's cropped up so often during my career, but it doesn't give me much faith in the author's web layout course if they don't test on the one rendering engine that all iOS users are stuck with.
LinguaBrowse · 1789713351 · focus · HN ↗
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.
systoll · 1789717255 · focus · HN ↗
[delayed]
echoangle · 1789729727 · focus · HN ↗
Is it weird that I like the version where the icon is centered on the multiple lines?
1. zulux · 1789735060 · focus · HN ↗
  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.
  1. jhbggjnjih · 1789741604 · focus · HN ↗
    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.
dcrazy · 1789745629 · focus · HN ↗
[dead]

Open on Hacker News to reply ↗

Unofficial Hacker News client; not affiliated with Y Combinator.