Very long lines of code become misaligned

[WebCoder49]

Reproduce this by copy-pasting the Google.com homepage into Neattribute.

[proatwork]

try letter-spacing: 0 on code-input > pre

[WebCoder49]

try letter-spacing: 0 on code-input > pre

Thanks for the suggestion, but it didn't work. The bug:

• Persists no matter the letter-spacing I apply to code-input textarea, code-input pre, code-input pre *, with !important or without it.
• Occurs in Chromium (MS Edge 125.0.2535.51 (Official build) (64-bit) / Google Chrome 125.0.6422.112 (Official Build) (64-bit) (cohort: M125 Rollout)), but not in Firefox (Developer Edition 127.0b5 (64-bit))
• Appears to be due to the characters being very slightly wider in the textarea than in the highlighted pre code element.
• Occurs more so in Prism.js than in highlight.js on the example above, but does occur in both.

[WebCoder49]

In Chrome DevTools with Prism.js, this code makes the alignment correct at the far left and far right sides of the example, but in the middle the highlighted code (pre code) is still further to the right than the editable code (textarea).

code-input pre * {
    letter-spacing: 0.0005px;
}

[WebCoder49]

Setting the text-rendering property to any consistent value on code-input textarea, code-input pre, code-input pre * doesn't seem to work.

[WebCoder49]

I'm not sure how to fix this bug; I'll leave it now because it's very much of an edge-case but if you have any idea of how it could be fixed please let me know!