# One page lettered in six languages

> One comic page, split and pictures fixed, lettered per language: the locale picks the face; Japanese runs vertical and, like Arabic, reads from the right.

- HTML version: https://postext.dev/en/cookbook/one-page-six-languages
- Recipe Nº 153 · Comics & manga · Level 3 (Advanced) · Outputs: Canvas, PDF
- Genres: Comics
- Requires postext ≥ 1.21.0, postext-pdf ≥ 1.21.0 · tested with 1.21.0, postext-pdf 1.21.0 on 2026-10-07
- Pages: [1](https://postext.dev/cookbook/one-page-six-languages/en/p01.webp?v=2c80d1c8), [1](https://postext.dev/cookbook/one-page-six-languages/en/p02.webp?v=2c80d1c8)
- PDF: https://postext.dev/cookbook/one-page-six-languages/en/one-page-six-languages.pdf?v=2c80d1c8
- Open in Sandbox: https://postext.dev/en/sandbox#recipe=one-page-six-languages&lang=en (.postext: https://postext.dev/cookbook/one-page-six-languages/en/one-page-six-languages.postext)
- Last updated: 2026-10-07
- Other languages: [es](https://postext.dev/es/cookbook/one-page-six-languages.md), [ca](https://postext.dev/ca/cookbook/one-page-six-languages.md), [pt](https://postext.dev/pt/cookbook/one-page-six-languages.md), [zh](https://postext.dev/zh/cookbook/one-page-six-languages.md), [ja](https://postext.dev/ja/cookbook/one-page-six-languages.md), [ar](https://postext.dev/ar/cookbook/one-page-six-languages.md)

## In short

The same comic page in English, Spanish, French, Japanese, Chinese and Arabic: only the words change, and Postext redraws every balloon around them.

## What you'll build

One page of a comic, *The Lighthouse Radio*: Maya arrives at her grandfather's lighthouse as a storm comes in, the radio is dead, and the culprit is Biscuit, asleep on the cable. The split and the five watercolour pictures are fixed; what changes from one edition to the next is a script of nine lines. Each edition of this recipe sets its own language, and every edition also sets the French page beside it: English and French, Spanish and French, and so on through Japanese, Chinese and Arabic. The engine redraws each balloon around the words it holds. Japanese is lettered in vertical columns in Zen Antique. The Japanese and Arabic pages read from the right, so the three panels of the middle tier change places.

**This recipe answers:**

- How do I re-letter a comic in another language?
- How do I letter Japanese vertically inside balloons?

## The short answer

One config for every language; the locale picks face, direction and columns.

```js
// script.js, lines 33–52
const LOCALE = t({ en: 'en-gb', es: 'es', ja: 'ja', zh: 'zh-Hans', ar: 'ar' });
const comics = {
  // No fontFamily: each language is lettered in its own comic face (defaultComicFont):
  // Comic Neue, Zen Antique for Japanese, Noto Sans SC, Playpen Sans Arabic. The size is
  // one for the whole book: a longer translation grows its balloons, never shrinks its text.
  lettering: { fontSize: pt(8.5), lineHeight: 1.12, color: col('ink') },
  // writingMode 'auto' (the default): Japanese is lettered in vertical columns.
  // readingDirection 'auto': a Japanese or Arabic page reads from the right, so the
  // tier of three panels is laid out right to left from the same split. The art keeps
  // its drawn direction (mirrorArt: false).
  panel: { borderWidth: pt(1), borderColor: col('ink') },
  gutter: { horizontal: mm(4), vertical: mm(3) },
  balloonStyles: [
    { id: 'caption', fill: col('caption'), stroke: col('ink'), strokeWidth: pt(0.6) },
    { id: 'sfx', color: col('red'), halo: pt(1.4), haloColor: col('paper'), rotate: -8 },
  ],
  readingDirection: 'auto', // the default, written out: it is what an edition flips
  cast: [{ id: 'maya', name: 'Maya' }, { id: 'tomas', name: 'Tomás' }],
  runningHeads: true, // the footer prints on the comic page
};
```

## Ingredients

**Teaches**

- [Re-lettering in other languages](https://postext.dev/en/docs/comics.md#lettering): The split, the art, the crops and the speaker anchors belong to the page; each language's Markdown carries only the words, and the balloons are rebuilt around each translation's text.
- [Reading direction and manga order](https://postext.dev/en/docs/comics.md#reading-direction): Panels fill the cells in reading order: left to right, or right to left for manga and for right-to-left languages; comics.artDirection and mirrorArt decide when the art is flipped to match.

**Also uses**

- [Comic lettering](https://postext.dev/en/docs/comics.md#lettering)
- [Speakers and anchors](https://postext.dev/en/docs/comics.md#speakers-and-anchors)
- [Panel splits](https://postext.dev/en/docs/comics.md#splitting-the-page)
- [Panel art and crops](https://postext.dev/en/docs/comics.md#panels-and-art)
- [Comic pages](https://postext.dev/en/docs/comics.md#comic-pages)
- [Balloon styles](https://postext.dev/en/docs/comics.md#balloon-styles)
- [Sound effects](https://postext.dev/en/docs/comics.md#balloon-styles)
- [Chinese, Japanese and Korean fonts](https://postext.dev/en/docs/configuration.md#chinese-japanese-and-korean-fonts)
- [Arabic fonts](https://postext.dev/en/docs/arabic-layout.md#fonts)
- [Right-to-left text](https://postext.dev/en/docs/arabic-layout.md#direction-and-the-bidirectional-algorithm)
- [Vertical text](https://postext.dev/en/docs/configuration.md#vertical-writing)
- [Semantic colour palette](https://postext.dev/en/docs/configuration.md#color-palette)
- [Pages on a canvas](https://postext.dev/en/docs/configuration.md#rendering-a-page-to-a-bitmap)
- [PDF export](https://postext.dev/en/docs/configuration.md#generating-pdfs)
- [Panel borders and gutters](https://postext.dev/en/docs/comics.md#panels-and-art)
- [Heads by page role](https://postext.dev/en/docs/configuration.md#text-elements)
- [Fonts embedded in the PDF](https://postext.dev/en/docs/configuration.md#why-a-font-provider)
- [Figures and tables as resources](https://postext.dev/en/docs/document-format.md#resources)

**Config at a glance**

- [`bodyText`](https://postext.dev/en/docs/configuration.md#body-text), [`colorPalette`](https://postext.dev/en/docs/configuration.md#color-palette), [`comics`](https://postext.dev/en/docs/comics.md#comic-pages), [`footer`](https://postext.dev/en/docs/configuration.md#headers--footers), [`header`](https://postext.dev/en/docs/configuration.md#headers--footers), [`headings`](https://postext.dev/en/docs/configuration.md#headings), [`layout`](https://postext.dev/en/docs/configuration.md#layout), [`locale`](https://postext.dev/en/docs/configuration.md#hyphenation), [`page`](https://postext.dev/en/docs/configuration.md#page)

**APIs**

- [`buildDocument`](https://postext.dev/en/docs/configuration.md#building-a-document), [`clearMeasurementCache`](https://postext.dev/en/docs/configuration.md#measurement-cache), [`decompressWoff2`](https://postext.dev/en/docs/configuration.md#browser-font-provider-fontsource--woff2), `defaultComicFont`, `defaultComicSfxFont`, [`registerResourceImage`](https://postext.dev/en/docs/architecture.md#api-surface), [`renderPageToCanvas`](https://postext.dev/en/docs/configuration.md#rendering-a-page-to-a-bitmap), [`renderToPdf`](https://postext.dev/en/docs/configuration.md#generating-pdfs)

**Typefaces**

- Comic Neue (OFL-1.1), Bangers (OFL-1.1), Zen Antique (OFL-1.1), Dela Gothic One (OFL-1.1), Noto Sans SC (OFL-1.1), ZCOOL KuaiLe (OFL-1.1), Playpen Sans Arabic (OFL-1.1), Lalezar (OFL-1.1)

## Method

### 1 · One config for every language

The code is [the short answer](https://postext.dev/en/cookbook/one-page-six-languages.md#the-short-answer) above. Nothing in the config names a language but `locale`. With no `fontFamily`, the lettering takes the comic face of the document language (`defaultComicFont`): Comic Neue, Zen Antique, Noto Sans SC or Playpen Sans Arabic, and the sound effect the matching display face. `writingMode: 'auto'` turns the Japanese balloons into vertical columns; `readingDirection: 'auto'` reads the Japanese and Arabic pages from the right, as their languages do, so the same `split="30 / 35 [* | * | *] / *"` sets the radio panel on the right and the cat on the left. The speaker ids (`maya`, `tomas`) are the same in every script, and the pictures' anchors answer to them.

The size is one for the whole book. The English script has 216 letters, the Spanish 220, the French 224, the Chinese 74 characters; the longer scripts get larger balloons, never smaller type.

### 2 · French rides along in every edition

```js
// script.js, lines 213–218
const build = (md, cfg) =>
  buildWithFonts(() => buildDocument({ markdown: md, resources }, cfg), md);
const docs = [await build(markdown, config())];
// French is not a site language, so every edition carries its page: the same config
// with another locale, as a new object (the engine caches resolved configs by identity).
docs.push(await build(french, { ...config(), locale: 'fr', footer: footerFor('fr', 'fr') }));
```

The site has no French pages, so each edition builds two documents: its own page, then the French one from `content.fr.en.md`, with the same config and a `locale` of `'fr'`. The config is spread into a new object, because the engine caches resolved configs by identity. The French script uses the narrow no-break space before `!` and `?`, as French typesetting does.

### 3 · The pictures do not change

```js
// script.js, lines 119–194
const box = ([x, y, width, height]) => ({ x, y, width, height });
const who = (id, x, y, head, face) => ({ id, x, y,
  ...(head && { head: { x: head[0], y: head[1] } }), ...(face && { face: box(face) }) });
const ART = {
  'lh-arrive': { width: 1100, height: 733, safeArea: box([.22, .08, .4, .64]),
    alt: t({ en: 'A girl in a yellow raincoat walks up a coastal path towards a red-and-white '
        + 'lighthouse, a fat orange cat trotting ahead; storm clouds gather over the sea.',
      es: 'Una niña con chubasquero amarillo sube por un camino de costa hacia un faro '
        + 'rojo y blanco, con un gato naranja gordo trotando delante; sobre el mar se '
        + 'acumulan nubes de tormenta.',
      zh: '一个穿黄色雨衣的女孩沿着海边小路走向红白相间的灯塔，一只胖橘猫小跑在前面；海上聚起了暴风雨的乌云。',
      ar: 'فتاة بمعطف مطر أصفر تصعد دربًا ساحليًا نحو منارة حمراء وبيضاء، وأمامها قط '
        + 'برتقالي سمين يهرول، والغيوم تتجمّع فوق البحر.',
      ja: '黄色いレインコートの女の子が、赤と白の灯台へ続く海辺の小道をのぼっていく。前を太ったオレンジ色の猫が小走りし、海の上には嵐の雲が集まっている。' }),
    anchors: [
      who('maya', .29, .52, [.27, .47], [.22, .42, .12, .16]),
      who('biscuit', .4, .68, [.4, .66], [.37, .64, .07, .08]),
    ],
    avoid: [box([.51, .09, .1, .43])],
  },
  'lh-radio': { width: 1000, height: 1000, safeArea: box([.11, .36, .36, .31]),
    alt: t({ en: 'The old keeper, white-bearded in a navy sweater and cap, taps a valve radio '
        + 'in the lamp room, microphone in hand; the great lens glows beside him.',
      es: 'El viejo farero, de barba blanca, jersey azul marino y gorra, golpea una radio '
        + 'de válvulas en la sala de la lámpara con el micrófono en la mano; a su lado '
        + 'brilla la gran lente.',
      zh: '白胡子的老守塔人穿着藏青色毛衣、戴着帽子，在灯室里手握话筒敲着一台电子管收音机；巨大的透镜在他身旁发光。',
      ar: 'حارس المنارة العجوز بلحيته البيضاء وكنزته الكحلية وقبعته ينقر على مذياع قديم '
        + 'في غرفة الفانوس والميكروفون في يده، والعدسة الكبيرة تتوهّج بجانبه.',
      ja: '白いひげの老灯台守が、紺のセーターに帽子姿で、灯室でマイクを握って真空管ラジオをたたいている。そばで大きなレンズが光っている。' }),
    anchors: [
      who('tomas', .345, .52, [.38, .44], [.29, .4, .16, .18]),
    ],
    avoid: [box([0, .44, .22, .26])],
  },
  'lh-maya': { width: 1100, height: 1100, safeArea: box([.25, .27, .41, .68]),
    alt: t({ en: 'Close-up of Maya frowning at the floor and pointing down.',
      es: 'Primer plano de Maya, que frunce el ceño mirando al suelo y señala hacia abajo.',
      zh: '玛雅的特写：她皱着眉头看着地板，手指向下指。',
      ar: 'لقطة قريبة لمايا وهي تعقد حاجبيها ناظرةً إلى الأرض وتشير إلى أسفل.',
      ja: 'マヤのアップ。眉をひそめて床を見つめ、下を指さしている。' }),
    anchors: [
      who('maya', .54, .565, [.5, .3], [.4, .33, .24, .29]),
    ],
    avoid: [box([.27, .73, .25, .22])],
  },
  'lh-biscuit': { width: 1000, height: 1000, safeArea: box([.58, .25, .42, .33]),
    alt: t({ en: 'Under the desk, the fat orange cat sleeps on his back on top of the black '
        + 'radio cable, squashing it flat.',
      es: 'Bajo la mesa, el gato naranja gordo duerme panza arriba encima del cable negro '
        + 'de la radio y lo aplasta.',
      zh: '桌子底下，胖橘猫四脚朝天地睡在收音机的黑色电线上，把电线压得扁扁的。',
      ar: 'تحت المكتب ينام القط البرتقالي السمين على ظهره فوق سلك المذياع الأسود ويسحقه.',
      ja: '机の下で、太ったオレンジ色の猫がラジオの黒いコードの上にあおむけで眠り、コードをぺしゃんこにしている。' }),
    anchors: [
      who('biscuit', .72, .355, [.73, .32], [.64, .27, .2, .18]),
    ],
    avoid: [box([.93, .28, .07, .24]), box([0, .72, .4, .1])],
  },
  'lh-beam': { width: 1200, height: 800, safeArea: box([.15, .01, .25, .3]),
    alt: t({ en: 'Night: the lighthouse beam sweeps over a dark sea; Maya and her grandfather '
        + 'stand on the lantern gallery, and far out a fishing boat shows its lights.',
      es: 'De noche, el haz del faro barre un mar oscuro; Maya y su abuelo están en la '
        + 'galería de la linterna y a lo lejos se ven las luces de un pesquero.',
      zh: '夜里，灯塔的光束扫过漆黑的海面；玛雅和外公站在灯室外的回廊上，远处一艘渔船亮着灯。',
      ar: 'ليلًا يمسح شعاع المنارة بحرًا مظلمًا، ومايا وجدّها واقفان على شرفة الفانوس، '
        + 'وفي البعيد قارب صيد بأضوائه.',
      ja: '夜。灯台の光の帯が暗い海をなでる。マヤと祖父は灯室の回廊に立ち、沖には漁船の明かりが見える。' }),
    anchors: [
      who('maya', .235, .15, null, [.21, .11, .05, .07]),
      who('tomas', .3, .145, null, [.28, .11, .04, .06]),
    ],
    avoid: [box([.79, .55, .08, .09])],
  },

};
```

The safe areas are narrower than the cells of this split: the middle tier holds three panels about 46 mm wide and 80 mm tall, so each square picture shows a column about 58 % of its width, while its safe area, the speaker's face and what the line is about, takes 36–42 %. The pictures are not mirrored for Japanese or Arabic (`mirrorArt` stays false): Maya still walks up the path from the left, and only the order of the panels follows the reading.

## The whole recipe

One file, composed from the recipe's folder with the sample text and the Cookbook's shared kit inlined; it builds its own page. To run it, put it in a `<script type="module">` on an empty page, or paste it into the JS panel of a new CodePen (as a module). It imports postext from esm.sh, so there is nothing to install or build.

- Source folder: https://github.com/drnachio/postext/tree/main/cookbook/one-page-six-languages

### script.js

```js
// ═══ Postext Cookbook · Nº 153 · One page lettered in six languages ═══════════════════
// https://postext.dev/en/cookbook/one-page-six-languages
// Code: MIT · Story: written for the recipe (CC BY 4.0) · Pictures: generated with diffusion models
// Fonts: Comic Neue, Bangers, the comic faces of each script (OFL) · Needs postext ≥ 1.21.0
// One comic page, its split and its five pictures fixed, lettered from a script per
// language: each edition sets its own page, and the French one beside it.
import {
  buildDocument, renderPageToCanvas, clearMeasurementCache, registerResourceImage,
  defaultComicFont, defaultComicSfxFont,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'en'; // @lang: the edition: 'en' | 'es' | 'ja' | 'zh' | 'ar' (French rides along)
const RECIPE = 'one-page-six-languages';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: ink and paper, the lighthouse red for the sound effect
const palette = {
  ink: '#1b1d22', // borders, lettering
  red: '#c23a2b', // the purr (4.9:1 on paper)
  caption: '#f3ead2', // narration boxes, the colour of old charts
  muted: '#5d6068', // the footer
  paper: '#ffffff',
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = [
  ...Object.entries(palette).map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } })),
  { id: 'main-color', name: 'red (defaults)', value: { hex: palette.red, model: 'hex' } },
];
// #endregion

// #region answer: one config for every language; the locale picks face, direction and columns
const LOCALE = t({ en: 'en-gb', es: 'es', ja: 'ja', zh: 'zh-Hans', ar: 'ar' });
const comics = {
  // No fontFamily: each language is lettered in its own comic face (defaultComicFont):
  // Comic Neue, Zen Antique for Japanese, Noto Sans SC, Playpen Sans Arabic. The size is
  // one for the whole book: a longer translation grows its balloons, never shrinks its text.
  lettering: { fontSize: pt(8.5), lineHeight: 1.12, color: col('ink') },
  // writingMode 'auto' (the default): Japanese is lettered in vertical columns.
  // readingDirection 'auto': a Japanese or Arabic page reads from the right, so the
  // tier of three panels is laid out right to left from the same split. The art keeps
  // its drawn direction (mirrorArt: false).
  panel: { borderWidth: pt(1), borderColor: col('ink') },
  gutter: { horizontal: mm(4), vertical: mm(3) },
  balloonStyles: [
    { id: 'caption', fill: col('caption'), stroke: col('ink'), strokeWidth: pt(0.6) },
    { id: 'sfx', color: col('red'), halo: pt(1.4), haloColor: col('paper'), rotate: -8 },
  ],
  readingDirection: 'auto', // the default, written out: it is what an edition flips
  cast: [{ id: 'maya', name: 'Maya' }, { id: 'tomas', name: 'Tomás' }],
  runningHeads: true, // the footer prints on the comic page
};
// #endregion

const NAMES = { en: 'English', es: 'Español', ja: '日本語', zh: '中文', ar: 'العربية', fr: 'Français' };
const footerFor = (lang, locale) => ({ elements: [{ kind: 'text', id: 'edition',
  content: `${NAMES[lang]} · ${defaultComicFont(locale)}`, fontFamily: defaultComicFont(locale),
  fontSize: pt(8), color: col('muted'), align: 'center', pages: 'comic',
  placement: { anchor: { to: 'page', edge: 'bottom' }, offset: { y: mm(-8) } } }] });

const config = () => ({ // a factory: the engine caches resolved configs per object
  locale: LOCALE,
  colorPalette,
  page: {
    sizePreset: 'custom', width: mm(170), height: mm(260), dpi: 150, // a comic book
    margins: { top: mm(14), bottom: mm(18), left: mm(12), right: mm(12), mirror: true },
  },
  layout: { layoutType: 'single' },
  bodyText: { fontFamily: defaultComicFont(LOCALE), fontSize: pt(10), lineHeight: pt(14),
    color: col('ink'), boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink') },
  headings: { color: col('ink'),
    levels: [{ level: 1, breakBefore: { enabled: true, parity: 'any' } }] }, // the H1 break
  comics,
  header: { elements: [] },
  footer: footerFor(LANG, LOCALE),
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`:::page{split="30 / 35 [* | * | *] / *"}
::panel{art=lh-arrive}
caption: Maya spent every summer at the lighthouse.
maya: Grandpa! I'm here!
::panel{art=lh-radio}
tomas: Just in time. The radio's dead, and there's a storm coming.
::panel{art=lh-maya}
maya: Grandpa… I think I found the problem.
::panel{art=lh-biscuit}
sfx: purrrr
::panel{art=lh-beam}
tomas: Radio's working, lamp's lit.
maya: And Biscuit has a new bed.
:::
`; // content.<lang>.md: the page in the edition's language
const french = String.raw`:::page{split="30 / 35 [* | * | *] / *"}
::panel{art=lh-arrive}
caption: Maya passait tous ses étés au phare.
maya: Papi ! Je suis là !
::panel{art=lh-radio}
tomas: Tu tombes bien. La radio est morte, et une tempête arrive.
::panel{art=lh-maya}
maya: Papi… je crois que j’ai trouvé la panne.
::panel{art=lh-biscuit}
sfx: rrrrrr
::panel{art=lh-beam}
tomas: La radio marche, le phare est allumé.
maya: Et Biscuit a un nouveau lit.
:::
`; // content.fr.en.md: the French page, in every edition

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = {
  'Comic Neue': ['400', '700', '400i', '700i'], Bangers: ['400'], // Latin
  'Zen Antique': ['400'], 'Dela Gothic One': ['400'], // Japanese
  'Noto Sans SC': ['400', '700'], 'ZCOOL KuaiLe': ['400'], // Chinese
  'Playpen Sans Arabic': ['400', '700'], Lalezar: ['400'], // Arabic
};

// #region art: the panel manifest: safe areas, speakers' mouths, heads and faces, in fractions
const box = ([x, y, width, height]) => ({ x, y, width, height });
const who = (id, x, y, head, face) => ({ id, x, y,
  ...(head && { head: { x: head[0], y: head[1] } }), ...(face && { face: box(face) }) });
const ART = {
  'lh-arrive': { width: 1100, height: 733, safeArea: box([.22, .08, .4, .64]),
    alt: t({ en: 'A girl in a yellow raincoat walks up a coastal path towards a red-and-white '
        + 'lighthouse, a fat orange cat trotting ahead; storm clouds gather over the sea.',
      es: 'Una niña con chubasquero amarillo sube por un camino de costa hacia un faro '
        + 'rojo y blanco, con un gato naranja gordo trotando delante; sobre el mar se '
        + 'acumulan nubes de tormenta.',
      zh: '一个穿黄色雨衣的女孩沿着海边小路走向红白相间的灯塔，一只胖橘猫小跑在前面；海上聚起了暴风雨的乌云。',
      ar: 'فتاة بمعطف مطر أصفر تصعد دربًا ساحليًا نحو منارة حمراء وبيضاء، وأمامها قط '
        + 'برتقالي سمين يهرول، والغيوم تتجمّع فوق البحر.',
      ja: '黄色いレインコートの女の子が、赤と白の灯台へ続く海辺の小道をのぼっていく。前を太ったオレンジ色の猫が小走りし、海の上には嵐の雲が集まっている。' }),
    anchors: [
      who('maya', .29, .52, [.27, .47], [.22, .42, .12, .16]),
      who('biscuit', .4, .68, [.4, .66], [.37, .64, .07, .08]),
    ],
    avoid: [box([.51, .09, .1, .43])],
  },
  'lh-radio': { width: 1000, height: 1000, safeArea: box([.11, .36, .36, .31]),
    alt: t({ en: 'The old keeper, white-bearded in a navy sweater and cap, taps a valve radio '
        + 'in the lamp room, microphone in hand; the great lens glows beside him.',
      es: 'El viejo farero, de barba blanca, jersey azul marino y gorra, golpea una radio '
        + 'de válvulas en la sala de la lámpara con el micrófono en la mano; a su lado '
        + 'brilla la gran lente.',
      zh: '白胡子的老守塔人穿着藏青色毛衣、戴着帽子，在灯室里手握话筒敲着一台电子管收音机；巨大的透镜在他身旁发光。',
      ar: 'حارس المنارة العجوز بلحيته البيضاء وكنزته الكحلية وقبعته ينقر على مذياع قديم '
        + 'في غرفة الفانوس والميكروفون في يده، والعدسة الكبيرة تتوهّج بجانبه.',
      ja: '白いひげの老灯台守が、紺のセーターに帽子姿で、灯室でマイクを握って真空管ラジオをたたいている。そばで大きなレンズが光っている。' }),
    anchors: [
      who('tomas', .345, .52, [.38, .44], [.29, .4, .16, .18]),
    ],
    avoid: [box([0, .44, .22, .26])],
  },
  'lh-maya': { width: 1100, height: 1100, safeArea: box([.25, .27, .41, .68]),
    alt: t({ en: 'Close-up of Maya frowning at the floor and pointing down.',
      es: 'Primer plano de Maya, que frunce el ceño mirando al suelo y señala hacia abajo.',
      zh: '玛雅的特写：她皱着眉头看着地板，手指向下指。',
      ar: 'لقطة قريبة لمايا وهي تعقد حاجبيها ناظرةً إلى الأرض وتشير إلى أسفل.',
      ja: 'マヤのアップ。眉をひそめて床を見つめ、下を指さしている。' }),
    anchors: [
      who('maya', .54, .565, [.5, .3], [.4, .33, .24, .29]),
    ],
    avoid: [box([.27, .73, .25, .22])],
  },
  'lh-biscuit': { width: 1000, height: 1000, safeArea: box([.58, .25, .42, .33]),
    alt: t({ en: 'Under the desk, the fat orange cat sleeps on his back on top of the black '
        + 'radio cable, squashing it flat.',
      es: 'Bajo la mesa, el gato naranja gordo duerme panza arriba encima del cable negro '
        + 'de la radio y lo aplasta.',
      zh: '桌子底下，胖橘猫四脚朝天地睡在收音机的黑色电线上，把电线压得扁扁的。',
      ar: 'تحت المكتب ينام القط البرتقالي السمين على ظهره فوق سلك المذياع الأسود ويسحقه.',
      ja: '机の下で、太ったオレンジ色の猫がラジオの黒いコードの上にあおむけで眠り、コードをぺしゃんこにしている。' }),
    anchors: [
      who('biscuit', .72, .355, [.73, .32], [.64, .27, .2, .18]),
    ],
    avoid: [box([.93, .28, .07, .24]), box([0, .72, .4, .1])],
  },
  'lh-beam': { width: 1200, height: 800, safeArea: box([.15, .01, .25, .3]),
    alt: t({ en: 'Night: the lighthouse beam sweeps over a dark sea; Maya and her grandfather '
        + 'stand on the lantern gallery, and far out a fishing boat shows its lights.',
      es: 'De noche, el haz del faro barre un mar oscuro; Maya y su abuelo están en la '
        + 'galería de la linterna y a lo lejos se ven las luces de un pesquero.',
      zh: '夜里，灯塔的光束扫过漆黑的海面；玛雅和外公站在灯室外的回廊上，远处一艘渔船亮着灯。',
      ar: 'ليلًا يمسح شعاع المنارة بحرًا مظلمًا، ومايا وجدّها واقفان على شرفة الفانوس، '
        + 'وفي البعيد قارب صيد بأضوائه.',
      ja: '夜。灯台の光の帯が暗い海をなでる。マヤと祖父は灯室の回廊に立ち、沖には漁船の明かりが見える。' }),
    anchors: [
      who('maya', .235, .15, null, [.21, .11, .05, .07]),
      who('tomas', .3, .145, null, [.28, .11, .04, .06]),
    ],
    avoid: [box([.79, .55, .08, .09])],
  },

};
// #endregion

// ─── 4 · Build & show ───────────────────────────────────────────────────────
const text = markdown + french + Object.values(NAMES).join(' ');
const faces = Object.fromEntries([LOCALE, 'fr'].flatMap((l) => [defaultComicFont(l),
  defaultComicSfxFont(l)]).map((family) => [family, FONTS[family]]));
await loadFonts(FONTS, text); // the Latin files of every face
await loadCjkFonts(faces, markdown + NAMES[LANG]);
await loadArabicFonts(faces, markdown + NAMES[LANG]);
await loadComicFonts(faces, text);
const resources = await Promise.all([
  comicPanel('lh-arrive', asset('lh-arrive.jpg'), ART['lh-arrive']),
  comicPanel('lh-radio', asset('lh-radio.jpg'), ART['lh-radio']),
  comicPanel('lh-maya', asset('lh-maya.jpg'), ART['lh-maya']),
  comicPanel('lh-biscuit', asset('lh-biscuit.jpg'), ART['lh-biscuit']),
  comicPanel('lh-beam', asset('lh-beam.jpg'), ART['lh-beam']),
]);
// #region editions: the edition's page, then the French one from the same config and art
const build = (md, cfg) =>
  buildWithFonts(() => buildDocument({ markdown: md, resources }, cfg), md);
const docs = [await build(markdown, config())];
// French is not a site language, so every edition carries its page: the same config
// with another locale, as a new object (the engine caches resolved configs by identity).
docs.push(await build(french, { ...config(), locale: 'fr', footer: footerFor('fr', 'fr') }));
// #endregion
showBook(docs, { title: t({ en: 'One page in six languages', es: 'Una página en seis idiomas',
  ja: '六つの言語で写植した一ページ', zh: '用六种语言嵌字的一页漫画', ar: 'صفحة واحدة بست لغات' }) });
offerPdf(() => renderToPdf(docs[0], { fontProvider: comicPdfProvider, resourceBytes: imageBytes }),
  `${RECIPE}-${LANG}.pdf`);

// ─── Kit ── helpers shared by every Cookbook recipe · postext.dev/cookbook ─────

// ─── Kit · core v1 ── the same in every recipe · postext.dev/cookbook
function mm(value) { return { value, unit: 'mm' }; }
function pt(value) { return { value, unit: 'pt' }; }
function em(value) { return { value, unit: 'em' }; }
/** The sample language's string: t({ en: 'Figure', es: 'Figura' }). */
function t(strings) { return strings[LANG] ?? Object.values(strings)[0]; }
/** A file in this recipe's assets folder, served from the Postext repo by jsDelivr. */
function asset(file) { return `https://cdn.jsdelivr.net/gh/drnachio/postext@main/cookbook/${RECIPE}/assets/${file}`; }

// ─── Kit · fonts v2 ── the same in every recipe · postext.dev/cookbook
// Postext measures with the loaded faces and caches the widths: load every face
// before the first build, from Fontsource, the files the PDF embeds too.

/** faces = { 'Family Name': ['400', '400i', '700'] }. `text` is the sample:
 *  č ł † α χ also load latin-ext and greek files (kitSubsetsFor). With
 *  `optional`, a face Fontsource does not ship is skipped instead of failing.
 *  Resolves to the number of faces added. */
async function loadFonts(faces, text = '', { optional = false } = {}) {
  kitStatus('Loading fonts…');
  const ranges = {
    latin: 'U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,'
      + 'U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD',
    'latin-ext': 'U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,'
      + 'U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF',
    greek: 'U+0370-03FF',
  };
  const jobs = [];
  let added = 0;
  for (const [family, specs] of Object.entries(faces)) {
    const id = fontsourceId(family);
    const todo = [...new Set(specs)].map((spec) => [parseInt(spec, 10), spec.endsWith('i') ? 'italic' : 'normal'])
      .filter(([weight, style]) => !hasFace(family, weight, style)); // before any await
    const meta = optional || /[^\0-ÿ]/u.test(text) ? await fontsourceMeta(family) : null;
    const subsets = ['latin', ...kitSubsetsFor(text, meta)];
    for (const [weight, style] of todo) {
      if (optional && !(meta?.weights.includes(weight) && meta.styles.includes(style))) continue;
      for (const subset of subsets) {
        const url = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-${subset}-${weight}-${style}.woff2`;
        const face = new FontFace(family, `url(${url}) format('woff2')`,
          { weight: String(weight), style, unicodeRange: ranges[subset] });
        jobs.push(face.load().then((ready) => { document.fonts.add(ready); added++; }, () => {
          if (subset === 'latin' && !optional) throw new Error(`Fontsource has no ${family} ${weight} ${style}`);
        }));
      }
    }
  }
  await Promise.all(jobs).catch((error) => { kitFail(error); throw error; });
  return added;
}

/** Runs `build` and loads any face the pages use that FONTS missed (a regular
 *  one with a warning), then clears the measurement cache and builds again. */
async function buildWithFonts(build, text = '') {
  const tried = new Set();
  for (let round = 0; round < 3; round++) {
    kitStatus('Laying out…');
    await new Promise(requestAnimationFrame);          // let the status paint first
    const result = await Promise.resolve().then(build).catch((error) => { kitFail(error); throw error; });
    const wanted = { base: {}, variants: {} };
    for (const { font, base } of [result].flat().flatMap(fontStringsOf)) {
      const { family, weight, style } = parseFont(font);
      const key = `${family}|${weight}|${style}`;
      if (tried.has(key) || hasFace(family, weight, style)) continue;
      tried.add(key);
      (wanted[base ? 'base' : 'variants'][family] ??= []).push(`${weight}${style === 'italic' ? 'i' : ''}`);
    }
    if (Object.keys(wanted.base).length) {
      console.warn(`[cookbook] FONTS does not list ${JSON.stringify(wanted.base)}: loading them.`);
    }
    const added = await loadFonts(wanted.base, text) + await loadFonts(wanted.variants, text, { optional: true });
    if (added === 0) return result;
    clearMeasurementCache();
  }
  throw new Error('The fonts did not settle after three builds.');
}

/** Every font string of the layout; `base` marks a block's own face. */
function fontStringsOf(doc) {
  const found = new Map();
  const walk = (node) => {
    if (!node || typeof node !== 'object') return;
    if (Array.isArray(node)) { node.forEach(walk); return; }
    for (const [key, value] of Object.entries(node)) {
      if (typeof value === 'string' && /fontString$/i.test(key)) {
        found.set(value, found.get(value) || key === 'fontString');
      } else if (value && typeof value === 'object') walk(value);
    }
  };
  walk(doc.pages);
  walk(doc.blocks);
  return [...found].map(([font, base]) => ({ font, base }));
}

/** '700 37.5px Open Sans' / 'italic 400 13px "Source Serif 4"' → { family, weight, style }.
 *  A string with no weight ('95.8px Young Serif', from a design text) is 400. */
function parseFont(font) {
  const m = /^(?:(italic|oblique)\s+)?(?:small-caps\s+)?(?:(\d+|bold|normal)\s+)?[\d.]+px\s+(.+)$/.exec(font.trim());
  if (!m) throw new Error(`Unexpected font string: ${font}`);
  const weight = m[2] === 'bold' ? 700 : !m[2] || m[2] === 'normal' ? 400 : Number(m[2]);
  return { family: m[3].replace(/^["']|["']$/g, ''), weight, style: m[1] ? 'italic' : 'normal' };
}

/** A loaded FontFace covers this family, weight and style (fonts.check() would
 *  also say yes for families nobody declared). */
function hasFace(family, weight, style) {
  for (const face of document.fonts) {
    if (face.status !== 'loaded' || face.style !== style) continue;
    if (face.family.replace(/^["']|["']$/g, '') !== family) continue;
    const [low, high = low] = face.weight.split(' ').map(Number);
    if (weight >= low && weight <= high) return true;
  }
  return false;
}

/** The files beyond latin `text` needs that `meta`'s family ships. */
function kitSubsetsFor(text, meta) {
  return [[/[Ā-˿ᴀ-ᶿḀ-ỿ†ℓⱠ-Ɀ꜠-ꟿ]/u, 'latin-ext'], [/[Ͱ-Ͽ]/u, 'greek']]
    .filter(([re, x]) => re.test(text) && meta?.subsets?.includes(x)).map(([, x]) => x);
}

/** Fontsource's id for a family: 'Source Serif 4' → 'source-serif-4'. */
function fontsourceId(family) { return family.toLowerCase().replace(/\s+/g, '-'); }

/** The family's Fontsource metadata (weights, styles, subsets), or null. */
function fontsourceMeta(family) {
  fontsourceMeta.cache ??= new Map();
  const id = fontsourceId(family);
  if (!fontsourceMeta.cache.has(id)) {
    fontsourceMeta.cache.set(id, fetch(`https://api.fontsource.org/v1/fonts/${id}`)
      .then((res) => (res.ok ? res.json() : null), () => null));
  }
  return fontsourceMeta.cache.get(id);
}

// ─── Kit · viewer v1 ── the same in every recipe · postext.dev/cookbook
/** The pages as spreads on a dark desk, page 1 alone, then verso | recto,
 *  each painted when it scrolls near. */
function showPages(docs, { title, width = 460 } = {}) {
  const root = viewer(title);
  const pages = [docs].flat().flatMap((doc) =>
    doc.pages.map((page) => ({ doc, page, n: (doc.pageIndexOffset ?? 0) + page.index })));
  const spreads = [];
  let verso = null;
  for (const p of pages) {
    if (p.n % 2 === 1) { if (verso) spreads.push([verso, null]); verso = p; }
    else { spreads.push([verso, p]); verso = null; }
  }
  if (verso) spreads.push([verso, null]);
  const density = Math.min(window.devicePixelRatio || 1, 2);
  showPages.painter?.disconnect();
  const painter = new IntersectionObserver((entries) => {
    for (const { isIntersecting, target } of entries) {
      if (!isIntersecting) continue;
      painter.unobserve(target);
      const { doc, page } = target.postext;
      renderPageToCanvas(page, doc, target, { scale: (width * density) / page.width });
    }
  }, { rootMargin: '800px' });
  showPages.painter = painter;
  root.replaceChildren(...spreads.map((pair) => {
    const spread = document.createElement('div');
    spread.className = 'pt-spread';
    for (const p of pair) {
      const figure = document.createElement('figure');
      if (p) {
        const label = p.page.pageLabel || String(p.n + 1);
        const canvas = document.createElement('canvas');
        canvas.postext = p;
        canvas.style.aspectRatio = `${p.page.width} / ${p.page.height}`;
        canvas.setAttribute('role', 'img');
        canvas.setAttribute('aria-label', `Page ${label}`);
        const folio = document.createElement('figcaption');
        folio.textContent = label;
        figure.append(canvas, folio);
        painter.observe(canvas);
      } else figure.className = 'pt-blank';
      spread.append(figure);
    }
    return spread;
  }));
  kitStatus(`${pages.length} ${pages.length === 1 ? 'page' : 'pages'}`);
  document.documentElement.dataset.postext = 'ready';
  return pages.length;
}

/** The desk, the bar and the error reporting, created once. */
function viewer(title) {
  if (!document.getElementById('pt-kit')) {
    document.head.insertAdjacentHTML('beforeend', `<style id="pt-kit">
      :root { color-scheme: dark; }
      body { margin: 0; background: #0e1014; color: #b9bcc4; font: 13px/1.45 system-ui, sans-serif; }
      #pt-bar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center;
        gap: 6px 16px; padding: 10px 16px; background: rgb(14 16 20 / .92); backdrop-filter: blur(6px);
        border-bottom: 1px solid #23262d; }
      #pt-bar strong { color: #f4f1ea; font-weight: 600; }
      #pt-actions { display: flex; gap: 12px; margin-left: auto; }
      #pt-actions a, #pt-actions button { color: #d8a21a; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
      #pages { display: grid; justify-items: center; gap: 48px; padding: 32px 16px 72px; }
      .pt-spread { display: flex; }
      .pt-spread figure { margin: 0; width: min(460px, 44vw); }
      .pt-spread canvas { display: block; width: 100%; background: #fff;
        box-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 22px 44px -16px rgb(0 0 0 / .8); }
      .pt-spread figure:first-child canvas { box-shadow: inset -14px 0 14px -14px rgb(0 0 0 / .18), 0 1px 2px rgb(0 0 0 / .5), 0 22px 44px -16px rgb(0 0 0 / .8); }
      .pt-spread figcaption { margin-top: 10px; text-align: center; font: 600 10px/1 system-ui, sans-serif;
        letter-spacing: .18em; text-transform: uppercase; color: #6c7079; }
      .pt-blank { visibility: hidden; }
      @media (max-width: 760px) {
        .pt-spread { flex-direction: column; gap: 32px; }
        .pt-spread figure { width: min(460px, 92vw); }
        .pt-blank { display: none; }
      }
    </style>`);
    document.body.insertAdjacentHTML('afterbegin',
      '<header id="pt-bar"><strong id="pt-title"></strong><span id="pt-status" role="status"></span><span id="pt-actions"></span></header>');
    document.getElementById('pt-title').textContent = document.title || 'Postext';
    addEventListener('error', (event) => kitFail(event.error ?? event.message));
    addEventListener('unhandledrejection', (event) => kitFail(event.reason));
  }
  if (title) document.getElementById('pt-title').textContent = title;
  return document.getElementById('pages')
    ?? document.body.appendChild(Object.assign(document.createElement('main'), { id: 'pages' }));
}

function kitStatus(text) {
  viewer();
  document.getElementById('pt-status').textContent = text;
}

function kitFail(error) {
  document.documentElement.dataset.postext = 'error';
  kitStatus(`Error: ${error?.message ?? error}`);
}

// ─── Kit · pdf v2 ── the same in every recipe that exports a PDF
/** The Fontsource files the screen used, as TrueType: the nearest weight the
 *  family ships, upright if it has no italic; latin, then what the face's
 *  letters need (kitSubsetsFor). */
async function fontsourceProvider(family, weight, style, request) {
  const id = fontsourceId(family);
  const meta = await fontsourceMeta(family);
  const weights = meta?.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && meta && !meta.styles.includes('italic') ? 'normal' : style;
  const text = String.fromCodePoint(...(request?.codePoints ?? []));
  const more = kitSubsetsFor(text, meta);
  const files = await Promise.all(['latin', ...more].map(async (subset) => {
    const res = await fetch(`https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-${subset}-${w}-${s}.woff2`);
    if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} ${subset}`);
    return decompressWoff2(new Uint8Array(await res.arrayBuffer()));
  }));
  return files.length === 1 ? files[0] : files;
}

/** A "Build the PDF" button; then "Open the PDF" (a new tab: CodePen's frame
 *  shows no PDFs) and a download link. */
function offerPdf(makePdf, filename) {
  viewer();
  const button = Object.assign(document.createElement('button'), { type: 'button', textContent: 'Build the PDF' });
  button.dataset.postextPdf = filename;
  button.addEventListener('click', async () => {
    button.disabled = true;
    button.textContent = 'Building the PDF…';
    try {
      const bytes = await makePdf();
      const url = URL.createObjectURL(new Blob([bytes], { type: 'application/pdf' }));
      const size = `${Math.max(1, Math.round(bytes.length / 1024))} KB`;
      button.replaceWith(
        Object.assign(document.createElement('a'), { href: url, target: '_blank', rel: 'noopener', textContent: 'Open the PDF ↗' }),
        Object.assign(document.createElement('a'), { href: url, download: filename, textContent: `Download ${filename} · ${size}` }));
    } catch (error) {
      button.disabled = false;
      button.textContent = 'Build the PDF';
      kitFail(error);
    }
  });
  document.getElementById('pt-actions').append(button);
}

// ─── Kit · images v1 ── recipes with pictures · postext.dev/cookbook
/** Registers a photo or PNG for the canvas and keeps its bytes for the PDF.
 *  fetch → ImageBitmap never taints the canvas (a plain cross-origin <img> would). */
async function loadImage(fileId, url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Image not found (${res.status}): ${url}`);
  const bytes = new Uint8Array(await res.arrayBuffer());
  registerResourceImage(fileId, await createImageBitmap(new Blob([bytes])));
  (loadImage.bytes ??= new Map()).set(fileId, bytes);
}

/** Registers SVG markup (drawn in code, or fetched) as a vector image. */
async function loadSvg(fileId, svg) {
  const img = new Image();
  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
  await img.decode();
  registerResourceImage(fileId, img);
  (loadImage.bytes ??= new Map()).set(fileId, new TextEncoder().encode(svg));
}

/** renderToPdf({ resourceBytes: imageBytes }) */
function imageBytes(fileId) { return loadImage.bytes?.get(fileId); }

/** renderToHtml({ resourceImageUrl: imageUrl }) */
function imageUrl(fileId) {
  const bytes = imageBytes(fileId);
  if (!bytes) return undefined;
  imageUrl.urls ??= new Map();
  if (!imageUrl.urls.has(fileId)) {
    const type = /\.svg$/i.test(fileId) ? 'image/svg+xml' : /\.png$/i.test(fileId) ? 'image/png' : 'image/jpeg';
    imageUrl.urls.set(fileId, URL.createObjectURL(new Blob([bytes], { type })));
  }
  return imageUrl.urls.get(fileId);
}

// ─── Kit · cjk v1 ── Chinese, Japanese and Korean books · postext.dev/cookbook
// Fontsource ships a CJK family as about a hundred files per weight, each
// declared in its stylesheet with the unicode-range it covers. The screen
// loads the files the sample touches; the PDF gets the same files for the
// characters its pages set in each face, and embeds each as a subset.
// A book bound on the right (vertical text) is shown with its spreads
// mirrored: page 1 alone on the left of the spine, then [3 | 2].

/** The files of a Fontsource face, read from its stylesheet: { url, range,
 *  ranges }, the last declared first (the order the browser tries them in). */
function cjkSlices(family, weight, style) {
  cjkSlices.cache ??= new Map();
  const id = fontsourceId(family);
  const css = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/${weight}${style === 'italic' ? '-italic' : ''}.css`;
  if (!cjkSlices.cache.has(css)) {
    cjkSlices.cache.set(css, fetch(css)
      .then((res) => {
        if (!res.ok) throw new Error(`Fontsource has no ${family} ${weight} ${style} (${res.status})`);
        return res.text();
      })
      .then((text) => [...text.matchAll(/@font-face\s*{([^}]*)}/g)].map(([, rule]) => {
        const range = /unicode-range:\s*([^;]+);/.exec(rule)?.[1].trim() ?? 'U+0-10FFFF';
        const ranges = range.split(',').map((part) => {
          const [lo, hi = lo] = part.trim().slice(2).split('-');
          return [parseInt(lo, 16), parseInt(hi, 16)];
        });
        return { url: new URL(/url\(([^)]+?\.woff2)\)/.exec(rule)[1], css).href, range, ranges };
      }).reverse()));
  }
  return cjkSlices.cache.get(css);
}

/** The file of `slices` that holds code point `cp`, if any. */
function cjkSliceFor(slices, cp) {
  return slices.find((slice) => slice.ranges.some(([lo, hi]) => cp >= lo && cp <= hi));
}

/** Whether Fontsource serves `family` as a Chinese, Japanese or Korean
 *  family (its subsets name the script). Fails when the API does not
 *  answer: a CJK face taken for a Latin one would paint in a system face. */
async function isCjkFamily(family) {
  const meta = await fontsourceMeta(family);
  if (!meta) throw new Error(`api.fontsource.org did not describe ${family}: reload to try again`);
  return !!meta.subsets?.some((subset) => /^(chinese|japanese|korean)/.test(subset));
}

/** faces = { 'Noto Serif TC': ['400', '700'] }, as for loadFonts: the
 *  whole FONTS object may be passed, its other families are left to
 *  loadFonts. Adds one FontFace per file of each CJK face with its
 *  unicodeRange, then loads the files `text` touches. `text` is what the
 *  faces set: the sample for the text face; a book in several voices calls
 *  it once per voice (loadCjkFonts({ 'LXGW WenKai TC': ['400'] }, quotes)),
 *  so the heading and quotation faces fetch and check only their own
 *  characters. Fails when a character of `text` is in no file of a face.
 *  List every weight the pages use: a weight left to buildWithFonts gets
 *  the latin file only. With { vertical: true } it also loads each
 *  family's vertical forms (brackets, quotes, pause marks) for the canvas,
 *  which needs loadVerticalAlternates imported from postext. Resolves to
 *  the number of files loaded. */
async function loadCjkFonts(faces, text, { vertical = false } = {}) {
  kitStatus('Loading fonts…');
  let loaded = 0;
  try {
    if (vertical && typeof loadVerticalAlternates !== 'function') {
      throw new Error('loadCjkFonts(…, { vertical: true }) needs loadVerticalAlternates imported from postext');
    }
    for (const [family, specs] of Object.entries(faces)) {
      if (!(await isCjkFamily(family))) continue;
      const twin = [];
      for (const spec of new Set(specs)) {
        const weight = parseInt(spec, 10);
        const style = spec.endsWith('i') ? 'italic' : 'normal';
        const slices = await cjkSlices(family, weight, style);
        const missing = [...new Set(text)].filter((ch) => /\S/.test(ch) && !cjkSliceFor(slices, ch.codePointAt(0)));
        if (missing.length) {
          throw new Error(`${family} ${spec} has no file for ${missing.slice(0, 12).join(' ')}: `
            + `give each face the text it sets (loadCjkFonts({ '${family}': ['${spec}'] }, text))`);
        }
        for (const slice of slices) {
          document.fonts.add(new FontFace(family, `url(${slice.url}) format('woff2')`,
            { weight: String(weight), style, unicodeRange: slice.range }));
          twin.push({ source: slice.url, weight: String(weight), style, unicodeRange: slice.range });
        }
        const font = `${style === 'italic' ? 'italic ' : ''}${weight} 16px "${family}"`;
        loaded += (await document.fonts.load(font, text)).length;
        if (!document.fonts.check(font, text)) throw new Error(`${family} ${spec} did not load for the sample`);
      }
      // The same files under a twin name with the `vert` feature on: the
      // canvas paints the punctuation of vertical lines with it.
      if (vertical && twin.length) await loadVerticalAlternates(family, twin);
    }
  } catch (error) {
    kitFail(error);
    throw error;
  }
  return loaded;
}

/** The PDF font provider for recipes with CJK faces: a family whose
 *  Fontsource subsets are Chinese, Japanese or Korean gets the files that
 *  hold the characters its pages set (`request.codePoints`); any other
 *  family gets the latin file fontsourceProvider fetches (the "pdf" block)
 *  and, when the face sets letters only latin-ext has, that file too. */
async function cjkPdfProvider(family, weight, style, request) {
  if (!(await isCjkFamily(family))) return cjkLatinPdfFiles(family, weight, style, request);
  const meta = await fontsourceMeta(family);
  const weights = meta.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && !meta.styles.includes('italic') ? 'normal' : style;
  const slices = await cjkSlices(family, w, s);
  const picked = new Set();
  for (const cp of request?.codePoints ?? []) {
    const slice = cjkSliceFor(slices, cp);
    if (slice) picked.add(slice);
  }
  if (!picked.size) picked.add(slices[0]);
  return Promise.all(slices.filter((slice) => picked.has(slice)).map(async (slice) => {
    const res = await fetch(slice.url);
    if (!res.ok) throw new Error(`Fontsource file ${slice.url} (${res.status})`);
    return decompressWoff2(new Uint8Array(await res.arrayBuffer()));
  }));
}

/** A Latin family set next to the CJK faces: its latin file, then its
 *  latin-ext file when the face sets letters only latin-ext has (ō ū in
 *  Hepburn rōmaji, ǎ in pinyin), the file loadFonts adds on screen for
 *  them. Latin comes first: postext-pdf draws a character from the first
 *  file that has it, as the browser takes a character both files hold from
 *  latin. A face Fontsource ships without latin-ext, or whose file does
 *  not come, gets latin alone, and the PDF names the letters it lacks. */
async function cjkLatinPdfFiles(family, weight, style, request) {
  const meta = await fontsourceMeta(family);
  const beyond = [...(request?.codePoints ?? [])].some(cjkLatinExtOnly);
  if (!beyond || !meta?.subsets?.includes('latin-ext')) return fontsourceProvider(family, weight, style);
  const weights = meta.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && !meta.styles.includes('italic') ? 'normal' : style;
  const id = fontsourceId(family);
  const url = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-latin-ext-${w}-${s}.woff2`;
  const [latin, ext] = await Promise.all([fontsourceProvider(family, weight, style), fetch(url)
    .then(async (res) => (res.ok ? decompressWoff2(new Uint8Array(await res.arrayBuffer())) : null), () => null)]);
  return ext ? [latin, ext] : latin;
}

/** Whether code point `cp` is in Fontsource's latin-ext file and not in
 *  its latin file: Latin Extended-A and -B, IPA, the spacing modifiers and
 *  Latin Extended Additional (loadFonts's test for latin-ext), less the
 *  few latin holds too (ı Œ œ ʻ ʼ ˆ ˚ ˜). */
function cjkLatinExtOnly(cp) {
  if (!((cp >= 0x100 && cp <= 0x2ff) || (cp >= 0x1e00 && cp <= 0x1eff))) return false;
  return ![0x131, 0x152, 0x153, 0x2bb, 0x2bc, 0x2c6, 0x2da, 0x2dc].includes(cp);
}

/** showPages for a book bound on either edge. A right-bound book (the
 *  document says so: doc.binding is 'right' for page.binding 'right' and
 *  for vertical text) lies on the desk as it opens: page 1 alone on the
 *  left of the spine, then [3 | 2], the spine shade on each page's inner
 *  edge. `binding` ('left' | 'right') overrides the document's. */
function showBook(docs, { binding, ...options } = {}) {
  const count = showPages(docs, options);
  const right = (binding ?? [docs].flat()[0]?.binding) === 'right';
  if (!document.getElementById('pt-kit-cjk')) {
    // The pages keep direction ltr: a canvas draws text in the direction its
    // element inherits, and under rtl each run would end where the engine
    // starts it, its brackets mirrored.
    document.head.insertAdjacentHTML('beforeend', `<style id="pt-kit-cjk">
      .pt-spread[dir="rtl"] canvas { direction: ltr; }
      .pt-spread[dir="rtl"] figure:first-child canvas { box-shadow: inset 14px 0 14px -14px rgb(0 0 0 / .18),
        0 1px 2px rgb(0 0 0 / .5), 0 22px 44px -16px rgb(0 0 0 / .8); }
    </style>`);
  }
  // Each pair stays [verso, recto] in the page; right to left, the verso
  // sits on the right. Phones stack the pages in reading order either way.
  for (const spread of document.querySelectorAll('#pages > .pt-spread')) spread.dir = right ? 'rtl' : 'ltr';
  document.getElementById('pages').dataset.binding = right ? 'right' : 'left';
  return count;
}

// ─── Kit · arabic v1 ── Arabic-script faces · postext.dev/cookbook
// Fontsource ships an Arabic family as one file per subset and weight: the
// `arabic` file holds the letters, the harakat, the Arabic-Indic digits, the
// Arabic punctuation and the presentation forms; `latin` and `latin-ext`
// hold the rest. loadFonts loads the latin files; this block adds the arabic
// file of every Arabic family, for the canvas and for the PDF, which shapes
// the letters with HarfBuzz from the same bytes.

/** The code points of Fontsource's `arabic` subset, as its stylesheets
 *  declare them (the same unicode-range the browser picks the file by). A
 *  function, not a const: the kit is inlined after the recipe's top-level
 *  awaits, and a const read before its line throws, where a function
 *  declaration is hoisted. */
function arabicRange() {
  return 'U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,'
    + 'U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,'
    + 'U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF';
}

/** Whether code point `cp` is in the arabic file. */
function inArabicRange(cp) {
  inArabicRange.ranges ??= arabicRange().split(',').map((part) => {
    const [lo, hi = lo] = part.slice(2).split('-');
    return [parseInt(lo, 16), parseInt(hi, 16)];
  });
  return inArabicRange.ranges.some(([lo, hi]) => cp >= lo && cp <= hi);
}

/** Whether Fontsource serves `family` with an `arabic` subset. Fails when
 *  the API does not answer: an Arabic face taken for a Latin one would set
 *  its letters in a system face. */
async function isArabicFamily(family) {
  const meta = await fontsourceMeta(family);
  if (!meta) throw new Error(`api.fontsource.org did not describe ${family}: reload to try again`);
  return !!meta.subsets?.includes('arabic');
}

/** The arabic file of a face. */
function arabicFileUrl(family, weight, style) {
  const id = fontsourceId(family);
  return `https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-arabic-${weight}-${style}.woff2`;
}

/** faces = { Amiri: ['400', '700'] }, as for loadFonts, after it: the whole
 *  FONTS object may be passed, its families without an arabic subset are
 *  left alone. Adds the arabic file of every listed weight of each Arabic
 *  family (the latin files come from loadFonts) and loads it. `text` is
 *  the sample: fails when it holds an Arabic-script character the arabic
 *  file does not cover. List every weight the pages set in Arabic: a weight
 *  left to buildWithFonts gets the latin file only, and its Arabic letters
 *  fall back to a system face. Resolves to the number of files loaded. */
async function loadArabicFonts(faces, text = '') {
  kitStatus('Loading fonts…');
  let loaded = 0;
  try {
    const outside = [...new Set(text)].filter((ch) => /\p{Script=Arabic}/u.test(ch) && !inArabicRange(ch.codePointAt(0)));
    if (outside.length) throw new Error(`Fontsource's arabic files have no ${outside.slice(0, 12).join(' ')}`);
    for (const [family, specs] of Object.entries(faces)) {
      if (!(await isArabicFamily(family))) continue;
      for (const spec of new Set(specs)) {
        const weight = parseInt(spec, 10);
        const style = spec.endsWith('i') ? 'italic' : 'normal';
        const face = new FontFace(family, `url(${arabicFileUrl(family, weight, style)}) format('woff2')`,
          { weight: String(weight), style, unicodeRange: arabicRange() });
        document.fonts.add(await face.load().catch(() => {
          throw new Error(`Fontsource has no arabic file for ${family} ${weight} ${style}`);
        }));
        loaded++;
      }
    }
  } catch (error) {
    kitFail(error);
    throw error;
  }
  return loaded;
}

/** The PDF font provider for recipes with Arabic faces: a family with an
 *  arabic subset gets its arabic file when its pages set Arabic letters
 *  (`request.codePoints`), then its latin file, and its latin-ext file for
 *  the letters beyond latin (transliteration: ā ḥ ʿ). The arabic file comes
 *  first: it also holds the space and the brackets, so a line of Arabic is
 *  shaped as one run and not cut at every space. Any other family goes to
 *  fontsourceProvider (the "pdf" block). */
async function arabicPdfProvider(family, weight, style, request) {
  if (!(await isArabicFamily(family))) return fontsourceProvider(family, weight, style, request);
  const meta = await fontsourceMeta(family);
  const weights = meta.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && !meta.styles.includes('italic') ? 'normal' : style;
  const wanted = [...(request?.codePoints ?? [])];
  const id = fontsourceId(family);
  const urls = [];
  if (!wanted.length || wanted.some(inArabicRange)) urls.push(arabicFileUrl(family, w, s));
  urls.push(`https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-latin-${w}-${s}.woff2`);
  if (meta.subsets.includes('latin-ext') && wanted.some((cp) => /[Ā-˿Ḁ-ỿ]/u.test(String.fromCodePoint(cp)))) {
    urls.push(`https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-latin-ext-${w}-${s}.woff2`);
  }
  return Promise.all(urls.map(async (url) => {
    const res = await fetch(url);
    if (!res.ok) throw new Error(`Fontsource file ${url} (${res.status})`);
    return decompressWoff2(new Uint8Array(await res.arrayBuffer()));
  }));
}

// ─── Kit · comics v1 ── comic pages · postext.dev/cookbook
// The engine letters a comic in a face per language (defaultComicFont:
// Comic Neue, Zen Antique for Japanese, Noto Sans SC, LXGW WenKai TC,
// Playpen Sans Arabic; defaultComicSfxFont: Bangers, Dela Gothic One,
// ZCOOL KuaiLe, Lalezar) and asks for the bold of a shout or a sound effect
// and the italic of an inner voice. Most of these faces ship one weight and
// no italic: this block declares the file Fontsource does ship for those
// variants, so the canvas measures and paints the letters the PDF embeds
// (the providers snap to the shipped file) and not a bold or a slant the
// browser makes up. It also turns the art manifest into panel resources.

/** faces = { 'Comic Neue': ['400', '700'], Bangers: ['400'] }, as for
 *  loadFonts, after it (and after loadCjkFonts or loadArabicFonts for the
 *  faces of those scripts); the whole FONTS object may be passed. List in
 *  FONTS only what Fontsource ships (Bangers: ['400']): loadFonts fails on
 *  the rest. For each family, the regular, bold, italic and bold italic it
 *  lacks are declared with its nearest file (the regular for the bold, the
 *  upright for the italic) and loaded for `text`. A CJK face needs the cjk
 *  block; an Arabic face setting Arabic, the arabic block. Resolves to the
 *  number of variants added. */
async function loadComicFonts(faces, text = '') {
  kitStatus('Loading fonts…');
  let added = 0;
  try {
    for (const family of Object.keys(faces)) {
      const meta = await fontsourceMeta(family);
      if (!meta) throw new Error(`api.fontsource.org did not describe ${family}: reload to try again`);
      const weights = meta.weights?.length ? meta.weights : [400, 700];
      const styles = meta.styles?.length ? meta.styles : ['normal'];
      for (const [weight, style] of [[400, 'normal'], [700, 'normal'], [400, 'italic'], [700, 'italic']]) {
        if ((weights.includes(weight) && styles.includes(style)) || hasFace(family, weight, style)) continue;
        const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
        const s = style === 'italic' && styles.includes('italic') ? 'italic' : 'normal';
        for (const { url, range } of await comicFaceFiles(family, w, s, meta, text)) {
          document.fonts.add(new FontFace(family, `url(${url}) format('woff2')`,
            { weight: String(weight), style, unicodeRange: range }));
        }
        await document.fonts.load(`${style === 'italic' ? 'italic ' : ''}${weight} 16px "${family}"`, text || 'A');
        added++;
      }
    }
  } catch (error) {
    kitFail(error);
    throw error;
  }
  return added;
}

/** The files of a shipped face ({ url, range }): a CJK face's slices (the
 *  cjk block reads them from its stylesheet), else latin, the latin-ext
 *  and greek files `text` needs, and the arabic file when `text` holds
 *  Arabic. */
async function comicFaceFiles(family, weight, style, meta, text) {
  if (meta.subsets?.some((subset) => /^(chinese|japanese|korean)/.test(subset))) {
    if (typeof cjkSlices !== 'function') throw new Error(`${family} is a CJK face: list the cjk kit block`);
    return (await cjkSlices(family, weight, style)).map(({ url, range }) => ({ url, range }));
  }
  const id = fontsourceId(family);
  const file = (subset) => `https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-${subset}-${weight}-${style}.woff2`;
  const files = ['latin', ...kitSubsetsFor(text, meta)].map((subset) => ({ url: file(subset), range: comicRange(subset) }));
  if (meta.subsets?.includes('arabic') && /\p{Script=Arabic}/u.test(text)) {
    if (typeof arabicRange !== 'function') throw new Error(`${family} sets Arabic: list the arabic kit block`);
    files.unshift({ url: file('arabic'), range: arabicRange() });
  }
  return files;
}

/** The unicode-range loadFonts gives a Fontsource file. A function, not a
 *  const: the kit is inlined after the recipe's top-level awaits. */
function comicRange(subset) {
  return {
    latin: 'U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,'
      + 'U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD',
    'latin-ext': 'U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,'
      + 'U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF',
    greek: 'U+0370-03FF',
  }[subset];
}

/** The PDF font provider of a comic in any script: a CJK face goes to
 *  cjkPdfProvider, an Arabic face to arabicPdfProvider, any other to
 *  fontsourceProvider (the "pdf" block). Each embeds the shipped weight
 *  and style nearest to the one asked for, the file loadComicFonts
 *  declared for the canvas. */
async function comicPdfProvider(family, weight, style, request) {
  const subsets = (await fontsourceMeta(family))?.subsets ?? [];
  if (subsets.some((subset) => /^(chinese|japanese|korean)/.test(subset))) {
    if (typeof cjkPdfProvider !== 'function') throw new Error(`${family} is a CJK face: list the cjk kit block`);
    return cjkPdfProvider(family, weight, style, request);
  }
  if (subsets.includes('arabic') && typeof arabicPdfProvider === 'function') {
    return arabicPdfProvider(family, weight, style, request);
  }
  return fontsourceProvider(family, weight, style, request);
}

/** A panel picture as a resource for art= (and pop=): loads `url`
 *  (write asset('lh-arrive.jpg') in the call, so the lint checks the file)
 *  and declares it with `meta`, its entry in the art manifest:
 *  { width, height, alt, safeArea, anchors, avoid }. The safe area is what
 *  every crop keeps, the anchors the speakers' mouths, heads and faces,
 *  the avoid zones what no balloon covers; all in fractions of the picture,
 *  the same in every language. Without width and height, the picture's own
 *  size. Needs the images block. Resolves to the resource. */
async function comicPanel(id, url, meta = {}) {
  const fileId = decodeURIComponent(url.split('/').pop());
  await loadImage(fileId, url);
  let { width, height } = meta;
  if (!width || !height) {
    const bitmap = await createImageBitmap(new Blob([imageBytes(fileId)]));
    ({ width, height } = bitmap);
    bitmap.close();
  }
  return {
    id, typeId: meta.typeId ?? 'figure', kind: 'bitmap', createdAt: 0, updatedAt: 0,
    bitmap: { fileId, format: /\.png$/i.test(fileId) ? 'png' : 'jpeg', width, height },
    ...(meta.alt && { altText: meta.alt }),
    ...(meta.safeArea && { safeArea: meta.safeArea }),
    ...(meta.anchors?.length && { anchors: meta.anchors }),
    ...(meta.avoid?.length && { avoid: meta.avoid }),
  };
}

// ─── /Kit ───────────────────────────────────────────────────────────────────────
```

## Variations

### Mirror the pictures for the right-to-left editions

`mirrorArt: true` flips every picture when the page reads the other way from the art's drawn direction. Leave a panel with lettering or a clock in it unflipped with `::panel{mirror=false}`.

```diff
   readingDirection: 'auto', // the default, written out: it is what an edition flips
+  mirrorArt: true,
```

## Pitfalls

- **Load every face before layout.** Layout measures text with the faces the browser has loaded and caches the widths, so a face that arrives after the first build leaves wrong line breaks and a PDF that no longer matches the screen. Load every weight and style first, and call clearMeasurementCache() before rebuilding when one arrives late.
- **A config is cached by identity: build a fresh object.** The engine caches resolved configs by object identity, so changing a config in place and building again reuses the old result. Build a fresh object for every build, which is why a recipe's config is a factory: config().

- A script line names a speaker by id, not by name: write `maya:` in every language. The name a screen reader announces is `cast[].name`.
- The French page shares the edition's pictures, so its panels' alt text is in the edition's language; give `::panel{alt="…"}` in `content.fr.en.md` for French alt text.

## Credits

- Recipe: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Text: The lighthouse radio, a one-page comic written for this recipe in English, Spanish, French, Japanese, Chinese and Arabic: Postext Cookbook, CC-BY-4.0
- Images: A girl in a yellow raincoat walks up a coastal path towards a red-and-white lighthouse, a fat orange cat trotting ahead; storm clouds gather over the sea.: Generated With Diffusion Models, original
- Images: The old keeper, white-bearded in a navy sweater and cap, taps a valve radio in the lamp room, microphone in hand; the great lens glows beside him.: Generated With Diffusion Models, original
- Images: Close-up of Maya frowning at the floor and pointing down.: Generated With Diffusion Models, original
- Images: Under the desk, the fat orange cat sleeps on his back on top of the black radio cable, squashing it flat.: Generated With Diffusion Models, original
- Images: Night: the lighthouse beam sweeps over a dark sea; Maya and her grandfather stand on the lantern gallery, and far out a fishing boat shows its lights.: Generated With Diffusion Models, original
- Type: Comic Neue (OFL-1.1), Bangers (OFL-1.1), Zen Antique (OFL-1.1), Dela Gothic One (OFL-1.1), Noto Sans SC (OFL-1.1), ZCOOL KuaiLe (OFL-1.1), Playpen Sans Arabic (OFL-1.1), Lalezar (OFL-1.1)
- Code: MIT · Sample content: CC-BY-4.0

## Related

- [Nº 149 · Manga read right to left, lettered vertically](https://postext.dev/en/cookbook/manga-right-to-left.md): Two manga pages drawn for right-to-left reading: artDirection rtl keeps the panel order in every edition, and the Japanese balloons are set in columns. · Level 2 (Intermediate) · Comics
- [Nº 151 · Two yonkoma strips on a page](https://postext.dev/en/cookbook/yonkoma.md): A page of four-panel gag strips: two columns of four panels, the right strip read first, each strip titled in a black box in its first panel. · Level 2 (Intermediate) · Comics
- [Nº 150 · An action page with slanted gutters](https://postext.dev/en/cookbook/manga-action-slants.md): The page that decides a kendo final: slanted gutters (40~55) in the split, a borderless strike panel, and ドン kept in Japanese under a small translation. · Level 2 (Intermediate) · Comics