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

Question

In my current project, I need to wrap every single character of a sentence within a span, so I can measure the distance from the beginning of the sentence up until the character in question.

Unfortunately, it seems that wrapping some of the characters (I found it to be true for "Y" and "T") in a span, adds an extra margin to the right, so the whole text gets stretched:

div { font-size: 100px; }

<h2>Expected (same width):</h2>
<div>A-A-A-A</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>Y-Y-Y-Y</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 "Y-Y-Y-Y" is significantly wider when wrapped in SPANs.

Why is that so? How can I prevent this behaviour?

Answer 1

You can solve that with setting font-kerning:none; to the div

Like this

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

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