Word overflows its own box with negative letter spacing
PEN: https://codepen.io/Lko3001/pen/jEWwKmQ
As you can see the last C of the word goes outside the outline, why?
It only happens with
letter-spacing, is there a way to make that box the right size?
I know I could do padding-right: (same number as the letter spacing) but I want to find a more clever way8 Replies
seems like a bug
if you select the whole text, the overflow disappears
I think that might just be how the font is created.
I think i has to do with the kerning of the font character itself
With kerning you mean the like "boundingbox" around each letter to create the font?
yes,
as example, look at where the H starts after the span. That is correctly placed
I think that this is due to a known issue with letter spacing in browsers. They (the browsers) basically add the space (negative in this case) to the end of the word whereas it should only be between letters.
An alternative solution to padding is to use a pseudo element to add a space after the last letter, to which the browser will then apply the letter spacing.
There are discussions as to how to resolve the issues with letter-spacing and has had some recent activity.
GitHub
[css-text] Reconsidering the CSS letter-spacing model · Issue #101...
Summary CSS letter-spacing is a long-established and widely-used feature; Behavior of existing letter-spacing implementations is unsatisfactory; There is incompatibility between Gecko and WebKit/Bl...