# Eine Comicseite über eine Doppelseite

> Ein :::page mit dem Flag spread legt eine Aufteilung über zwei Seiten: Ein Panorama läuft über den Bund, die Reihe darunter teilt sich am Falz.

- HTML-Fassung: https://postext.dev/de/cookbook/comic-double-spread
- Rezept Nº 154 · Comics und Manga · Stufe 2 (Mittel) · Ausgaben: Canvas, PDF
- Gattungen: Comics
- Benötigt postext ≥ 1.28.0, postext-pdf ≥ 1.28.0 · getestet mit 1.33.7, postext-pdf 1.33.7 am 2026-10-15
- Seiten: [2](https://postext.dev/cookbook/comic-double-spread/de/p01.webp?v=20126eda), [3](https://postext.dev/cookbook/comic-double-spread/de/p02.webp?v=20126eda)
- PDF: https://postext.dev/cookbook/comic-double-spread/de/comic-double-spread.pdf?v=20126eda
- In der Sandbox öffnen: https://postext.dev/de/sandbox#recipe=comic-double-spread&lang=de (.postext: https://postext.dev/cookbook/comic-double-spread/de/comic-double-spread.postext)
- Zuletzt aktualisiert: 2026-10-11
- Andere Sprachen: [en](https://postext.dev/en/cookbook/comic-double-spread.md), [es](https://postext.dev/es/cookbook/comic-double-spread.md), [ca](https://postext.dev/ca/cookbook/comic-double-spread.md), [fr](https://postext.dev/fr/cookbook/comic-double-spread.md), [it](https://postext.dev/it/cookbook/comic-double-spread.md), [pt](https://postext.dev/pt/cookbook/comic-double-spread.md), [zh](https://postext.dev/zh/cookbook/comic-double-spread.md), [ja](https://postext.dev/ja/cookbook/comic-double-spread.md), [ar](https://postext.dev/ar/cookbook/comic-double-spread.md)

## Kurz gesagt

Ein Comic, über zwei gegenüberliegende Seiten gelegt, als wären sie eine: Ein breites Bild eines vollen Markts läuft über die Buchmitte, darunter stehen drei Panels.

## Was Sie setzen

Die zweite Geschichte des Albums aus [Nº 152](https://postext.dev/de/cookbook/tebeo-album-page.md), *¡Abuelo!*, erzählt über zwei gegenüberliegende Seiten. Ein Samstag im Dezember, der Markt ist voll; Lola verliert ihren Großvater im Gedränge. Die obere Hälfte der Doppelseite ist ein einziges Panorama, 432 mm breit: Lola, winzig, ganz links, Paco auf der Suche ganz rechts, und der Gang des Markts läuft zwischen ihnen in den Falz. Darunter drei Panels: Lola allein zwischen den Beinen, Paco pfeifend auf einer Obstkiste, das Wiedersehen mit seiner Baskenmütze in der Luft. Die Aufteilung ist einmal für beide Seiten geschrieben, sodass das Panorama über den Bund läuft und der Zwischenraum der unteren Reihe auf den Falz fällt. Spanisch ist das Original; die englische, katalanische, chinesische, arabische, japanische, portugiesische, französische, deutsche und italienische Ausgabe beschriften dieselbe Doppelseite.

**Dieses Rezept beantwortet:**

- Wie lege ich eine Comicseite über eine Doppelseite?

## Die kurze Antwort

```js
// script.js, Zeilen 40–53
// The content writes :::page{spread split="55 / * [25 | 25 | *]"}: one frame from the verso's
// outer margin to the recto's (the inner margins drop out), split as one page. The panorama
// crosses the spine; the line at 50 % of the lower tier is the spine itself, so its gutter
// straddles the fold and no panel is cut by it.
const comics = {
  gutter: { horizontal: mm(5), vertical: mm(4) }, // 2 mm of white on each side of the fold
  panel: { borderWidth: pt(0.75), borderColor: col('ink'), background: col('paper') },
  lettering: { fontFamily: LETTER, fontSize: pt(LATIN ? 9.5 : 8.5), lineHeight: 1.1,
    color: col('ink') },
  runningHeads: true, // folios on both halves
};
// A spread opens on a verso, an even page. Page 1 of a document is a recto, so the engine
// would leave it blank and start on page 2; this episode continues an album at page 2.
const continuation = { pageIndexOffset: 1, pageNumbering: { startAt: 2 } };
```

## Zutaten

**Zeigt**

- [Comic-Doppelseiten](https://postext.dev/de/docs/comics.md#doppelseiten): :::page{spread} legt eine Aufteilung über zwei gegenüberliegende Seiten, beginnend mit einer linken Seite; der Bund läuft durch die Mitte, und ein Panel darf ihn mit seinem Bild überqueren.

**Verwendet außerdem**

- [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)
- [Sprecher und Anker](https://postext.dev/de/docs/comics.md#sprecher-und-anker)
- [Comicseiten](https://postext.dev/de/docs/comics.md#comicseiten)
- [Comic-Lettering](https://postext.dev/de/docs/comics.md#lettering)
- [Neues Lettering in anderen Sprachen](https://postext.dev/de/docs/comics.md#lettering)
- [Sprechblasenformate](https://postext.dev/de/docs/comics.md#sprechblasenstile)
- [Panelrahmen und Zwischenräume](https://postext.dev/de/docs/comics.md#panels-und-bilder)
- [Gespiegelte Ränder](https://postext.dev/de/docs/configuration-page-layout.md#gespiegelte-ränder)
- [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)
- [Papierfarbe](https://postext.dev/de/docs/configuration-page-layout.md#seite)
- [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)
- [Soundeffekte](https://postext.dev/de/docs/comics.md#sprechblasenstile)

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

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

## Zubereitung

### 1 · Eine Aufteilung über beide Seiten

Den Code finden Sie oben unter [Die kurze Antwort](https://postext.dev/de/cookbook/comic-double-spread.md#die-kurze-antwort). Der ganze Comic ist eine Direktive mit dem Flag `spread`:

```md
:::page{spread split="55 / * [25 | 25 | *]"}
::panel{art=ds1}
caption: Un sábado de diciembre, el mercado estaba hasta los topes.
lola: ¿Abuelo?
paco{shout}: ¿Lola? ¡Lolaaa!
```

Der Rahmen reicht vom Außensteg der linken bis zu dem der rechten Seite; die Bundstege fallen weg. Die erste Reihe, 55 % der Höhe, ist ein einziges Panel über den Bund. In der zweiten setzt `25 | 25 | *` ihre erste Linie auf 25 % und ihre zweite auf 50 %, den Bund selbst: zwei quadratische Panels auf der linken Seite, das Wiedersehen auf der rechten. Eine Doppelseite beginnt auf einer geraden Seite, und Seite 1 eines Dokuments ist eine rechte Seite, daher übergibt der Build `continuation: { pageIndexOffset: 1 }`: Diese Episode setzt das Album auf Seite 2 fort, und keine Vakatseite geht ihr voraus.

### 2 · Ein Panorama, groß genug für zwei Seiten

```js
// script.js, Zeilen 143–233
// The panorama is 1,900 px wide: across the 432 mm of the spread it prints at about 112 dpi.
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 = {
  ds1: { width: 1900, height: 633, safeArea: box([.03, .27, .93, .53]),
    alt: t({ en: 'Panorama of the crowded market hall: tiny Lola stands lost on the far left; '
        + 'far right, her grandfather searches the crowd.',
      es: 'Panorámica del mercado lleno de gente: a la izquierda del todo, Lola, '
        + 'diminuta, está perdida; a la derecha del todo, su abuelo la busca entre la multitud.',
      ca: 'Panoràmica del mercat ple de gent: a l’extrem esquerre, la Lola, petitíssima, '
        + 'està perduda; a l’extrem dret, el seu avi la busca entre la gentada.',
      zh: '拥挤的市场全景：最左边，小小的萝拉迷了路；最右边，她的爷爷在人群中寻找她。',
      ar: 'منظر واسع للسوق المزدحم: لولا الصغيرة تائهة في أقصى اليسار، وفي أقصى اليمين '
        + 'جدّها يبحث عنها بين الناس.',
      ja: '人でいっぱいの市場のパノラマ。左端に小さなローラが迷子になって立ち、右端では祖父が人ごみの中を探している。',
      pt: 'Panorama do mercado lotado: na ponta esquerda, a pequena Lola está perdida; na ponta '
        + 'direita, o avô a procura no meio da multidão.',
      fr: 'Panorama de la halle du marché bondée : tout à gauche, la petite Lola est perdue ; '
        + 'tout à droite, son grand-père la cherche dans la foule.',
      de: 'Panorama der vollen Markthalle: Ganz links steht die kleine Lola verloren da; ganz '
        + 'rechts sucht ihr Großvater die Menge ab.',
      it: 'Panoramica del mercato coperto pieno di gente: all’estrema sinistra la piccola Lola si '
        + 'è persa; all’estrema destra suo nonno la cerca tra la folla.' }),
    anchors: [
      who('lola', .065, .58, [.063, .55], [.045, .51, .04, .11]),
      who('paco', .925, .38, [.925, .34], [.9, .3, .05, .12]),
    ],
    faces: [box([.062, .305, .022, .055])], // the fishmonger behind Lola, who says nothing
  },
  ds2: { width: 1152, height: 1152, safeArea: box([.31, .08, .35, .62]),
    alt: t({ en: "Lola, tearful, stands among grown-ups' legs and shopping bags.",
      es: 'Lola, con lágrimas en los ojos, está de pie entre piernas de mayores y bolsas '
        + 'de la compra.',
      ca: 'La Lola, amb llàgrimes als ulls, és dreta entre cames de grans i bosses de la compra.',
      zh: '萝拉含着眼泪，站在大人们的腿和购物袋之间。',
      ar: 'لولا والدموع في عينيها واقفة بين سيقان الكبار وأكياس التسوّق.',
      ja: '涙ぐんだローラが、大人の足と買い物袋のあいだに立っている。',
      pt: 'Lola, com lágrimas nos olhos, está de pé entre pernas de adultos e sacolas '
        + 'de compras.',
      fr: 'Lola, les larmes aux yeux, se tient entre des jambes d’adultes et des sacs de '
        + 'courses.',
      de: 'Lola steht mit Tränen in den Augen zwischen Erwachsenenbeinen und Einkaufstaschen.',
      it: 'Lola, con le lacrime agli occhi, è in piedi tra gambe di adulti e borse della '
        + 'spesa.' }),
    anchors: [
      who('lola', .505, .24, [.48, .17], [.4, .1, .18, .19]),
    ],
  },
  ds3: { width: 1000, height: 1000, safeArea: box([.34, .07, .47, .23]),
    alt: t({ en: 'Paco stands on a fruit crate and whistles through his fingers; shoppers '
        + 'turn to look.',
      es: 'Paco, subido a una caja de fruta, silba con los dedos; la gente se vuelve a mirar.',
      ca: 'En Paco, enfilat a una caixa de fruita, xiula amb els dits; la gent es gira a mirar.',
      zh: '帕科站在水果箱上，用手指吹口哨；买东西的人都回过头来看。',
      ar: 'باكو واقف على صندوق فاكهة ويصفّر بأصابعه، والمتسوّقون يلتفتون لينظروا.',
      ja: 'パコが果物の木箱に乗って指笛を吹き、買い物客がふり返る。',
      pt: 'Paco, em cima de um caixote de frutas, assobia com os dedos; as pessoas se viram '
        + 'para olhar.',
      fr: 'Paco, debout sur une cagette de fruits, siffle avec ses doigts ; les clients se '
        + 'retournent.',
      de: 'Paco steht auf einer Obstkiste und pfeift auf den Fingern; die Leute drehen sich um.',
      it: 'Paco, in piedi su una cassetta della frutta, fischia con le dita; la gente si volta a '
        + 'guardare.' }),
    anchors: [
      who('paco', .5, .2, [.47, .14], [.38, .08, .17, .16]),
      who('sfx', .62, .17),
    ],
  },
  ds4: { width: 1200, height: 800, safeArea: box([.33, .05, .48, .57]),
    alt: t({ en: "Lola leaps into her grandfather's arms; his beret flies off and the "
        + "stallholders smile.",
      es: 'Lola salta a los brazos de su abuelo; la boina sale volando y los tenderos sonríen.',
      ca: 'La Lola salta als braços del seu avi; la boina surt volant i els paradistes somriuen.',
      zh: '萝拉扑进爷爷怀里；他的贝雷帽飞了出去，摊主们都笑了。',
      ar: 'لولا تقفز إلى ذراعي جدّها، وقبعته تطير، والباعة يبتسمون.',
      ja: 'ローラが祖父の腕に飛びこむ。ベレー帽が飛び、店の人たちがほほえむ。',
      pt: 'Lola pula nos braços do avô; a boina sai voando e os feirantes sorriem.',
      fr: 'Lola saute dans les bras de son grand-père ; son béret s’envole et les marchands '
        + 'sourient.',
      de: 'Lola springt ihrem Großvater in die Arme; seine Baskenmütze fliegt davon, und die '
        + 'Händler lächeln.',
      it: 'Lola salta in braccio al nonno; il basco gli vola via e i bancarellai sorridono.' }),
    anchors: [
      who('lola', .51, .27, [.47, .2], [.42, .14, .13, .19]),
      who('paco', .595, .31, [.62, .22], [.55, .14, .15, .22]),
    ],
    avoid: [box([.67, .06, .13, .22])],
  },

};
```

Das Panorama ist das einzige Bild, das über den Falz gedruckt wird, 432 × 144 mm, daher wird es mit 1.900 px (380 KB) ausgeliefert; die anderen drei haben 1.000–1.200 px. Sein Sicherheitsbereich ist ein Band über fast die ganze Breite, und seine zwei Sprecher stehen an den Rändern, bei 6 % und 92 % der Breite, weit weg vom Bund, wo die Bindung eine Sprechblase verschlucken würde. Das Bild ist so gezeichnet, dass die Mitte frei von Gesichtern bleibt: Der Gang des Markts läuft in den Falz. Eine Menge ist voller Gesichter, die nichts sagen: Der Fischhändler hinter Lola ist in `faces` markiert, der Liste der Gesichter von Personen ohne Text, sodass ihre erste Sprechblase neben ihm steht und nie auf seinem Gesicht oder seiner Mütze, und die japanische Ausgabe heftet ihre Spalte dort an (`at="2.8% 37%"`).

### 3 · Die Sprechblasen des Albums

```js
// script.js, Zeilen 57–72
comics.balloonStyles = [
  { id: 'speech', fill: col('balloon'), stroke: col('ink'), strokeWidth: pt(0.6) },
  { id: 'caption', fill: col('cartouche'), stroke: col('ink'), strokeWidth: pt(0.6),
    padding: em(0.45), aspect: 3.4 },
  { id: 'shout', fill: col('balloon'), stroke: col('ink'), burstPoints: 16, fontScale: 1.2 },
  { id: 'whisper', fill: col('balloon'), stroke: col('ink') },
  { id: 'sfx', fontFamily: DISPLAY, color: col('orange'), halo: pt(1.6), haloColor: col('ink'),
    fontScale: 3.2 },
];
comics.cast = [
  { id: 'lola', name: 'Lola' },
  { id: 'paco', name: t({ es: 'el abuelo Paco', en: 'Grandpa Paco', ca: "l'avi Paco",
    zh: '帕科爷爷', ar: 'الجد باكو', ja: 'パコおじいちゃん', pt: 'o vovô Paco', fr: 'papi Paco',
    de: 'Opa Paco',
    it: 'nonno Paco' }) },
];
```

Die Stile der Sprechblasen sind die von Nº 152: weiße Sprechblasen, blassgelbe Textkästen, ein Zacken für Pacos Ruf, ein gestrichelter Umriss für Lolas Flüstern und der Pfiff in der Geräuschschrift des Albums, Bangers in den lateinischen Ausgaben. `cast` gibt PDF und EPUB die Namen, die sie vor jeder Zeile vorlesen.

## 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/comic-double-spread

### script.js

```js
// ═══ Postext Cookbook · Nº 154 · One comic page across a double spread ═══════════════
// https://postext.dev/en/cookbook/comic-double-spread
// Code: MIT · Story: written for the recipe (CC BY 4.0) · Pictures: generated with diffusion models
// Fonts: Patrick Hand, Bangers, the comic faces of each script (OFL) · Needs postext ≥ 1.28.0
// One split tree laid across two facing pages: a panorama runs over the spine, and the
// tier under it splits at the spine's gutter. Same album, same lettering as Nº 152.
import {
  buildDocument, withLoadedFonts, renderPageToCanvas, registerResourceImage, defaultComicFont,
  defaultComicSfxFont,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'de'; // @lang: 'es' | 'en' | 'ca' | 'zh' | 'ar' | 'ja' | 'pt' | 'fr' | 'de' | 'it'
const RECIPE = 'comic-double-spread';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: the album's flat colours
const palette = {
  ink: '#1d1b19', // outlines, lettering, folios
  orange: '#d9601a', // the sound effect
  cartouche: '#fbe8a6', // narration boxes
  balloon: '#ffffff',
  muted: '#5f5a54', // the colophon
  paper: '#fffdf8',
};
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: 'orange (defaults)', value: { hex: palette.orange, model: 'hex' } },
];
// #endregion

const LOCALE = t({ es: 'es', en: 'en-gb', ca: 'ca', zh: 'zh-Hans', ar: 'ar', ja: 'ja',
  pt: 'pt-BR', fr: 'fr', de: 'de', it: 'it' });
const LATIN = ['es', 'en', 'ca', 'pt', 'fr', 'de', 'it'].includes(LANG);
const LETTER = LATIN ? 'Patrick Hand' : defaultComicFont(LOCALE); // mixed-case hand lettering
const DISPLAY = defaultComicSfxFont(LOCALE); // Bangers, Dela Gothic One, ZCOOL KuaiLe, Lalezar

// #region answer: one split across two facing pages, opened on a verso
// The content writes :::page{spread split="55 / * [25 | 25 | *]"}: one frame from the verso's
// outer margin to the recto's (the inner margins drop out), split as one page. The panorama
// crosses the spine; the line at 50 % of the lower tier is the spine itself, so its gutter
// straddles the fold and no panel is cut by it.
const comics = {
  gutter: { horizontal: mm(5), vertical: mm(4) }, // 2 mm of white on each side of the fold
  panel: { borderWidth: pt(0.75), borderColor: col('ink'), background: col('paper') },
  lettering: { fontFamily: LETTER, fontSize: pt(LATIN ? 9.5 : 8.5), lineHeight: 1.1,
    color: col('ink') },
  runningHeads: true, // folios on both halves
};
// A spread opens on a verso, an even page. Page 1 of a document is a recto, so the engine
// would leave it blank and start on page 2; this episode continues an album at page 2.
const continuation = { pageIndexOffset: 1, pageNumbering: { startAt: 2 } };
// #endregion

// #region balloons: the album's balloons and cartouches (Nº 152)
comics.balloonStyles = [
  { id: 'speech', fill: col('balloon'), stroke: col('ink'), strokeWidth: pt(0.6) },
  { id: 'caption', fill: col('cartouche'), stroke: col('ink'), strokeWidth: pt(0.6),
    padding: em(0.45), aspect: 3.4 },
  { id: 'shout', fill: col('balloon'), stroke: col('ink'), burstPoints: 16, fontScale: 1.2 },
  { id: 'whisper', fill: col('balloon'), stroke: col('ink') },
  { id: 'sfx', fontFamily: DISPLAY, color: col('orange'), halo: pt(1.6), haloColor: col('ink'),
    fontScale: 3.2 },
];
comics.cast = [
  { id: 'lola', name: 'Lola' },
  { id: 'paco', name: t({ es: 'el abuelo Paco', en: 'Grandpa Paco', ca: "l'avi Paco",
    zh: '帕科爷爷', ar: 'الجد باكو', ja: 'パコおじいちゃん', pt: 'o vovô Paco', fr: 'papi Paco',
    de: 'Opa Paco',
    it: 'nonno Paco' }) },
];
// #endregion

const COLOPHON = t({
  es: 'Rotulado en Patrick Hand y Bangers (SIL OFL) · Dibujo: generado con modelos de difusión',
  en: 'Lettered in Patrick Hand and Bangers (SIL OFL) · Art: generated with diffusion models',
  ca: 'Retolat en Patrick Hand i Bangers (SIL OFL) · Dibuix: generat amb models de difusió',
  zh: '嵌字：Noto Sans SC、ZCOOL KuaiLe（SIL OFL）· 画面：由扩散模型生成',
  ar: 'الخطوط: Playpen Sans Arabic وLalezar (SIL OFL) · الرسوم: مولّدة بنماذج الانتشار',
  ja: '写植：Zen Antique、Dela Gothic One（SIL OFL）・ 作画：拡散モデルで生成',
  pt: 'Letreirado em Patrick Hand e Bangers (SIL OFL) · Arte: gerada com modelos de difusão',
  fr: 'Lettrage en Patrick Hand et Bangers (SIL OFL) · Dessin : généré par des modèles de '
    + 'diffusion',
  de: 'Gelettert in Patrick Hand und Bangers (SIL OFL) · Zeichnungen: mit Diffusionsmodellen '
    + 'erzeugt',
  it: 'Lettering in Patrick Hand e Bangers (SIL OFL) · Disegni: generati con modelli di '
    + 'diffusione',
});
const foot = (id, content, y, extra) => ({ kind: 'text', id, content, fontFamily: LETTER,
  align: 'center', pages: 'comic',
  placement: { anchor: { to: 'page', edge: 'bottom' }, offset: { y: mm(y) } }, ...extra });

const config = () => ({
  locale: LOCALE,
  colorPalette,
  page: {
    sizePreset: 'custom', width: mm(230), height: mm(300), dpi: 150, // the album of Nº 152
    backgroundColor: col('paper'),
    margins: { top: mm(18), bottom: mm(22), left: mm(16), right: mm(14), mirror: true },
  },
  layout: { layoutType: 'single' },
  bodyText: { fontFamily: LETTER, fontSize: pt(11), lineHeight: pt(15), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink') },
  headings: { fontFamily: DISPLAY, color: col('orange'),
    levels: [{ level: 1, breakBefore: { enabled: true, parity: 'any' } }] }, // the H1 break
  comics,
  header: { elements: [] },
  footer: { elements: [
    foot('folio', '{pageNumber}', -13, { fontSize: pt(10), color: col('ink') }),
    foot('colophon', COLOPHON, -7, { fontSize: pt(7), color: col('muted'), parity: 'odd' }),
  ] },
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`:::page{spread split="55 / * [25 | 25 | *]"}
::panel{art=ds1}
caption: An einem Samstag im Dezember war die Markthalle brechend voll.
lola: Opa?
paco{shout}: Lola? Lolaaa!
::panel{art=ds2}
lola{whisper}: Opa… wo bist du?
caption{at=bottom-start}: Ich dachte an das, was er mir immer sagte: Wenn du dich verläufst, bleib, wo du bist.
::panel{art=ds3}
sfx{at="78% 20%" rotate=-8}: PFIIIIIT!
caption{at=bottom-start}: Und dass in Madrid niemand so pfeift wie ein Bäcker.
::panel{art=ds4}
lola: Opa!
paco: Da bist du ja, du Schlingel!
paco: Und da fliegt meine Baskenmütze!
:::
`; // content.<lang>.md: one :::page{spread}

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

// #region art: the panel manifest: safe areas, speakers' mouths, heads and faces, in fractions
// The panorama is 1,900 px wide: across the 432 mm of the spread it prints at about 112 dpi.
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 = {
  ds1: { width: 1900, height: 633, safeArea: box([.03, .27, .93, .53]),
    alt: t({ en: 'Panorama of the crowded market hall: tiny Lola stands lost on the far left; '
        + 'far right, her grandfather searches the crowd.',
      es: 'Panorámica del mercado lleno de gente: a la izquierda del todo, Lola, '
        + 'diminuta, está perdida; a la derecha del todo, su abuelo la busca entre la multitud.',
      ca: 'Panoràmica del mercat ple de gent: a l’extrem esquerre, la Lola, petitíssima, '
        + 'està perduda; a l’extrem dret, el seu avi la busca entre la gentada.',
      zh: '拥挤的市场全景：最左边，小小的萝拉迷了路；最右边，她的爷爷在人群中寻找她。',
      ar: 'منظر واسع للسوق المزدحم: لولا الصغيرة تائهة في أقصى اليسار، وفي أقصى اليمين '
        + 'جدّها يبحث عنها بين الناس.',
      ja: '人でいっぱいの市場のパノラマ。左端に小さなローラが迷子になって立ち、右端では祖父が人ごみの中を探している。',
      pt: 'Panorama do mercado lotado: na ponta esquerda, a pequena Lola está perdida; na ponta '
        + 'direita, o avô a procura no meio da multidão.',
      fr: 'Panorama de la halle du marché bondée : tout à gauche, la petite Lola est perdue ; '
        + 'tout à droite, son grand-père la cherche dans la foule.',
      de: 'Panorama der vollen Markthalle: Ganz links steht die kleine Lola verloren da; ganz '
        + 'rechts sucht ihr Großvater die Menge ab.',
      it: 'Panoramica del mercato coperto pieno di gente: all’estrema sinistra la piccola Lola si '
        + 'è persa; all’estrema destra suo nonno la cerca tra la folla.' }),
    anchors: [
      who('lola', .065, .58, [.063, .55], [.045, .51, .04, .11]),
      who('paco', .925, .38, [.925, .34], [.9, .3, .05, .12]),
    ],
    faces: [box([.062, .305, .022, .055])], // the fishmonger behind Lola, who says nothing
  },
  ds2: { width: 1152, height: 1152, safeArea: box([.31, .08, .35, .62]),
    alt: t({ en: "Lola, tearful, stands among grown-ups' legs and shopping bags.",
      es: 'Lola, con lágrimas en los ojos, está de pie entre piernas de mayores y bolsas '
        + 'de la compra.',
      ca: 'La Lola, amb llàgrimes als ulls, és dreta entre cames de grans i bosses de la compra.',
      zh: '萝拉含着眼泪，站在大人们的腿和购物袋之间。',
      ar: 'لولا والدموع في عينيها واقفة بين سيقان الكبار وأكياس التسوّق.',
      ja: '涙ぐんだローラが、大人の足と買い物袋のあいだに立っている。',
      pt: 'Lola, com lágrimas nos olhos, está de pé entre pernas de adultos e sacolas '
        + 'de compras.',
      fr: 'Lola, les larmes aux yeux, se tient entre des jambes d’adultes et des sacs de '
        + 'courses.',
      de: 'Lola steht mit Tränen in den Augen zwischen Erwachsenenbeinen und Einkaufstaschen.',
      it: 'Lola, con le lacrime agli occhi, è in piedi tra gambe di adulti e borse della '
        + 'spesa.' }),
    anchors: [
      who('lola', .505, .24, [.48, .17], [.4, .1, .18, .19]),
    ],
  },
  ds3: { width: 1000, height: 1000, safeArea: box([.34, .07, .47, .23]),
    alt: t({ en: 'Paco stands on a fruit crate and whistles through his fingers; shoppers '
        + 'turn to look.',
      es: 'Paco, subido a una caja de fruta, silba con los dedos; la gente se vuelve a mirar.',
      ca: 'En Paco, enfilat a una caixa de fruita, xiula amb els dits; la gent es gira a mirar.',
      zh: '帕科站在水果箱上，用手指吹口哨；买东西的人都回过头来看。',
      ar: 'باكو واقف على صندوق فاكهة ويصفّر بأصابعه، والمتسوّقون يلتفتون لينظروا.',
      ja: 'パコが果物の木箱に乗って指笛を吹き、買い物客がふり返る。',
      pt: 'Paco, em cima de um caixote de frutas, assobia com os dedos; as pessoas se viram '
        + 'para olhar.',
      fr: 'Paco, debout sur une cagette de fruits, siffle avec ses doigts ; les clients se '
        + 'retournent.',
      de: 'Paco steht auf einer Obstkiste und pfeift auf den Fingern; die Leute drehen sich um.',
      it: 'Paco, in piedi su una cassetta della frutta, fischia con le dita; la gente si volta a '
        + 'guardare.' }),
    anchors: [
      who('paco', .5, .2, [.47, .14], [.38, .08, .17, .16]),
      who('sfx', .62, .17),
    ],
  },
  ds4: { width: 1200, height: 800, safeArea: box([.33, .05, .48, .57]),
    alt: t({ en: "Lola leaps into her grandfather's arms; his beret flies off and the "
        + "stallholders smile.",
      es: 'Lola salta a los brazos de su abuelo; la boina sale volando y los tenderos sonríen.',
      ca: 'La Lola salta als braços del seu avi; la boina surt volant i els paradistes somriuen.',
      zh: '萝拉扑进爷爷怀里；他的贝雷帽飞了出去，摊主们都笑了。',
      ar: 'لولا تقفز إلى ذراعي جدّها، وقبعته تطير، والباعة يبتسمون.',
      ja: 'ローラが祖父の腕に飛びこむ。ベレー帽が飛び、店の人たちがほほえむ。',
      pt: 'Lola pula nos braços do avô; a boina sai voando e os feirantes sorriem.',
      fr: 'Lola saute dans les bras de son grand-père ; son béret s’envole et les marchands '
        + 'sourient.',
      de: 'Lola springt ihrem Großvater in die Arme; seine Baskenmütze fliegt davon, und die '
        + 'Händler lächeln.',
      it: 'Lola salta in braccio al nonno; il basco gli vola via e i bancarellai sorridono.' }),
    anchors: [
      who('lola', .51, .27, [.47, .2], [.42, .14, .13, .19]),
      who('paco', .595, .31, [.62, .22], [.55, .14, .15, .22]),
    ],
    avoid: [box([.67, .06, .13, .22])],
  },

};
// #endregion

// ─── 4 · Build & show ───────────────────────────────────────────────────────
const faces = { [LETTER]: FONTS[LETTER], [DISPLAY]: FONTS[DISPLAY] }; // this edition's faces
await loadFonts(FONTS, markdown + COLOPHON); // the Latin files of every face
await loadCjkFonts(faces, markdown + COLOPHON);
await loadArabicFonts(faces, markdown + COLOPHON);
await loadComicFonts(faces, markdown + COLOPHON);
const resources = await Promise.all([
  comicPanel('ds1', asset('ds1-1900.jpg'), ART.ds1), comicPanel('ds2', asset('ds2.jpg'), ART.ds2),
  comicPanel('ds3', asset('ds3.jpg'), ART.ds3), comicPanel('ds4', asset('ds4.jpg'), ART.ds4),
]);
const doc = await withLoadedFonts(
  () => buildDocument({ markdown, resources, continuation }, config()),
  { ...kitFonts(FONTS), text: markdown + COLOPHON });
showBook(doc, { title: t({ es: 'Una página de cómic a doble página',
  en: 'One comic page across a double spread', ca: 'Una pàgina de còmic a doble pàgina',
  zh: '横跨两页的漫画', ar: 'صفحة قصص مصوّرة على صفحتين متقابلتين', ja: '見開きの漫画',
  pt: 'Uma página de quadrinhos em página dupla',
  fr: 'Une planche de BD sur une double page',
  de: 'Eine Comicseite über eine Doppelseite',
  it: 'Una tavola a fumetti su una doppia pagina' }) });
offerPdf(() => renderToPdf(doc, { fontProvider: comicPdfProvider, resourceBytes: imageBytes }),
  `${RECIPE}.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

### Das Buch mit der Doppelseite beginnen

Lassen Sie die Fortsetzung weg, und die Engine lässt Seite 1 leer (Rolle `blank`), sodass die Doppelseite trotzdem auf die Seiten 2 und 3 fällt.

```diff
-const continuation = { pageIndexOffset: 1, pageNumbering: { startAt: 2 } };
+const continuation = {};
```

## Häufige Fehler

- Sprechblasen halten sich aus einem Band von 8 mm um den Bund heraus, angeheftete eingeschlossen: Ein Sprecher, der auf dem Falz steht, bekommt eine zur Seite geschobene Sprechblase. Halten Sie die Sprecher eines Panels, das über den Bund läuft, von seiner Mitte fern.
- Eine Sprechblase meidet zwei Figuren, deren Gesichter sich berühren, bei einer Umarmung oder einem Kampf, auch wenn ihr eigener Sprecher darunter ist. In der japanischen und der arabischen Ausgabe liest sich die Doppelseite von rechts, das Panel mit dem Wiedersehen wandert auf die linke Seite, und die fliegende Baskenmütze nimmt dessen obere rechte Ecke ein; Pacos zwei Sprechblasen stehen über dem Markt neben seinem Kopf, nicht über der Umarmung. Markieren Sie beide Gesichter in der Zeichnung (`face`), damit die Engine sieht, dass sie sich berühren.

## Nachweise

- Rezept: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Text: ¡Abuelo! (Grandpa!), a two-page comic written for this recipe, in six languages: Postext Cookbook, CC-BY-4.0
- Bilder: Panorama of the crowded market hall: tiny Lola stands lost on the far left; far right, her grandfather searches the crowd.: Generated With Diffusion Models, Original
- Bilder: Lola, tearful, stands among grown-ups' legs and shopping bags.: Generated With Diffusion Models, Original
- Bilder: Paco stands on a fruit crate and whistles through his fingers; shoppers turn to look.: Generated With Diffusion Models, Original
- Bilder: Lola leaps into her grandfather's arms; his beret flies off and the stallholders smile.: Generated With Diffusion Models, Original
- Schrift: Patrick Hand (OFL-1.1), Bangers (OFL-1.1), Noto Sans SC (OFL-1.1), ZCOOL KuaiLe (OFL-1.1), Zen Antique (OFL-1.1), Dela Gothic One (OFL-1.1), Playpen Sans Arabic (OFL-1.1), Lalezar (OFL-1.1)
- Code: MIT · Beispielinhalt: CC-BY-4.0

## Verwandte Rezepte

- [Nº 152 · Eine Albumseite in Ligne claire, mit Erzähltextkästen](https://postext.dev/de/cookbook/tebeo-album-page.md): Frankobelgische Albumseite, vier Reihen: eckige Rahmen, gelbe Erzähltextkästen in den Ecken, Sprechblasen in gemischter Schreibung, aus der Comic-Konfiguration. · Stufe 2 (Mittel) · Comics
- [Nº 144 · Ein Satz Panels, drei Seitenaufteilungen](https://postext.dev/de/cookbook/comic-page-splitters.md): Fünf Comic-Panels in drei Aufteilungsbäumen: split in :::page teilt die Seite, der Sicherheitsbereich jedes Bildes hält sein Motiv in jeder Zelle. · Stufe 2 (Mittel) · Comics
- [Nº 145 · Alle Arten von Sprechblasen auf einer Leuchtturmseite](https://postext.dev/de/cookbook/balloon-kinds.md): Eine Comicseite mit Sprech-, Denk-, Flüster-, Schrei- und Funkblase, Textkasten, innerer Stimme, Anmerkung und Soundeffekt, je in Klammern im Skript benannt. · Stufe 2 (Mittel) · Comics