alt Hacker NewsInteresting. Thai characters can also blow it out, I imagine because of the difficulty mapping glyphs to width:
https://biztos.com/hey/thai-mermaid-chart.png
To my surprise, Sublime Text gets it almost right:
https://biztos.com/hey/sublime-thai-mermaid.png
I tried finding a Thai monospace font and using that in the HTML but it was worse, probably didn't have the box drawing chars.
Still a fun tool and useful for lots of ASCII cases!
The first issue is due to the assumption that character count equals character display width. Thai tone markers usually[1] should not contribute to the display width (เพื่อน is chars = 6, width = 4), so it caused a layout shift.
The second issue is due to the program's layout engine not adjusting the glyph width of a fallback font to that of the main font. A lot of terminals do this, but it's not common for text editors or browsers (arguably this is the correct behavior for non-terminals, since you cannot assume everything must be snapped to a grid).
Fun test for this:
This has the same character width. Ghostty, etc., will render it correctly (| aligned). Most browsers and text editors will not.[1]: some layout engines render free-standing tone markers as 1 character; in that case, this rule only applies to when tone markers are following a character.