/* Thai (th) styles — IBM Plex Sans Thai * * Loaded only when LANGUAGE_CODE == 'th' (see base.html). * * Optical size matching * --------------------- * Thai glyphs sit lower and narrower in the em box than Latin ones, and the * script stacks vowels above and tone marks above those, so Thai set at the * same nominal size as Nunito Sans / PT Serif reads noticeably smaller. * The whole type scale is Tailwind's, which is rem-based, so the cleanest fix * is to move the rem itself: 106.25% takes the root from 16px to 17px and * every text-*, leading-* and spacing utility scales with it uniformly — * including responsive variants and .prose's em-based sizes, which a * per-utility override would miss. */ html[lang="th"] { font-size: 106.25%; } /* Extra leading on top of the proportional bump: the vowel/tone stack needs * headroom that a 1.5 line-height tuned for Latin does not leave. */ html[lang="th"] body { font-family: 'IBM Plex Sans Thai', 'Noto Sans Thai', sans-serif; line-height: 1.75; } html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] h4, html[lang="th"] h5, html[lang="th"] h6, html[lang="th"] .font-heading, html[lang="th"] .font-body { font-family: 'IBM Plex Sans Thai', 'Noto Sans Thai', sans-serif; } /* Headings are set tight for Latin; Thai marks collide at those values. */ html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3 { line-height: 1.4; } html[lang="th"] h4, html[lang="th"] h5, html[lang="th"] h6 { line-height: 1.5; } /* IBM Plex Sans Thai tops out at 700, so 800/900 would synthesise a fake bold * and smear the tone marks. Clamp them to the real weight. */ html[lang="th"] .font-extrabold, html[lang="th"] .font-black { font-weight: 700; } /* Thai has no case and no word spaces: uppercase is a no-op and tracking * detaches vowels and tone marks from the consonants they belong to. */ html[lang="th"] .uppercase { text-transform: none; } html[lang="th"] .tracking-wide, html[lang="th"] .tracking-wider, html[lang="th"] .tracking-widest { letter-spacing: normal; } /* Thai wraps between words without spaces to mark them; the browser's * dictionary line breaker only kicks in on lang="th", which carries. * Long unbroken runs in narrow cells still need a fallback. */ html[lang="th"] td, html[lang="th"] th { overflow-wrap: break-word; word-break: normal; } /* Line breaking is controlled in the copy, not here. * * Chromium ships no Thai dictionary in this build, so it treats every * grapheme cluster boundary as a break opportunity and splits เครื่องมือ as * เครื่องมื + อ, straight through the ือ vowel. Measured across 280-600px, * neither `word-break: keep-all` nor a bare U+200B changes a single break — * CSS cannot remove a break opportunity that the UA has already granted. * Only U+2060 WORD JOINER does, so the affected strings carry it inline * (see the translator note on them in locale/th). Don't add a CSS rule here * expecting it to help; it was tried and measured, and it does nothing. */ /* prose.css hard-codes the Latin families for article bodies and tables. */ html[lang="th"] .prose, html[lang="th"] .prose thead th { font-family: 'IBM Plex Sans Thai', 'Noto Sans Thai', sans-serif; } html[lang="th"] .prose thead th { letter-spacing: normal; text-transform: none; } html[lang="th"] .prose p, html[lang="th"] .prose li { line-height: 1.85; } html[lang="th"] .prose h1, html[lang="th"] .prose h2, html[lang="th"] .prose h3, html[lang="th"] .prose h4 { line-height: 1.45; }