Please let me know here if you have any idea for how to get the width of a character in a textarea element, for use in rendering the character below in the highlighted section with the same width. A canvas solution is already being used, but some arbitrary checks are in place to make it more cross-browser compatible and this is becoming very messy. The code for this is in the special-chars plugin.
Testing
To test the special character view for every character, like in the screenshot below, use new codeInput.plugins.SpecialChars(true, true, /./g).
Status when Writing
It doesn't get the right width with Unicode characters like emojis, but it appears fine with all ASCII characters except for Tab (0009):
It never highlights newlines - maybe this should be made clear / fixed?
The rather messy canvas method used to find character width may be the problem.
The RegEx for special characters should probably be changed - perhaps it should just match zero-width () and -like characters?
This is truly broken - I tried the same tests on an X11/Ubuntu machine on Chromium and Firefox and it gave different character widths to on a Windows 11 machine.
Query
Please let me know here if you have any idea for how to get the width of a character in a
textarea
element, for use in rendering the character below in the highlighted section with the same width. A canvas solution is already being used, but some arbitrary checks are in place to make it more cross-browser compatible and this is becoming very messy. The code for this is in thespecial-chars
plugin.Testing
To test the special character view for every character, like in the screenshot below, use
new codeInput.plugins.SpecialChars(true, true, /./g)
.Status when Writing
) and
-like characters?