pveierland3 days ago
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...
systoll2 days ago
`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.
LinguaBrowse2 days ago
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.
gfat3 days ago
Recently found the lh unit approach. It’s elegant for centering icons along the first line in dynamic, sometimes wrapping text.
echoangle2 days ago
Is it weird that I like the version where the icon is centered on the multiple lines?
zulux2 days ago
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.
jhbggjnjih2 days ago
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.
[deleted]2 days agocollapsed
dcrazy2 days ago
[dead]
lenkite2 days ago
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.