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 chara

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

Answer 2

Any mono-spaced font may help as each character is the same width.

You could also try this:
https://css-tricks.com/forums/topic/characterletter-widths-in-css/

Answer 3

Whether this happens seems to depend on your browser's default font. Some fonts may have kerning (letter spacing adjustments) that reduces the space between a capital Y and a short letter or dash.

It seems that Chrome's text rendering engine either uses more kerning than other browsers, or fails to apply it when there's a html tag between the letters.

You can resolve this issue by giving your div a specified font-family:

div {
    font-family: Courier New;
}

(does not have to be a monospace font, but those are guaranteed to not have kerning)