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

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)