Position Thai tone marks over stacked vowels and tall consonants - #27
Merged
Conversation
…onsonants Builds on the per-letter highlighting already on main. Each code point renders as its own inline-block `.letter` box, so a combining mark shaped alone can collide with whatever shares the consonant's above slot. A shared helper now nudges the marks so they sit correctly: - tone-raise: lift a tone clear of an above-vowel (ทื่อ, สิ้น) or of สระอำ/นิคหิต whose circle sits in the slot (ต่ำ, น้ำ). - tone-shift: nudge above marks LEFT on tall-ascender consonants ป ผ ฝ พ ฟ ฬ so they clear the ascender (ป่า, ฟ้า, ปุ่น). Applies to the above-vowel AND the tone, by the same amount, so they stay aligned (ปี่, ปิ้น). - below-vowels (ปู่) and bare consonants (ท่อ) are left at natural height. The decision logic lives in $lib/engine/thai-marks (toneClass), shared by the typing view and a new /kitchen-sink page. The `.letter` CSS moves to app.css (global) with tunable --tone-raise-y / --tone-shift-x vars. /kitchen-sink is a blank canvas to find more exceptions: paste/type Thai, see natural shaping vs. the letter-box renderer side by side, and tune the raise/ shift amounts with live sliders. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Builds on the per-letter Thai highlighting already on
main. Each code point renders as its own inline-block.letterbox, so a combining mark shaped alone can collide with whatever shares the consonant's above slot. This PR adds the small positional nudges that fix those collisions, plus a/kitchen-sinkdev page for finding and tuning more cases.What changed
tone-raise— lift a tone clear of an above-vowel (ทื่อ, สิ้น) or of สระอำ/นิคหิต whose circle sits in the slot (ต่ำ, น้ำ).tone-shift— nudge above marks left on tall-ascender consonantsป ผ ฝ พ ฟ ฬso they clear the ascender (ป่า, ฟ้า, ปุ่น). Applies to the above-vowel and the tone by the same amount, so they stay aligned (ปี่, ปิ้น).$lib/engine/thai-marks.ts(toneClass), shared by the typing view and the kitchen-sink..letterCSS moved toapp.css(global) with tunable--tone-raise-y/--tone-shift-xvariables (defaults-0.3em/-0.1em)./kitchen-sinkpage: paste/type Thai, compare natural shaping vs. the letter-box renderer side by side, and tune the raise/shift amounts with live sliders ("mark nudged tones" tints raised=teal, shifted=amber).Why
In Sarabun, rendering each code point as a separate box means tone marks/vowels sit at a nominal position that overlaps an above-vowel, a สระอำ circle, or a tall consonant's ascender. These nudges reproduce what the font's natural shaping does.
Reviewer notes
/kitchen-sinkexists specifically to dial them in and surface more exceptions, so the current-0.3em/-0.1emdefaults are easy to revisit.toneClassbehavior is covered inTypingFlow.test.ts(ทื่อ/ต่ำ raise; ปุ่น/ฟ้า shift; ปี่ both; ท่อ/กี่ neither). 67 web tests pass,svelte-checkclean.🤖 Generated with Claude Code