Skip to main content

Thai script rendering broken on frame names — vowels and tone marks detached from consonants

  • February 26, 2026
  • 0 replies
  • 183 views

pond


The problem

When a frame is given a Thai name, all combining characters — upper vowels (สระบน), lower vowels (สระล่าง), and tone marks (วรรณยุกต์) — are rendered detached from their base consonants. For example, "สวัสดีครับ" becomes a garbled string where  ั,  ี, and  ั float away from ส, ว, ด, and ร.

This happens only on frame name labels rendered on the canvas. Text layers and the input field while typing render Thai correctly — which confirms the issue is specifically in how the canvas renders frame name labels.

Why this matters

  • Thai is a non-segmented script (no spaces between words), so designers rely heavily on named frames and components to organize their files. Unreadable frame names force Thai designers to either name everything in English — adding cognitive overhead — or accept a broken, barely legible workspace.
  • This is not a cosmetic issue. It makes frame navigation, handoff to developers, and design reviews significantly harder for any team designing Thai-language products.
  • The same rendering pipeline likely affects other complex scripts (Burmese, Khmer, Lao) that rely on GPOS glyph positioning, so fixing this would benefit multiple language communities at once.

Root cause (Analyzed by Claude)

The canvas rendering engine does not appear to apply GPOS (Glyph Positioning) table rules when drawing frame name labels. Thai combining characters (Unicode range U+0E31, U+0E34–U+0E3A, U+0E47–U+0E4E) require context-aware positioning relative to their base consonant — above, below, or stacked. Without GPOS, they fall back to a default position and appear separated.

The browser's native text engine handles this correctly, which is why the text input field and plugin UIs render Thai without issue.

Steps to reproduce

  1. Create a new frame
  2. Rename it to any Thai text containing combining characters, e.g. สวัสดีครับ or ตั้งค่า
  3. Press Enter to confirm
  4. Observe that vowels and tone marks are visually detached from consonants on the canvas label

Expected behavior

Frame name labels should render Thai combining characters in their correct positions relative to base consonants, matching how the text input field already renders them.

Environment

Reproducible on macOS, desktop app and browser, across all Figma versions tested to date. (Not sure about Windows)