capsize
capsize copied to clipboard
seek-oss
Some combination of values don't wrap the full text height
Description
I noticed some specific combination of values cause the box height to not fully wrap the text, for example:
And this other combination gets closer:
At first I thought this only happened when using font height, but happens when using either font height or cap height.
I'm guessing this could be an issue with rendering pixels in browsers (due to non integer values), or a rounding error. Any ideas about this one? is it expected? (if not I'm happy to take a look and try contribute!)
For context, I noticed this as I was implementing buttons in our design system (work at teamflowhq.com), and noticed the vertical centering was slightly off by a few pixels
Hey 👋
You're right that this is due to the rounding and the sub pixel values that are produced. I have found that when vertically centering text I dont trim the space, but that decision will depend on your specific font choice.
Have been wanting to test out a rounding strategy to see if we can get away with whole value, but that is going to have the issue the other way I would assume — and extra pixel or so of space. Not sure if this is solvable under the current constraints.
I'll try not cropping text nodes for our buttons (or badges or similar components that center text vertically) and see how that feels 👍 will also try taking a look and see what else would be possible here, thanks!