WebVTT Thai Font Rendering: Fixing Glyphs, Tone Marks & Subtitle Alignment on Mobile Browsers

Streaming international Asian content to Thai audiences presents unique typographical and rendering challenges. Because Thai is a non-spaced, multi-level script with combining tone marks (วรรณยุกต์) that sit above and below base consonants, naive subtitle implementations frequently result in clipped diacritics, character overlap, or “tofu” missing-glyph boxes on mobile devices.

Building a resilient subtitle rendering engine requires careful WebVTT cue construction, UTF-8 normalization, and robust custom font bundling.

The Three Vertical Tiers of Thai Script

Unlike Latin text which renders along a single horizontal baseline, Thai characters occupy three distinct vertical levels:

[ Tier 3: Upper Tone Marks / Than-tha-khat ]  ไม้เอก ไม้โท ไม้ตรี ไม้จัตวา ์
                     │
[ Tier 2: Upper Vowels ]                    ิ  ี  ึ  ื  ั  ็
                     │
[ Tier 1: Base Consonants & Base Vowels ]   ก  ข  ค ... เ  แ  โ
                     │
[ Tier 0: Lower Vowels & Diacritics ]       ุ  ู  ฺ

When a mobile video player’s caption rendering layer enforces strict vertical line-height constraints without adequate padding, Tier 3 tone marks are clipped by the bounding box, rendering words unintelligible.

1. WebVTT Cue Styling with Line-Height Buffers

Standard browser ::cue pseudo-elements must be explicitly styled with proportional line-heights and contrast backdrops:

::cue {
  font-family: 'Sarabun', 'Noto Sans Thai', sans-serif;
  font-size: 1.15rem;
  line-height: 1.7; /* Crucial: prevents tone mark truncation */
  color: #ffffff;
  background-color: rgba(12, 10, 16, 0.82);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}

Eliminating TIS-620 and Windows-874 Legacy Ingest Errors

Many legacy subtitle archives store Thai transcripts in 8-bit single-byte encodings (TIS-620 or CP874). When an HLS player assumes standard UTF-8, multi-byte sequence parsing fails, creating unreadable mojibake strings.

Incoming Subtitle (.srt / .vtt)
              │
              ▼
  [ Encoding Detection & Validation ]
       ├── (CP874 / TIS-620) ──► Iconv Transcoder ──► UTF-8 Normalized
       └── (UTF-8 with BOM)  ──► Strip BOM ────────► Clean UTF-8 Payload
              │
              ▼
   [ WebVTT Timecode Normalization (HH:MM:SS.mmm) ]

Modern streaming backends must run automated encoding normalization pipelines at ingestion. Learn more about media pipeline architecture at AVSubThai Today - Asian Media & Subtitle Engineering Hub.

Best Practices for Thai Subtitle Delivery

• Always bundle lightweight WOFF2 Thai font subsets (such as Noto Sans Thai or Sarabun) with full OpenType shaping table coverage.
• Avoid hardcoding static font pixel sizes; use relative viewport units (vw or cqw) so captions scale smoothly on both mobile screens and 4K displays.
• Test cue rendering across both WebKit (iOS Safari) and Chromium (Android) video rendering pipelines to verify consistent vertical baseline alignment.