Wrapping the character "Y" in the span, increases the border to the next character

Question

In my current project, I need to wrap each individual sentence character in the gap, so I can measure the distance from the beginning of the sentence to the character in question.

Unfortunately, it seems that wrapping some characters (I found it to be true for “Y” and “T”) in between adds an extra edge to the right, so all the text is stretched:

div { font-size: 100px; } 

 <h2>Expected (same width):</h2> <div>AAAA</div> <div> <span>A</span><span>-</span><span>A</span><span>-</span><span>A</span><span>-</span><span>A</span> </div> <h2>Unexpected (different width):</h2> <div>YYYY</div> <div> <span>Y</span><span>-</span><span>Y</span><span>-</span><span>Y</span><span>-</span><span>Y</span> </div> 

If you run the snippet, you will realize that "YYYY" is much wider when wrapping in SPAN.

Why is this so? How can I prevent this behavior?

Answer 1

You can solve this by setting font-kerning:none; in div

Like this

 div { font-size: 100px; font-kerning: none; } 

https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning

Answer 2

Perhaps this depends on the default browser font. Some fonts may have kerning (adjustments in increments between letters), which reduces the space between capital Y and a short letter or dash.

It seems that Chrome's text rendering engine uses more kerning than other browsers, or doesn't use it when there is an html tag between the letters.

You can solve this problem by specifying a div specified font family:

 div { font-family: Courier New; } 

(doesn't have to be a monospace font, but they won't have kerning)

Answer 3

Any font with a single spacing can help, since each character has the same width.

You can also try the following:
https://css-tricks.com/forums/topic/characterletter-widths-in-css/