Search code examples
htmlcssmonospace

Monospace font sometime loses pixels

I'm trying to implement a html/css/js editor, to make things easier I decided to use a monospace font, in this case the JetBrains font. But as I tried setting the caret position to a multiple of the size of one letter, I noticed that the caret was, when the text got big enough, way further then what I expected.

Playing a bit with this, I figured a really weird thing, here is an example: enter image description here

Do you know why this is happening and if there is a way of implementing it like that, or should I always recalculate the width of the whole line?

By the way, here is the css code of the sizer:

.__editor-sizer {
    opacity: 0;
    position: absolute;
    top: -200%;
    padding: 0;
}
Solution

  • Ok so after a lot of trials, I finally came up to the conclusion that the issue could only come from the .clientWidth property, which appears to convert the result to an int. That is why I tried using .getBoundingClientRect().width instead. This is the result, not perfect but enough close for me:

    enter image description here