/* ═══════════════════════════════════════════════════════════════════════════ Fun-Tastic 悠樂長 · lang.css Per-language type (BRIEF 5.3) and every right-to-left adjustment. How it works 1. Every element that carries a lang attribute re-reads the font stacks and the metrics for its own language. So sets up a whole page, and a single in the language panel of an English page is set correctly too (with system fonts, because each page loads only its own web fonts). 2. The metrics are custom properties (--lh-display, --lh-text, --tracking-display …) that base.css and components.css consume. Nothing else is needed per component. 3. RTL: all CSS uses logical properties, so most things mirror by themselves. What cannot (transforms, clip-paths, directional glyphs) is listed at the foot of this file under [dir="rtl"]. --dir is 1 or -1 for x translations in CSS; core.js has FT.rtl(). ═══════════════════════════════════════════════════════════════════════════ */ /* ── Font stacks ───────────────────────────────────────────────────────────── Written here by tools/build.mjs from src/i18n/languages.json (fonts.display, fonts.text), one rule per language. Do not hand-write them: edit the registry. */ @layer lang { /* generated from src/i18n/languages.json */ [lang]:lang(zh-Hant){--font-display:"Lexend", "Chiron Hei HK", "PingFang HK", "Microsoft JhengHei", "Noto Sans HK", "Noto Sans CJK HK", sans-serif;--font-text:"Lexend", "Chiron Hei HK", "PingFang HK", "Microsoft JhengHei", "Noto Sans HK", "Noto Sans CJK HK", sans-serif} [lang]:lang(zh-Hans){--font-display:"Lexend", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;--font-text:"Lexend", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif} [lang]:lang(en){--font-display:"Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif} [lang]:lang(hi){--font-display:"Lexend", "Anek Devanagari", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", sans-serif;--font-text:"Lexend", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", sans-serif} [lang]:lang(pa){--font-display:"Lexend", "Anek Gurmukhi", "Noto Sans Gurmukhi", "Gurmukhi MN", "Nirmala UI", sans-serif;--font-text:"Lexend", "Noto Sans Gurmukhi", "Gurmukhi MN", "Nirmala UI", sans-serif} [lang]:lang(id){--font-display:"Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif} [lang]:lang(ur){--font-display:"Lexend", "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", serif;--font-text:"Lexend", "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", serif} [lang]:lang(fil){--font-display:"Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif} [lang]:lang(th){--font-display:"Lexend", "Anuphan", "Noto Sans Thai Looped", "Thonburi", "Leelawadee UI", sans-serif;--font-text:"Lexend", "Noto Sans Thai Looped", "Thonburi", "Leelawadee UI", sans-serif} [lang]:lang(de){--font-display:"Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif} [lang]:lang(fr){--font-display:"Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif} [lang]:lang(it){--font-display:"Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif} [lang]:lang(ko){--font-display:"Lexend", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;--font-text:"Lexend", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif} [lang]:lang(ru){--font-display:"Onest", "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Onest", "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif} [lang]:lang(es){--font-display:"Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-text:"Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif} } @layer base { /* Re-apply family and rhythm wherever the language changes. :where() keeps this at zero specificity, so any component rule still wins. */ :where([lang]) { font-family: var(--font-text); line-height: var(--lh-text); letter-spacing: normal; hyphens: var(--hyphens-text); -webkit-hyphens: var(--hyphens-text); } :where(h1, h2, h3, h4, .h-hero, .h-page, .h-section, .h-sub, .display):where([lang]), :where(h1, h2, h3, h4, .h-hero, .h-page, .h-section, .h-sub, .display) :where([lang]) { font-family: var(--font-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); hyphens: var(--hyphens-display); -webkit-hyphens: var(--hyphens-display); } :where(h3, h4, .h-sub):where([lang]), :where(h3, h4, .h-sub) :where([lang]) { line-height: var(--lh-sub); letter-spacing: var(--tracking-sub); } } @layer lang { /* ── Latin and Cyrillic: Lexend, Onest ──────────────────────────────────── */ [lang]:is(:lang(en), :lang(de), :lang(fr), :lang(it), :lang(es), :lang(id), :lang(fil), :lang(ru)) { --lh-display: 1.08; --lh-sub: 1.22; --lh-text: 1.65; --lh-ui: 1.25; --tracking-display: -0.022em; --tracking-sub: -0.012em; --display-scale: 1; --text-scale: 1; --measure: 36em; --mask-pad: .22em; --underline-offset: .22em; --fw-strong: 600; --fw-sub: 600; --hyphens-display: auto; --hyphens-text: manual; } /* Long words: hyphenate body text too (headings already do, in every language). */ [lang]:is(:lang(de), :lang(ru), :lang(fil), :lang(id)) { --hyphens-text: auto; } /* German and Russian headlines run long: a touch smaller, so fewer words break. */ [lang]:is(:lang(de), :lang(ru)) { --display-scale: .94; } /* ── Chinese and Korean ─────────────────────────────────────────────────── */ [lang]:is(:lang(zh-Hant), :lang(zh-Hans), :lang(ko)) { --lh-display: 1.25; --lh-sub: 1.38; --lh-text: 1.75; --lh-ui: 1.35; --tracking-display: 0em; --tracking-sub: 0em; --display-scale: .9; /* full-width glyphs read larger than Latin at the same size */ --text-scale: 1; --measure: 34em; /* 34 full-width characters */ --mask-pad: .16em; --underline-offset: .28em; --fw-strong: 700; /* 400 / 500 / 700 are loaded */ --fw-sub: 700; } [lang]:is(:lang(zh-Hant), :lang(zh-Hans)) { line-break: strict; /* no line starts with 。，」 or ends with 「 */ text-autospace: normal; /* a hair of space between 漢字 and Latin or digits */ --hyphens-display: manual; --hyphens-text: manual; } [lang]:lang(ko) { word-break: keep-all; /* Korean breaks at spaces, not inside a word */ line-break: strict; --hyphens-display: manual; --hyphens-text: manual; } /* ── Devanagari and Gurmukhi ───────────────────────────────────────────── Tall vowel signs above the headline and below the baseline: generous leading, no tracking (it breaks the headline), no synthetic bold. */ [lang]:is(:lang(hi), :lang(pa)) { --lh-display: 1.4; --lh-sub: 1.45; --lh-text: 1.75; --lh-ui: 1.5; --tracking-display: 0em; --tracking-sub: 0em; --display-scale: .94; --text-scale: 1; --measure: 38em; --mask-pad: .34em; --underline-offset: .34em; --fw-strong: 500; /* text face is loaded at 400 and 500 */ --fw-sub: 600; --hyphens-display: manual; --hyphens-text: manual; } /* ── Thai ──────────────────────────────────────────────────────────────── No spaces between words: the browser breaks by dictionary. Stacked tone marks need the same generous leading. Looped text face for older readers. */ [lang]:lang(th) { --lh-display: 1.4; --lh-sub: 1.5; --lh-text: 1.8; --lh-ui: 1.55; --tracking-display: 0em; --tracking-sub: 0em; --display-scale: .94; --text-scale: 1; --measure: 38em; --mask-pad: .36em; --underline-offset: .36em; --fw-strong: 500; --fw-sub: 600; line-break: auto; word-break: normal; --hyphens-display: manual; --hyphens-text: manual; } /* ── Urdu (Nastaliq) ───────────────────────────────────────────────────── Nastaliq descends diagonally along the line, so it needs far more leading than anything else here (2.1 text, 1.7 display), never any tracking, and a slightly larger text size because the letters are small on their body. */ [lang]:lang(ur) { --lh-display: 1.7; --lh-sub: 1.8; --lh-text: 2.1; --lh-ui: 1.9; --tracking-display: 0em; --tracking-sub: 0em; --display-scale: .8; --text-scale: 1.06; --measure: 34em; --mask-pad: .55em; --underline-offset: .62em; --fw-strong: 600; --fw-sub: 600; --hyphens-display: manual; --hyphens-text: manual; } /* ── Right to left ─────────────────────────────────────────────────────── Only what logical properties cannot express. Keep this list short and complete. */ [dir="rtl"] { --dir: -1; } /* Directional glyphs (chevron, external-link arrow) and the bridge point the other way. */ [dir="rtl"] .icon--dir { transform: scaleX(-1); } [dir="rtl"] .icon--dir:is(.icon--back, .icon--up, .icon--down) { transform: none; } [dir="rtl"] .bridge { transform: scaleX(-1); } /* Arc underlines are drawn from the start side with a clip-path, which has no logical form. */ [dir="rtl"] .site-nav__link > span::after, [dir="rtl"] .site-menu__link > span::after { clip-path: inset(-2px 0 -2px 101%); } [dir="rtl"] .site-nav__link:is(:hover, :focus-visible, [aria-current="page"]) > span::after, [dir="rtl"] .site-menu__link:is(:hover, :focus-visible, [aria-current="page"]) > span::after { clip-path: inset(-2px 0 -2px 0); } [dir="rtl"] .link-arc:is(:hover, :focus-visible)::after { animation-name: ft-arc-draw-rtl; } /* Segmented control: its sliding thumb is placed by JavaScript from the physical left edge. */ [dir="rtl"] .segmented__thumb { transform-origin: right center; } /* Latin runs that must keep their own order inside RTL text. */ [dir="rtl"] :is([lang="en"], .ltr) { unicode-bidi: isolate; } } @keyframes ft-arc-draw-rtl { from { clip-path: inset(-2px 0 -2px 101%); } to { clip-path: inset(-2px 0 -2px 0); } }