Thai characters with multiple vowels/tone marks overlap and render incorrectly

[Tan1pawat]

Did you clear cache before opening an issue?

• [x] I have cleared my cache

Is there an existing issue for this?

• [x] I have searched the existing issues

Does the issue happen when logged in?

Yes

Does the issue happen when logged out?

Yes

Does the issue happen in incognito mode when logged in?

Yes

Does the issue happen in incognito mode when logged out?

Yes

Account name

tancoding

Account config

No response

Current Behavior

When typing in Thai, some characters with multiple vowels or tone marks—such as "เฮี้ยบ"—are rendered incorrectly. Specifically, the vowel and tone mark in "ฮี้"

overlap each other and appear stacked in a broken way. This makes the text hard to read.

This issue occurs with the Thai font "Boon", but I have also tested with several other Thai fonts and encountered the same issue.

I have tested on both Microsoft Edge and Google Chrome, and the issue occurs on both browsers.

Expected Behavior

Thai characters with multiple diacritics should render correctly, without overlapping or stacking incorrectly.

Steps To Reproduce

1. Open Monkeytype on Windows OS.
2. Set input language to Thai.
3. Start typing Thai words that include stacked vowels or tone marks, e.g., "เฮี้ยบ".
4. Observe the rendering issue in the word "ฮี้".

Environment

• OS: Windows 11
• Browser: Chrome / Edge (latest versions)
• Fonts tested: Boon(ไทย), and other fonts
• Issue persists across different browsers and fonts

Anything else?

No response

[Miodec]

Looks like its rendering fine for me. Can you check Chrome?

[Tan1pawat]

I test in Chrome version 136.0.7103.49

from this picture -ี and -้ is overlap

[JNX03]

Hi, I tested it on other browsers and it seems like the issue happens on most of them. I'm looking into it and will try to fix it.

ผมลอง Test กับ Browser อื่นแล้วนะครับเหมือนว่าจะมีปัญหากับ Browser ส่วนใหญ่ครับ กำลังดูปัญหานี้และจะพยายามแก้ไขให้นะครับ :D

PS: I tested with Thai fonts "Kanit" and "Sarabun" (the new ones I added in this PR: https://github.com/monkeytypegame/monkeytype/pull/6500) Some browser have fixed but some(most) didn't fix

[nadalaba]

Some browser have fixed but some(most) didn't fix

Hi @JNX03, what os are you on? I tested on windows and the issue is on all browsers, but mio seems to have checked on macos where it is fine.

Also, if you're looking into it, the issue is not related specifically to thai, but to any consecutive diacritics in languages that don't have the withLigatures propoerty like english and thai, you can try é́́ in English in custom mode to test it.

[JNX03]

Hi @NadAlaba I test it on Windows 10/11 and Linux and can reproduce it in Chrome, Firefox, and Edge. You’re right—it isn’t Thai-specific but affects any consecutive diacritics when withLigatures is false. I test with sequences like “é́́” in custom mode and work on a fix for general stacking.

Here screenshot that i have fix

"Thai Language (it work on all normal 1K , 2K and other)"

Letter é́́ (on the left is the one i fix and on the right on is the one that dosn't fix)

Here is the PR that fix (https://github.com/monkeytypegame/monkeytype/pull/6539)

[JNX03]

btw: but it still does have a problem with thai letter, it show that that letter was wrong causing when no vowels

I type only "ปกต" without " -ิ " it show that it was wrong (I kinda looking into it ASAP)

and also with é́́

[nadalaba]

btw: but it still does have a problem with thai letter, it show that that letter was wrong causing when no vowels

yeah I don't think the solution is to combine base char with diacritics (see comment), I think it is a rendering issue, not an input one, and could be solved by making <letter> elements display: inline for example (not tested and maybe there are simpler solutions)

Some browser have fixed but some(most) didn't fix

Can you tell me on what browsers does it render correctly on linux? (without the fix from your pr)

[JNX03]

Thanks for the feedback! I agree with your point. I tried changing the element to display: inline, and while it initially fixes the rendering issue and shows the correct prop type, once I start typing, everything overlaps (as i fix it to make it always render correctly using display:inline typing wrong like the word ที่ if typing -ี or -้ wrong it still show as correct . Also, in my tests on Linux (without the fix from my PR), it renders correctly on Firefox using Kali Linux.

[Miodec]

Can you test:

language set to english, then custom mode language set to thai, then custom mode

Input any problematic word into custom, see if it renders correctly.