# Eine Seite, in sechs Sprachen gelettert

> Eine Comicseite, Aufteilung und Bilder fest, je Sprache gelettert: Die Locale wählt die Schrift; Japanisch läuft senkrecht und liest wie Arabisch von rechts.

- HTML-Fassung: https://postext.dev/de/cookbook/one-page-six-languages
- Rezept Nº 153 · Comics und Manga · Stufe 3 (Fortgeschritten) · Ausgaben: Canvas, PDF
- Gattungen: Comics
- Benötigt postext ≥ 1.25.0, postext-pdf ≥ 1.25.0 · getestet mit 1.31.0, postext-pdf 1.31.0 am 2026-10-13
- Seiten: [1](https://postext.dev/cookbook/one-page-six-languages/en/p01.webp?v=308a3aec), [1](https://postext.dev/cookbook/one-page-six-languages/en/p02.webp?v=308a3aec)
- PDF: https://postext.dev/cookbook/one-page-six-languages/en/one-page-six-languages.pdf?v=308a3aec
- In der Sandbox öffnen: https://postext.dev/de/sandbox#recipe=one-page-six-languages&lang=en (.postext: https://postext.dev/cookbook/one-page-six-languages/en/one-page-six-languages.postext)
- Zuletzt aktualisiert: 2026-10-10
- Andere Sprachen: [en](https://postext.dev/en/cookbook/one-page-six-languages.md), [es](https://postext.dev/es/cookbook/one-page-six-languages.md), [ca](https://postext.dev/ca/cookbook/one-page-six-languages.md), [fr](https://postext.dev/fr/cookbook/one-page-six-languages.md), [it](https://postext.dev/it/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)

## Kurz gesagt

Dieselbe Comicseite auf Englisch, Spanisch, Französisch, Japanisch, Chinesisch und Arabisch: Nur die Wörter ändern sich, und Postext zeichnet jede Sprechblase um sie herum neu.

## Was Sie setzen

Eine Seite eines Comics, *The Lighthouse Radio*: Maya kommt beim Leuchtturm ihres Großvaters an, als ein Sturm aufzieht, das Funkgerät ist tot, und der Übeltäter ist Biscuit, der auf dem Kabel schläft. Die Aufteilung und die fünf Aquarellbilder stehen fest; was sich von einer Ausgabe zur nächsten ändert, ist ein Skript aus neun Zeilen. Jede Ausgabe dieses Rezepts setzt ihre eigene Sprache, und jede Ausgabe setzt außerdem die französische Seite daneben: Englisch und Französisch, Spanisch und Französisch und so weiter über Japanisch, Chinesisch und Arabisch. Die Engine zeichnet jede Sprechblase um die Wörter neu, die sie enthält. Japanisch wird in senkrechten Spalten in der Zen Antique gelettert. Die japanische und die arabische Seite lesen sich von rechts, deshalb tauschen die drei Panels der mittleren Reihe die Plätze.

**Dieses Rezept beantwortet:**

- Wie lettere ich einen Comic in einer anderen Sprache neu?
- Wie lettere ich Japanisch vertikal in Sprechblasen?

## Die kurze Antwort

```js
// script.js, Zeilen 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
};
```

## Zutaten

**Zeigt**

- [Neues Lettering in anderen Sprachen](https://postext.dev/de/docs/comics.md#lettering): Die Aufteilung, die Bilder, die Zuschnitte und die Sprecheranker gehören zur Seite; das Markdown jeder Sprache enthält nur die Wörter, und die Sprechblasen werden um den Text jeder Übersetzung neu aufgebaut.
- [Leserichtung und Manga-Reihenfolge](https://postext.dev/de/docs/comics.md#leserichtung): Panels füllen die Zellen in Lesereihenfolge: von links nach rechts oder, bei Manga und Sprachen, die von rechts nach links laufen, von rechts nach links; comics.artDirection und mirrorArt entscheiden, wann das Bild passend gespiegelt wird.

**Verwendet außerdem**

- [Comic-Lettering](https://postext.dev/de/docs/comics.md#lettering)
- [Sprecher und Anker](https://postext.dev/de/docs/comics.md#sprecher-und-anker)
- [Panel-Aufteilung](https://postext.dev/de/docs/comics.md#die-seite-aufteilen)
- [Panelbilder und Zuschnitte](https://postext.dev/de/docs/comics.md#panels-und-bilder)
- [Comicseiten](https://postext.dev/de/docs/comics.md#comicseiten)
- [Sprechblasenformate](https://postext.dev/de/docs/comics.md#sprechblasenstile)
- [Soundeffekte](https://postext.dev/de/docs/comics.md#sprechblasenstile)
- [Chinesische, japanische und koreanische Schriften](https://postext.dev/de/docs/configuration-programmatic-usage.md#chinesische-japanische-und-koreanische-schriften)
- [Arabische Schriften](https://postext.dev/de/docs/arabic-layout.md#schriften)
- [Text von rechts nach links](https://postext.dev/de/docs/arabic-layout.md#richtung-und-bidirektionaler-algorithmus)
- [Senkrechter Text](https://postext.dev/de/docs/configuration-page-layout.md#vertikale-schrift)
- [Semantische Farbpalette](https://postext.dev/de/docs/configuration-fonts-colors-viewers.md#farbpalette)
- [Seiten auf einem Canvas](https://postext.dev/de/docs/configuration-programmatic-usage.md#eine-seite-als-bitmap-rendern)
- [PDF-Export](https://postext.dev/de/docs/configuration-programmatic-usage.md#pdfs-erzeugen)
- [Panelrahmen und Zwischenräume](https://postext.dev/de/docs/comics.md#panels-und-bilder)
- [Kopfzeilen nach Seitenrolle](https://postext.dev/de/docs/configuration-page-layout.md#textelemente)
- [Im PDF eingebettete Schriften](https://postext.dev/de/docs/configuration-programmatic-usage.md#warum-ein-font-provider)
- [Abbildungen und Tabellen als Ressourcen](https://postext.dev/de/docs/document-format.md#ressourcen)

**Die Konfiguration auf einen Blick**

- [`bodyText`](https://postext.dev/de/docs/configuration-text.md#fließtext), [`colorPalette`](https://postext.dev/de/docs/configuration-fonts-colors-viewers.md#farbpalette), [`comics`](https://postext.dev/de/docs/comics.md#comicseiten), [`footer`](https://postext.dev/de/docs/configuration-page-layout.md#kopf--und-fußzeilen), [`header`](https://postext.dev/de/docs/configuration-page-layout.md#kopf--und-fußzeilen), [`headings`](https://postext.dev/de/docs/configuration-text.md#überschriften), [`layout`](https://postext.dev/de/docs/configuration-page-layout.md#layout), [`locale`](https://postext.dev/de/docs/configuration-text.md#silbentrennung), [`page`](https://postext.dev/de/docs/configuration-page-layout.md#seite)

**APIs**

- [`buildDocument`](https://postext.dev/de/docs/configuration-programmatic-usage.md#ein-dokument-erzeugen), [`decompressWoff2`](https://postext.dev/de/docs/configuration-programmatic-usage.md#font-provider-im-browser-fontsource--woff2), `defaultComicFont`, `defaultComicSfxFont`, [`registerResourceImage`](https://postext.dev/de/docs/architecture.md#api-oberfläche), [`renderPageToCanvas`](https://postext.dev/de/docs/configuration-programmatic-usage.md#eine-seite-als-bitmap-rendern), [`renderToPdf`](https://postext.dev/de/docs/configuration-programmatic-usage.md#pdfs-erzeugen), [`withLoadedFonts`](https://postext.dev/de/docs/configuration-programmatic-usage.md#schriften-vor-dem-layout-laden)

**Schriften**

- 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)

## Zubereitung

### 1 · Eine Konfiguration für jede Sprache

Der Code steht oben in [der kurzen Antwort](https://postext.dev/de/cookbook/one-page-six-languages.md#die-kurze-antwort). Nichts in der Konfiguration nennt eine Sprache außer `locale`. Ohne `fontFamily` nimmt das Lettering die Comicschrift der Dokumentsprache (`defaultComicFont`): Comic Neue, Zen Antique, Noto Sans SC oder Playpen Sans Arabic, und das Geräuschwort die passende Displayschrift. `writingMode: 'auto'` macht aus den japanischen Sprechblasen senkrechte Spalten; `readingDirection: 'auto'` liest die japanische und die arabische Seite von rechts, wie ihre Sprachen es tun, sodass dieselbe Aufteilung `split="30 / 35 [* | * | *] / *"` das Panel mit dem Funkgerät rechts und die Katze links setzt. Die Sprecher-IDs (`maya`, `tomas`) sind in jedem Skript dieselben, und die Anker der Bilder richten sich nach ihnen.

Der Schriftgrad gilt für das ganze Buch. Das englische Skript hat 216 Buchstaben, das spanische 220, das französische 224, das chinesische 74 Schriftzeichen; die längeren Skripte bekommen größere Sprechblasen, nie kleinere Schrift.

### 2 · Französisch fährt in jeder Ausgabe mit

```js
// script.js, Zeilen 213–219
const build = (md, cfg) =>
  withLoadedFonts(() => buildDocument({ markdown: md, resources }, cfg),
    { ...kitFonts(FONTS), text: 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.
docs.push(await build(french, { ...config(), locale: 'fr', footer: footerFor('fr', 'fr') }));
```

Französisch ist keine der Ausgaben dieses Rezepts, deshalb baut jede Ausgabe zwei Dokumente: ihre eigene Seite und dann die französische aus `content.fr.en.md`, mit derselben Konfiguration und der `locale` `'fr'`. Das französische Skript setzt das schmale geschützte Leerzeichen vor `!` und `?`, wie es der französische Satz tut.

### 3 · Die Bilder ändern sich nicht

```js
// script.js, Zeilen 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])],
  },

};
```

Die Sicherheitsbereiche sind schmaler als die Zellen dieser Aufteilung: Die mittlere Reihe enthält drei Panels von etwa 46 mm Breite und 80 mm Höhe, sodass jedes quadratische Bild einen Streifen von etwa 58 % seiner Breite zeigt, während sein Sicherheitsbereich, das Gesicht des Sprechers und das, worum es in der Zeile geht, 36–42 % einnimmt. Die Bilder werden für Japanisch und Arabisch nicht gespiegelt (`mirrorArt` bleibt false): Maya kommt weiterhin von links den Weg herauf, und nur die Reihenfolge der Panels folgt der Leserichtung.

## Das ganze Rezept

Eine Datei, aus dem Ordner des Rezepts zusammengesetzt, mit dem Beispieltext und dem gemeinsamen Baukasten der Rezepte bereits eingebettet; sie baut ihre eigene Seite auf. Zum Ausführen setzen Sie sie in ein `<script type="module">` auf einer leeren Seite oder fügen sie in das JS-Feld eines neuen CodePen-Pens ein (als Modul). Sie importiert postext von esm.sh, es gibt also nichts zu installieren oder zu bauen.

- Quellordner: 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.25.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, withLoadedFonts, renderPageToCanvas, 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 = () => ({
  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) =>
  withLoadedFonts(() => buildDocument({ markdown: md, resources }, cfg),
    { ...kitFonts(FONTS), text: 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.
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 v3 ── the same in every recipe · postext.dev/cookbook
// Postext loads the faces a config asks for before layout (prepareFonts,
// buildDocumentWithFonts) and asks the kit for the files: Fontsource's, the
// files the PDF embeds too.

/** The options of buildDocumentWithFonts / prepareFonts / withLoadedFonts:
 *  the Fontsource resolver, and the faces of FONTS loaded with the ones the
 *  config names. FONTS = { 'Family Name': ['400', '400i', '700'] }. */
function kitFonts(FONTS = {}) {
  const faces = Object.entries(FONTS).flatMap(([family, specs]) => specs.map((spec) =>
    ({ family, weight: parseInt(spec, 10), style: spec.endsWith('i') ? 'italic' : 'normal' })));
  return { resolve: fontsourceResolver, faces };
}

/** A face's Fontsource files, in a fixed order: latin, then latin-ext and greek
 *  when `text` needs them and the family ships them (kitSubsetsFor), each with
 *  its unicode-range. Null for a weight or slant Fontsource does not ship. */
async function fontsourceResolver(family, weight, style, { text = '' } = {}) {
  const id = fontsourceId(family);
  const meta = await fontsourceMeta(family);
  if (meta && !(meta.weights.includes(weight) && meta.styles.includes(style))) return null;
  kitStatus('Loading fonts…');
  const at = await fontsourceAt(id);
  return ['latin', ...kitSubsetsFor(text, meta)].map((subset) => ({
    source: `${at}files/${id}-${subset}-${weight}-${style}.woff2`,
    unicodeRange: kitRanges()[subset],
  }));
}

/** The unicode-range of each Fontsource file the kit loads (a function: the
 *  kit is inlined after the pen's code, which runs before a const would be set). */
function kitRanges() {
  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',
  };
}

/** For the cjk, arabic and comics blocks, which add their own files: the
 *  faces of `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.
 *  The files are added once all have loaded, in the order asked (latin, then
 *  latin-ext, then greek), whatever order they arrive in: the last one added
 *  wins a character two files hold. Resolves to the number of faces added. */
async function loadFonts(faces, text = '', { optional = false } = {}) {
  kitStatus('Loading fonts…');
  const ranges = kitRanges();
  const jobs = [];
  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 at = fontsourceAt(id);
    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 = `${await at}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().catch(() => {
          if (subset === 'latin' && !optional) throw new Error(`Fontsource has no ${family} ${weight} ${style}`);
        }));
      }
    }
  }
  const ready = await Promise.all(jobs).catch((error) => { kitFail(error); throw error; });
  return ready.filter((face) => face && document.fonts.add(face)).length;
}

/** 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, '-'); }

/** A package's folder at the one version @5 names now (#766). */
function fontsourceAt(id, u = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@`) {
  return (fontsourceAt.c ??= {})[id] ??= fetch(u + '5/package.json').then((r) => r.json())
    .then((p) => p.version || 5, () => 5).then((v) => `${u}${v}/`);
}

/** 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 v2 ── 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. Other options go to renderPageToCanvas. */
function showPages(docs, { title, width = 460, ...render } = {}) {
  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, { ...render, 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 v3 ── the same in every recipe that exports a PDF
/** The Fontsource files the screen used, as TrueType, with their range and
 *  place: the nearest weight the family ships, upright with no italic;
 *  latin, then what its 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 files = await Promise.all(['latin', ...kitSubsetsFor(text, meta)].map(async (subset, order) => {
    const res = await fetch(`${await fontsourceAt(id)}files/${id}-${subset}-${w}-${s}.woff2`);
    if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} ${subset}`);
    return Object.assign(await decompressWoff2(new Uint8Array(await res.arrayBuffer())),
      { unicodeRange: kitRanges()[subset], order });
  }));
  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 v3 ── 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 as a vector image, its fonts inside (inlineSvgFonts, ≥ 1.25).
 *  `options` go to registerResourceImage: { singleInk: true } tints it on the canvas. */
async function loadSvg(fileId, svg, options) {
  if (typeof inlineSvgFonts === 'function') svg = await inlineSvgFonts(svg, svgFaces);
  const img = new Image();
  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
  await img.decode();
  registerResourceImage(fileId, img, options);
  (loadImage.bytes ??= new Map()).set(fileId, new TextEncoder().encode(svg));
}

/** A face's Fontsource files: nearest weight; latin + what the SVG sets. */
async function svgFaces(family, weight, style, { codePoints = [] } = {}) {
  const [id, m] = [fontsourceId(family), await fontsourceMeta(family)];
  const w = m?.weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a)) ?? weight;
  const s = m?.styles.includes(style) === false ? 'normal' : style;
  return Promise.all(['latin', ...kitSubsetsFor(String.fromCodePoint(...codePoints), m)].map(async (x) => new Uint8Array(
    await (await fetch(`${await fontsourceAt(id)}files/${id}-${x}-${w}-${s}.woff2`)).arrayBuffer())));
}

/** 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 v2 ── 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 = `${id}/${weight}${style === 'italic' ? '-italic' : ''}.css`;
  if (!cjkSlices.cache.has(css)) {
    let at;
    cjkSlices.cache.set(css, fontsourceAt(id).then((a) => fetch(at = a + css.slice(id.length + 1)))
      .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], at).href, range, ranges };
      }).reverse()));
  }
  return cjkSlices.cache.get(css);
}

/** The file of `slices` the screen sets code point `cp` in, if any: the
 *  last one loadCjkFonts adds whose range holds it. A numbered file that
 *  repeats a letter of latin is added after latin, and wins it. */
function cjkSliceFor(slices, cp) {
  const holds = (slice) => slice.ranges.some(([lo, hi]) => cp >= lo && cp <= hi);
  return slices.reduce((last, slice) => (holds(slice) ? slice : last), undefined);
}

/** 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 the engine's later round
 *  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 the
 *  screen set its pages' characters in (`request.codePoints`), each marked
 *  with its unicode-range and its place in the order loadCjkFonts added
 *  them: postext-pdf sets a character two files hold in the one added
 *  last, as the browser does. 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.map(async (slice, order) => {
    if (!picked.has(slice)) return null;
    const res = await fetch(slice.url);
    if (!res.ok) throw new Error(`Fontsource file ${slice.url} (${res.status})`);
    const bytes = await decompressWoff2(new Uint8Array(await res.arrayBuffer()));
    return Object.assign(bytes, { unicodeRange: slice.range, order });
  })).then((files) => files.filter(Boolean));
}

/** 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, each marked with its unicode-range and its place in that order:
 *  the PDF sets a character in the file the browser took it from. 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 = `${await fontsourceAt(id)}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)]);
  const ranges = kitRanges();
  return ext ? [Object.assign(latin, { unicodeRange: ranges.latin, order: 0 }),
    Object.assign(ext, { unicodeRange: ranges['latin-ext'], order: 1 })] : 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 v2 ── 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. */
async function arabicFileUrl(family, weight, style) {
  const id = fontsourceId(family);
  return `${await fontsourceAt(id)}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 the engine's later round 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(${await 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: ā ḥ ʿ), each marked with its
 *  unicode-range and its place in the order the screen added them (latin
 *  and latin-ext by loadFonts, then arabic): the arabic file also has a
 *  space and brackets, which the browser takes from latin, the file whose
 *  range holds them, and postext-pdf follows it. 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 subsets = !wanted.length || wanted.some(inArabicRange) ? ['arabic', 'latin'] : ['latin'];
  if (meta.subsets.includes('latin-ext') && wanted.some((cp) => /[Ā-˿Ḁ-ỿ]/u.test(String.fromCodePoint(cp)))) {
    subsets.push('latin-ext');
  }
  const at = await fontsourceAt(id);
  return Promise.all(subsets.map(async (subset) => {
    const url = `${at}files/${id}-${subset}-${w}-${s}.woff2`;
    const res = await fetch(url);
    if (!res.ok) throw new Error(`Fontsource file ${url} (${res.status})`);
    const bytes = await decompressWoff2(new Uint8Array(await res.arrayBuffer()));
    return Object.assign(bytes, { unicodeRange: subset === 'arabic' ? arabicRange() : kitRanges()[subset],
      order: ['latin', 'latin-ext', 'greek', 'arabic'].indexOf(subset) });
  }));
}

// ─── Kit · comics v2 ── 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 at = await fontsourceAt(id);
  const file = (subset) => `${at}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, faces }. The safe area
 *  is what every crop keeps, the anchors the speakers' mouths, heads and
 *  faces, the avoid zones what no balloon covers unless a panel has no
 *  other room, and `faces` the faces of the people who do not speak, which
 *  no balloon ever 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 }),
    ...(meta.faces?.length && { faces: meta.faces }),
  };
}

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

## Varianten

### Die Bilder für die Ausgaben von rechts nach links spiegeln

`mirrorArt: true` spiegelt jedes Bild, wenn die Seite andersherum gelesen wird, als das Bild gezeichnet ist. Lassen Sie ein Panel mit Schrift oder einer Uhr darin mit `::panel{mirror=false}` ungespiegelt.

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

## Häufige Fehler

- Eine Skriptzeile nennt einen Sprecher über seine ID, nicht über seinen Namen: Schreiben Sie in jeder Sprache `maya:`. Den Namen, den ein Screenreader ansagt, liefert `cast[].name`.
- Die französische Seite teilt sich die Bilder der Ausgabe, deshalb steht der Alternativtext ihrer Panels in der Sprache der Ausgabe; geben Sie in `content.fr.en.md` `::panel{alt="…"}` für französischen Alternativtext an.

## Nachweise

- Rezept: 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
- Bilder: 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
- Bilder: 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
- Bilder: Close-up of Maya frowning at the floor and pointing down.: Generated With Diffusion Models, Original
- Bilder: 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
- Bilder: 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
- Schrift: 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 · Beispielinhalt: CC-BY-4.0

## Verwandte Rezepte

- [Nº 149 · Ein Manga von rechts nach links, vertikal gelettert](https://postext.dev/de/cookbook/manga-right-to-left.md): Zwei Mangaseiten, gezeichnet für das Lesen von rechts nach links: artDirection rtl hält die Panelfolge in jeder Ausgabe, japanische Blasen stehen in Spalten. · Stufe 2 (Mittel) · Comics
- [Nº 151 · Zwei Yonkoma-Strips auf einer Seite](https://postext.dev/de/cookbook/yonkoma.md): Eine Seite mit Gag-Strips aus vier Panels: zwei Spalten zu vier Panels, der rechte Strip zuerst gelesen, jeder mit Titel in schwarzem Kasten im ersten Panel. · Stufe 2 (Mittel) · Comics
- [Nº 150 · Eine Actionseite mit schrägen Zwischenräumen](https://postext.dev/de/cookbook/manga-action-slants.md): Die Seite, die ein Kendo-Finale entscheidet: schräge Zwischenräume (40~55) in der Aufteilung, ein rahmenloses Trefferpanel, ドン japanisch mit Übersetzung. · Stufe 2 (Mittel) · Comics