Fonts

import { fitText } from "@remotion/layout-utils";
const MIN_PX = 48;
export function fitTitle(text: string, lang: string, box: number) {
  const { fontSize } = fitText({ text, withinWidth: box, fontFamily: "Brand",
    fontWeight: 700, textTransform: "none", validateFontIsLoaded: true });
  if (fontSize < MIN_PX) throw new Error(`Title too long for ${lang}: ${text}`);
  return Math.min(fontSize, 160);
}

const seg = new Intl.Segmenter("th", { granularity: "word" });
const words = [...seg.segment("สวัสดีครับยินดีต้อนรับ")]
  .filter((s) => s.isWordLike)
  .map((s) => s.segment);

const dir = getComputedStyle(document.documentElement).direction; // "ltr" or "rtl"
const s = dir === "rtl" ? -1 : 1;
tl.fromTo(".headline", { x: -80 * s, opacity: 0 }, { x: 0, opacity: 1, duration: 0.6 });
tl.fromTo(".progress", { scaleX: 0, transformOrigin: dir === "rtl" ? "right" : "left" },
          { scaleX: 1, duration: 1.2 });

"istanbul".toUpperCase();            // "ISTANBUL"
"istanbul".toLocaleUpperCase("tr");  // "İSTANBUL"
"άι".toUpperCase();                  // "ΆΙ", accent kept, wrong in Greek caps
"άι".toLocaleUpperCase("el");        // "ΑΪ"
"straße".toUpperCase();              // "STRASSE"

// qa-fonts.mjs <url> <allowed family>...  (exit 1 if any glyph came from another font)
import puppeteer from "puppeteer";
const [url, ...allowed] = process.argv.slice(2);
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url, { waitUntil: "networkidle0" });
await page.evaluate(() => document.fonts.ready);
const cdp = await page.createCDPSession();
await cdp.send("DOM.enable");
await cdp.send("CSS.enable");
const { root } = await cdp.send("DOM.getDocument", { depth: -1 });
const { nodeIds } = await cdp.send("DOM.querySelectorAll", { nodeId: root.nodeId, selector: "body *" });
const offenders = {};
for (const nodeId of nodeIds) {
  const { fonts } = await cdp.send("CSS.getPlatformFontsForNode", { nodeId });
  for (const f of fonts) {
    if (!f.isCustomFont || !allowed.includes(f.familyName)) {
      offenders[f.familyName] = (offenders[f.familyName] ?? 0) + f.glyphCount;
    }
  }
}
await browser.close();
if (Object.keys(offenders).length) { console.error("Unexpected fonts:", offenders); process.exit(1); }
console.log("All glyphs drawn with shipped fonts.");

# FONT PLAN
project: <name>
render_targets: [local, docker, lambda]         # where frames are rendered
locales:
  - tag: vi                                      # BCP 47
    script: Latn
    direction: ltr
    word_separator: space                        # space or none (th, lo, km, my, ja, zh)
    has_case: true
    cursive: false                               # true for Arab, Syrc, Mong, Nkoo, ...
    stacked_marks: true                          # vi, th, hi, ...
    copy_file: copy/vi.txt                       # NFC normalized
    longest_string: "<paste>"
fonts:
  - role: display
    family_css: Brand
    file: assets/fonts/BeVietnamPro-Bold.woff2
    real_family: Be Vietnam Pro                  # what qa-fonts.mjs will see
    weights: [700]
    unicode_range: "U+0000-00FF, U+0100-024F, U+0300-0323, U+1EA0-1EF9, U+20AB"
    license: OFL-1.1 (OFL.txt committed)
    coverage_check: "coverage.py: missing none (date)"
    shaping_check: "shaperglot check ... vi: pass (date)"
  - role: body
    family_css: Body
    file: assets/fonts/NotoSans-Regular.woff2
    real_family: Noto Sans
    license: OFL-1.1
fallback_chain: ["Brand", "Body", "sans-serif"]   # generic last, never a named system font
css_rules:
  letter_spacing: "0 for cursive and Indic locales; tracking only where the script allows"
  line_height_min: 1.25                          # raise for stacked marks
  text_transform: "uppercase only when has_case and lang is set"
  font_synthesis: "none for CJK and Arabic"
  dir: "rtl locales set dir on the root, motion mirrored, logos and digits not"
layout:
  fit: "fitText per locale, min 48px, fail if below"
  line_breaking: "browser wrapping or Intl.Segmenter(locale, {granularity: 'word'})"
  split_animation: "by word or line; never per codepoint for complex scripts"
loading:
  method: "Remotion @remotion/fonts loadFont, or HyperFrames @font-face in file plus fonts.ready"
  font_display: block
captions:
  format: ass
  fontsdir: assets/fonts
  shaping: complex
  encoding: -1                                    # RTL auto base direction (libass)
  max_chars_per_line: 42                          # per script: see Netflix limits
ai_footage_text_policy: "no text in generated plates; all text in post; diegetic text needs native review"
qa:
  automated: "qa-fonts.mjs <url> 'Be Vietnam Pro' 'Noto Sans'"
  human: "native reader reviews contact sheet of every text beat"
risks: []

You are adding on-screen text to a video for these locales: <list of BCP 47 tags>.
Before writing composition code, write FONT_PLAN.md using the font plan template I pasted.
Rules:
1. Use only font files that ship in the project (assets/fonts) with a license that allows commercial
   video and server rendering (prefer OFL; never Adobe Fonts or Apple system fonts on a render server).
   Never name a system font in a font-family stack.
2. For each locale, run a coverage check of the real copy against the font file and a shaping check
   (hyperglot or shaperglot). If the display font fails, pick a partner font for that script
   (Noto region variant for Han) and match its size with size-adjust. Report results in the plan.
3. Set lang on the root and on mixed-language spans; dir="rtl" for RTL; use logical CSS properties;
   mirror directional motion for RTL but never logos, photos or the digits inside a number.
4. letter-spacing 0 for Arabic-script and other cursive scripts and for Indic scripts; no uppercase
   transforms on scripts without case; line-height of at least 1.25 (more for Thai and Indic);
   animate complex scripts by word or line, never per character; never split text on spaces for
   Thai, Lao, Khmer, Myanmar, Chinese or Japanese (use Intl.Segmenter or browser wrapping).
5. Load fonts before measuring or rendering (Remotion loadFont or delayRender; HyperFrames @font-face
   in the file, build after document.fonts.ready, register the timeline last, font-display: block).
   Fit text per locale with a minimum size and fail loudly instead of shrinking below it.
6. Captions: libass via FFmpeg with fontsdir, shaping=complex, wrap_unicode=1; ASS Encoding -1 for RTL.
7. AI-generated footage must contain no text; add all text in post.
8. Before declaring done, run qa-fonts.mjs for every locale and render a contact sheet of every text
   beat for a native reader. Do not claim a locale works if either check was skipped.