search

parpalak / upmath.me

Markdown and LaTeX online editor - create text for web with equations and diagrams
https://upmath.me/
MIT License
323 stars 40 forks source link

Remove certain fonts to eliminate rendering error #29

Closed 3x closed 3 years ago

3x commented 3 years ago

I've noticed a text rendering error while using upmath.me on an iPad, and only recently on my desktop machine.

Text rendering "shadow" error

This only occured after I installed the Menlo font (default monospaced font on iPadOS/MacOS), which has different widths for weights 400 and 700. Since the <texteditor> element does not render certain strings as bold, this causes misalignment between the actual editor element and the preview overlay on top of it.

Misaligned text caused by the bold glitch

You can see this here, where my cursor is at the end of the gray editable text, while the blue preview extends farther.

Misaligned text glitch resolved using a non-variable width font

This can be resolved by disabling the certain fonts which have variable widths.

My resolution for the issue is removing Menlo, Monaco, and Courier New from the system font stack, and replacing them with Consolas, "Liberation Mono", "Ubuntu Mono", monospace. Consolas will resolve on modern Windows machines, Liberation Mono is the monospaced default on many GNU/Linux distrobutions, and "Ubuntu Mono" can be loaded from Google Fonts for MacOS/other machines which do not have these other default fonts. All of these fonts do not vary in width when changing widths, eliminating this issue.

Please let me know what you think!

parpalak commented 3 years ago

Hi! Thanks for investigating this issue. Why can't we just remove Menlo from the CSS font list?

parpalak commented 3 years ago

I've kept your idea but changed the code: https://github.com/parpalak/upmath.me/commit/de2a0bafaef9ee731a6db987e6d6c5a8dc7c5a3a

I've chosen JetBrains Mono as a fallback font, not Ubuntu Mono. And I've skipped link rel="preconnect" (there is another one) and display=swap (media="none" onload="if(media!='all')media='all'" works in the same way).

Thanks for reporting the issue. I hope it will fix problems like this: https://github.com/parpalak/upmath.me/issues/11