Una striscia quotidiana e una mezza pagina domenicale

// ═══ Postext Cookbook · Nº 146 · A daily strip and a Sunday half page in the newspaper ═══
// https://postext.dev/en/cookbook/newspaper-daily-strip
// Code: MIT · Text: original (CC BY 4.0) · Pictures: generated with diffusion models
// Fonts: Newsreader, Archivo Narrow, Comic Neue, Bangers and 12 more (OFL) · Needs postext ≥ 1.30.0
//
// Two pages of a newspaper's pull-out comics section: a four-panel daily strip across a
// four-column page, under its article, and a Sunday half page with its own panel grid. Both
// are :::strip blocks in the text: the columns end level over one as over a page-wide figure.
import {
  buildDocument, withLoadedFonts, renderPageToCanvas, registerResourceImage,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'it'; // @lang: 'en' | 'es' | 'ca' | 'zh' | 'ar' | 'ja' | 'pt' | 'fr' | 'de' | 'it'
const RECIPE = 'newspaper-daily-strip';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: newsprint, ink and the paper's red
const palette = {
  ink: '#16181b', // text, rules, panel borders and the lettering
  paper: '#f6f3ec', // newsprint
  accent: '#b3261e', // section flags, kickers and the sound effects
  tint: '#e9e4d8', // the advert's box
  rule: '#8f9196', // the column rules
  muted: '#575b61', // bylines and the folio line
};
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: 'ink (defaults)', value: { hex: palette.ink, model: 'hex' } },
];
// #endregion

// #region editions: the newspaper's text, label and lettering faces in each script
const [TEXT, LABEL, LETTERING, SFX] = t({
  en: ['Newsreader', 'Archivo Narrow', 'Comic Neue', 'Bangers'],
  es: ['Newsreader', 'Archivo Narrow', 'Comic Neue', 'Bangers'],
  ca: ['Newsreader', 'Archivo Narrow', 'Comic Neue', 'Bangers'],
  pt: ['Newsreader', 'Archivo Narrow', 'Comic Neue', 'Bangers'],
  fr: ['Newsreader', 'Archivo Narrow', 'Comic Neue', 'Bangers'],
  de: ['Newsreader', 'Archivo Narrow', 'Comic Neue', 'Bangers'],
  it: ['Newsreader', 'Archivo Narrow', 'Comic Neue', 'Bangers'],
  zh: ['Noto Serif SC', 'Noto Sans SC', 'ZCOOL KuaiLe', 'ZCOOL QingKe HuangYou'],
  ja: ['Noto Serif JP', 'Noto Sans JP', 'Zen Antique', 'Dela Gothic One'],
  ar: ['Noto Naskh Arabic', 'Noto Kufi Arabic', 'Playpen Sans Arabic', 'Lalezar'],
});
const CJK = LANG === 'zh' || LANG === 'ja';
// Design text aligns to physical sides: an Arabic page starts on the right.
const [START, END] = LANG === 'ar' ? ['right', 'left'] : ['left', 'right'];
// #endregion
const MARGIN = { top: 31, bottom: 14, side: 12 }; // mm: a newspaper's narrow, even margins
const GUTTER = 4; // mm: four columns of 48.5 mm on the 206 mm text width
const LEAD = CJK ? 15 : LANG === 'ar' ? 16 : 12.2; // pt: the baseline grid
const at = (to, edge, x = 0, y = 0) => ({ anchor: { to, edge }, offset: { x: mm(x), y: mm(y) } });
const label = (size, look = {}) => ({ fontFamily: LABEL, fontSize: pt(size), fontWeight: 700,
  color: col('ink'), ...look });

// #region answer: a page-wide daily strip and a Sunday half page, set in the columns
// In the Markdown each strip is a fenced block, where the paper wants it:
//   :::strip{split="55 / * [40 | *]" height=210mm}   the Sunday half page, on the cover
//   :::strip{split="* | * | * | *" span=page}   the daily: four square panels
// On the one-column cover the Sunday strip is set in the text, 210 mm deep. Inside, the daily
// follows the article, as wide as its four columns, and the columns of the article end
// level above it (placement=bottom would float it to the page's foot). A strip never
// splits; one that does not fit moves to the next page.
// The panels, gutters and balloons come from the comics settings, as on a comic page.
const comics = {
  gutter: { horizontal: mm(3), vertical: mm(3) },
  panel: { borderWidth: pt(0.75), borderColor: col('ink'), background: col('paper') },
  lettering: { fontFamily: LETTERING, fontSize: pt(7.5), color: col('ink'), inset: mm(1) },
  balloonStyles: [
    { id: 'speech', fill: col('paper'), stroke: col('ink') },
    { id: 'whisper', fill: col('paper'), stroke: col('ink') },
    { id: 'shout', fill: col('paper'), stroke: col('ink') },
    { id: 'caption', fill: col('accent'), stroke: col('accent'), color: col('paper'),
      fontFamily: LABEL, bold: true },
    { id: 'sfx', fontFamily: SFX, color: col('accent'), haloColor: col('paper') },
  ],
};
const layout = { layoutType: 'multiple', columnCount: 4, gutterWidth: mm(GUTTER),
  columnRule: { enabled: true, color: col('rule'), lineWidth: pt(0.4) } };
// #endregion

// The section flag heads every page of the pull-out: its name over a 3 pt bar, the folio line
// above it. It lives in the header, so the cover's strip starts right under it, and a float
// written after an opener can still take that page's foot (gotcha: top-float-next-page).
const WIDTH = 230 - 2 * MARGIN.side; // mm: the text width
const SECTION = t({ en: 'Funnies', es: 'Tebeos', ca: 'Còmics', zh: '漫画版', ar: 'صفحة الكوميكس',
  ja: '漫画面', pt: 'Quadrinhos', fr: 'Bandes dessinées', de: 'Comics', it: 'Fumetti' });
const across = (y) => ({ ...at('page', 'top-left', MARGIN.side, y), size: { width: mm(WIDTH) } });
const header = { elements: [
  { kind: 'text', id: 'folio', content: '{pageNumber}  ·  {title}  ·  {publishDate}',
    ...label(8, { color: col('muted') }), align: START, placement: across(8) },
  { kind: 'text', id: 'flag', content: SECTION, ...label(30, { color: col('accent') }),
    lineHeight: 1, align: START, placement: across(12.5) },
  { kind: 'text', id: 'tag', content: '{subtitle}', ...label(9, { color: col('muted') }),
    align: END, placement: across(19.5) },
  { kind: 'rule', id: 'bar', thickness: pt(3), color: col('ink'), placement: across(24.5) },
] };

const config = () => ({
  locale: t({ en: 'en-gb', es: 'es', ca: 'ca', ja: 'ja', zh: 'zh-Hans', ar: 'ar',
    pt: 'pt-BR', fr: 'fr', de: 'de', it: 'it' }),
  colorPalette, comics,
  layout: { layoutType: 'single' }, // the cover; the inside page is a section in four columns
  // The pull-out is a tabloid sheet folded once more: 230 × 310 mm.
  page: { sizePreset: 'custom', width: mm(230), height: mm(310), dpi: 150,
    backgroundColor: col('paper'),
    margins: { top: mm(MARGIN.top), bottom: mm(MARGIN.bottom), left: mm(MARGIN.side),
      right: mm(MARGIN.side) } },
  bodyText: { fontFamily: TEXT, fontSize: pt(CJK ? 8.5 : 9), lineHeight: pt(LEAD),
    color: col('ink'), boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    textAlign: 'justify', firstLineIndent: CJK ? em(1) : mm(3), indentAfterHeading: false,
    hyphenation: { enabled: true }, optimalLineBreaking: true,
    avoidWidows: true, avoidOrphans: true, avoidRunts: true },
  headings: { fontFamily: TEXT, fontWeight: 700, color: col('ink'),
    levels: [
      // parity 'any': a headline that opens a page takes the next one, on either side.
      { level: 1, span: 'page', fontSize: pt(28), lineHeight: pt(32), marginTop: pt(0),
        marginBottom: pt(LEAD * 0.5), breakBefore: { enabled: true, parity: 'any' } },
      { level: 2, fontFamily: LABEL, fontSize: pt(12), lineHeight: pt(LEAD),
        marginTop: pt(LEAD), marginBottom: pt(0) },
      { level: 3, fontFamily: LABEL, fontSize: pt(9.5), lineHeight: pt(LEAD),
        marginTop: pt(LEAD), marginBottom: pt(0) },
    ] },
  // An H1 opens the inside page, and its style turns that page into four columns.
  headingStyles: [{ id: 'inside', layout }],
  paragraphStyles: [
    { id: 'contents', fontFamily: LABEL, fontSize: pt(14), lineHeight: pt(LEAD * 1.5),
      textAlign: 'left', firstLineIndent: pt(0), spaceBetween: pt(LEAD * 0.5) },
    { id: 'byline', ...label(8.5, { color: col('muted') }), textAlign: 'left',
      firstLineIndent: pt(0), marginBottom: pt(LEAD * 0.5) },
    { id: 'flush', firstLineIndent: pt(0), textAlign: 'left' }, // letters, ragged
    { id: 'imprint', ...label(7, { color: col('muted'), fontWeight: 400 }), textAlign: 'left',
      firstLineIndent: pt(0), marginTop: pt(LEAD) },
  ],
  calloutStyles: [{ id: 'ad', background: col('tint'), keepTogether: true,
    stripe: { enabled: true, side: 'top', width: pt(2.5), color: col('accent') },
    padding: { top: mm(3), right: mm(4), bottom: mm(4), left: mm(4) },
    titleStyle: { ...label(7.5, { color: col('muted') }), gap: mm(2) }, // "Advertisement"
    body: { fontFamily: LABEL, fontSize: pt(11), lineHeight: pt(LEAD * 1.2), textAlign: 'left',
      firstLineIndent: pt(0), paragraphSpacing: true } }],
  header,
  footer: { elements: [] },
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
Esempio Markdown · 105 righe · content.it.md
title: "La Gazzetta di Corrington"
subtitle: "Pip e Otto compiono dieci anni · Lettere dalla banchisa"
publishDate: "Sabato 17 ottobre 2026"
---

:::strip{split="55 / * [40 | *]" height=210mm}
::panel{art=po5}
caption{at=top-start}: PIP E OTTO · Domenica sulla banchisa
pip: Otto, hai una panetteria. Perché peschi?
otto: Il pane non si dibatte mai.
::panel{art=po6}
pip: Guarda! La cena!
fish{whisper}: Rimettimi in acqua.
::panel{art=po7}
sfx{at="62% 72%"}: SPLASH
pip{shout}: AH! È proprio il tuo numero!
otto: Mmh. E quasi nuovo.
:::

:::paragraphs{style="contents"}
**In questo numero:** Pip e Otto compiono dieci anni. Ines Barlow racconta un decennio di cornetti, pesci e un papillon.

**Lettere dalla banchisa:** le vostre domande, le risposte di Otto. Entrambe a pagina 2.

**Domenica prossima:** Otto impara a pattinare.
:::

# Dieci inverni sulla banchisa {style="inside"}

:::paragraphs{style="byline"}
Di Ruth Okafor · Cultura
:::

Ines Barlow disegna un pinguino e un tricheco ogni mattina, dal lunedì al venerdì, al tavolo della cucina di casa sua in Saltmarsh Lane, e lo fa da dieci anni. *Pip e Otto* è uscito per la prima volta sulla Gazzetta il 17 ottobre 2016, schiacciato sotto il cruciverba. Oggi esce su undici giornali, in sei lingue, e sta ancora in quattro vignette quadrate.

«La regola è che la battuta deve arrivare nella quarta vignetta, non prima», dice Barlow. «Se Otto fa ridere già nella seconda, ho sprecato la striscia». Pip è piccolo, educato e ha sempre fame. Otto gestisce una panetteria su una banchisa, va al lavoro con il papillon e non ha mai dato una risposta diretta. I lettori scrivono a tutti e due. Quasi tutte le lettere sono per Otto.

Da bambina Barlow abitava sopra il forno dei suoi genitori, in Harrow Road, e da lì vengono i cornetti. Il pinguino è arrivato dopo, da una cartolina che la nonna le aveva spedito da Città del Capo. «Ho disegnato Pip sul retro di un blocchetto delle ordinazioni a nove anni. Aveva già la sciarpa. Per Otto mi ci sono voluti altri vent’anni».

Nell’estate del 2016 ha mandato le prime sei strisce alla Gazzetta, con una lettera di accompagnamento di una riga. Martin Fry, allora responsabile dei fumetti, le ha pubblicate in prova per un mese. La prova non è mai finita. Fry, oggi in pensione, riceve ancora la striscia per posta con un giorno di anticipo. «Mi dice quando una battuta è debole», racconta Barlow. «Di solito ha ragione».

Il lavoro comincia il lunedì con cinque schizzi a matita su fogli A4, quattro vignette per foglio. Il mercoledì sono già inchiostrati e colorati. I disegni arrivano al giornale senza una parola; il testo va a parte, in una breve sceneggiatura: chi parla, in quale vignetta e che cosa dice. Un’onomatopea ha una riga tutta sua.

L’abitudine è nata nel 2019, con l’edizione francese. «Fare a mano il lettering della stessa striscia due volte mi costava una settimana», dice. «Ora ogni giornale compone il testo nella sua lingua e i balloon gli vengono disegnati intorno». I giornali italiani pubblicano *Appena sfornato!*; l’edizione giapponese dispone i balloon in colonne verticali e legge le vignette da destra a sinistra, come quella araba. I disegni non cambiano mai.

La striscia della domenica è l’eccezione alla regola delle quattro vignette. Occupa mezza pagina, a colori, e Barlow la tratta come un racconto breve: tre vignette, una battuta più lenta e, quasi sempre, un pesce. Quella di questa settimana è in copertina.

E adesso, che cosa li aspetta? «Otto imparerà a pattinare», risponde Barlow. «E non gli piacerà affatto».

## Pip e Otto in cifre

:::paragraphs{style="flush"}
**2.516** strisce quotidiane da ottobre 2016. **520** mezze pagine della domenica. **11** giornali, **6** lingue. **1** papillon.
:::

## Lettere dalla banchisa

:::paragraphs{style="flush"}
**Caro Otto,** mio figlio vuole sapere perché a un tricheco serve il papillon. — *Grace, Abbotsford*
:::

**Otto risponde:** Un fornaio che non si veste bene per lavorare sforna solo pane piatto.

:::paragraphs{style="flush"}
**Caro Pip,** hai mai finito un cornetto intero? — *Tomasz, 8 anni, Riverside*
:::

**Pip risponde:** Una volta. Ci ho messo due giorni e Otto me l’ha fatto pagare due volte.

:::paragraphs{style="flush"}
**Caro Otto,** la panetteria sulla banchisa esiste davvero? Vorrei visitarla. — *Sig.ra D. Keane, Harrow*
:::

**Otto risponde:** Sì. Si sposta. Porti un cappotto.

:::paragraphs{style="flush"}
**Cara Ines Barlow,** Pip crescerà mai? — *Sam, Brook Lane*
:::

**Ines Barlow risponde:** Cresce un po’ ogni inverno. Non se ne accorge.

:::paragraphs{style="flush"}
Scrivete a Pip e Otto presso la Gazzetta, 12 Bridge Street, Corrington, o per email. Le lettere potranno essere accorciate.
:::

:::callout{type="ad" title="Pubblicità"}
**Dieci inverni sulla banchisa.** Tutte le strisce domenicali di Pip e Otto dei primi dieci anni, in un solo volume. 240 pagine a colori, 18 sterline nel negozio della Gazzetta e in tutte le buone librerie.
:::

:::paragraphs{style="imprint"}
Composto in Newsreader e Archivo Narrow; lettering in Comic Neue e Bangers (SIL OFL). Immagini generate con modelli di diffusione.
:::

:::strip{split="* | * | * | *" span=page}
::panel{art=po1}
pip: Buongiorno, Otto! Un cornetto, per favore.
otto: Arriva subito!
::panel{art=po2}
otto: Appena sfornato!
::panel{art=po3}
pip: Ne hai uno più piccolo?
::panel{art=po4}
sfx: GNAM
otto: Ecco. Più piccolo.
:::
`; // content.<lang>.md, inlined by the Cookbook

// #region art: the seven pictures: safe area, speakers' anchors and avoid zones
// From the art manifest; fractions of each picture, the same in every language.
const face = (x, y, width, height) => ({ x, y, width, height });
const ART = {
  po1: { width: 1024, height: 1024, safeArea: face(0.11, 0.22, 0.71, 0.45),
    anchors: [{ id: 'pip', x: 0.27, y: 0.58, face: face(0.11, 0.44, 0.22, 0.2) },
      { id: 'otto', x: 0.67, y: 0.37, face: face(0.56, 0.23, 0.24, 0.22) }] },
  po2: { width: 1024, height: 1024, safeArea: face(0.07, 0.14, 0.79, 0.56),
    anchors: [{ id: 'pip', x: 0.23, y: 0.62, face: face(0.07, 0.5, 0.22, 0.18) },
      { id: 'otto', x: 0.75, y: 0.31, face: face(0.52, 0.14, 0.33, 0.22) }],
    avoid: [face(0.28, 0.17, 0.38, 0.39)] },
  po3: { width: 1024, height: 1024, safeArea: face(0.03, 0.18, 0.72, 0.56),
    anchors: [{ id: 'pip', x: 0.275, y: 0.36, face: face(0.1, 0.19, 0.25, 0.21) }],
    avoid: [face(0.34, 0.41, 0.64, 0.41)] },
  po4: { width: 1024, height: 1024, safeArea: face(0.07, 0.19, 0.84, 0.53),
    anchors: [{ id: 'pip', x: 0.23, y: 0.61, face: face(0.07, 0.48, 0.22, 0.18) },
      { id: 'otto', x: 0.69, y: 0.36, face: face(0.53, 0.19, 0.39, 0.23) }],
    avoid: [face(0.31, 0.63, 0.05, 0.08), face(0.39, 0.32, 0.29, 0.18)] },
  po5: { width: 1400, height: 600, safeArea: face(0.16, 0.17, 0.6, 0.66),
    anchors: [{ id: 'pip', x: 0.345, y: 0.53, face: face(0.29, 0.4, 0.09, 0.18) },
      { id: 'otto', x: 0.625, y: 0.33, face: face(0.58, 0.17, 0.12, 0.23) }] },
  po6: { width: 1152, height: 1152, safeArea: face(0.3, 0.21, 0.43, 0.35),
    anchors: [{ id: 'pip', x: 0.46, y: 0.39, face: face(0.35, 0.25, 0.2, 0.18) },
      { id: 'fish', x: 0.66, y: 0.46, face: face(0.64, 0.41, 0.07, 0.12) }] },
  po7: { width: 1400, height: 933, safeArea: face(0.07, 0.15, 0.81, 0.65),
    anchors: [{ id: 'pip', x: 0.195, y: 0.64, face: face(0.1, 0.56, 0.15, 0.14) },
      { id: 'otto', x: 0.795, y: 0.35, face: face(0.7, 0.18, 0.18, 0.22) },
      { id: 'sfx', x: 0.62, y: 0.7 }],
    avoid: [face(0.44, 0.3, 0.15, 0.32)] },
};
const ALT = {
  po1: t({ en: 'Pip the penguin waddles into Otto the walrus’s tiny bakery, waving.',
    es: 'Pip, el pingüino, entra saludando en la pequeña panadería de Otto, la morsa.',
    ca: 'En Pip, el pingüí, entra saludant a la petita fleca de l’Otto, la morsa.',
    zh: '企鹅皮普摇摇摆摆走进海象奥托的小面包店，挥着手。',
    ar: 'البطريق بيب يدخل مخبز الفظّ أوتو الصغير وهو يلوّح.',
    ja: 'ペンギンのピップが手を振りながら、セイウチのオットーの小さなパン屋に入ってくる。',
    pt: 'O pinguim Pip entra acenando na padariazinha da morsa Otto.',
    fr: 'Pip le manchot entre en saluant de la main dans la petite boulangerie d’Otto le morse.',
    de: 'Der Pinguin Pip watschelt winkend in die kleine Bäckerei des Walrosses Otto.',
    it: 'Il pinguino Pip entra salutando con la mano nella piccola panetteria del tricheco '
      + 'Otto.' }),
  po2: t({ en: 'Otto proudly holds up a croissant as big as Pip.',
    es: 'Otto enseña orgulloso un cruasán tan grande como Pip.',
    ca: 'L’Otto ensenya orgullós un croissant tan gran com en Pip.',
    zh: '奥托得意地举起一个和皮普一样大的羊角面包。',
    ar: 'أوتو يرفع بفخر كرواسونًا بحجم بيب.',
    ja: 'オットーが、ピップと同じくらい大きなクロワッサンを得意げに持ち上げる。',
    pt: 'Otto ergue, todo orgulhoso, um croissant do tamanho do Pip.',
    fr: 'Otto brandit fièrement un croissant aussi grand que Pip.',
    de: 'Otto hält stolz ein Croissant hoch, so groß wie Pip.',
    it: 'Otto mostra tutto fiero un cornetto grande quanto Pip.' }),
  po3: t({ en: 'Pip stands on the counter next to the giant croissant, scratching his head.',
    es: 'Pip, de pie en el mostrador junto al cruasán gigante, se rasca la cabeza.',
    ca: 'En Pip, dret al taulell al costat del croissant gegant, es grata el cap.',
    zh: '皮普站在柜台上，挨着巨大的羊角面包挠头。',
    ar: 'بيب واقف على المنضدة بجانب الكرواسون العملاق يحكّ رأسه.',
    ja: 'ピップがカウンターの巨大なクロワッサンの横に立ち、頭をかいている。',
    pt: 'Pip, de pé no balcão ao lado do croissant gigante, coça a cabeça.',
    fr: 'Pip, debout sur le comptoir à côté du croissant géant, se gratte la tête.',
    de: 'Pip steht auf der Ladentheke neben dem Riesencroissant und kratzt sich am Kopf.',
    it: 'Pip, in piedi sul bancone accanto al cornetto gigante, si gratta la testa.' }),
  po4: t({ en: 'Otto munches the big half of the croissant; Pip holds a tiny end piece.',
    es: 'Otto se come la mitad grande del cruasán; Pip sostiene una punta diminuta.',
    ca: 'L’Otto es menja la meitat gran del croissant; en Pip aguanta una punta minúscula.',
    zh: '奥托大口吃着大半个羊角面包；皮普手里拿着一小截面包尖。',
    ar: 'أوتو يلتهم النصف الكبير من الكرواسون، وبيب يمسك طرفًا صغيرًا.',
    ja: 'オットーがクロワッサンの大きいほうをほおばり、ピップは小さな端っこを持っている。',
    pt: 'Otto devora a metade grande do croissant; Pip segura uma pontinha.',
    fr: 'Otto dévore la grosse moitié du croissant ; Pip tient un minuscule bout.',
    de: 'Otto mampft die große Hälfte des Croissants; Pip hält ein winziges Endstück.',
    it: 'Otto divora la metà grande del cornetto; Pip tiene in mano una punta minuscola.' }),
  po5: t({ en: 'Pip and Otto fish through a hole in an ice floe beside a tiny bakery hut.',
    es: 'Pip y Otto pescan por un agujero en un témpano, junto a una caseta de panadería.',
    ca: 'En Pip i l’Otto pesquen per un forat en un glaç, al costat d’una caseta de fleca.',
    zh: '皮普和奥托在浮冰的冰洞里钓鱼，旁边是一间小面包屋。',
    ar: 'بيب وأوتو يصطادان من ثقب في جليد طافٍ بجانب كوخ مخبز صغير.',
    ja: '流氷の穴でピップとオットーが釣りをしている。そばに小さなパン屋の小屋。',
    pt: 'Pip e Otto pescam num buraco do bloco de gelo, ao lado de uma padariazinha.',
    fr: 'Pip et Otto pêchent par un trou dans la banquise, à côté d’une petite cabane de '
      + 'boulangerie.',
    de: 'Pip und Otto angeln durch ein Loch in einer Eisscholle, neben einer winzigen '
      + 'Bäckerhütte.',
    it: 'Pip e Otto pescano da un buco nella banchisa, accanto a una casetta che fa da '
      + 'panetteria.' }),
  po6: t({ en: 'Pip proudly holds up a tiny, unimpressed fish.',
    es: 'Pip levanta orgulloso un pez diminuto y nada impresionado.',
    ca: 'En Pip aixeca orgullós un peix minúscul i gens impressionat.',
    zh: '皮普得意地举起一条小小的、一脸不屑的鱼。',
    ar: 'بيب يرفع بفخر سمكة صغيرة لا يبدو عليها أي إعجاب.',
    ja: 'ピップが、少しもうれしそうでない小さな魚を得意げに持ち上げる。',
    pt: 'Pip ergue, todo orgulhoso, um peixinho nada impressionado.',
    fr: 'Pip brandit fièrement un poisson minuscule, pas impressionné du tout.',
    de: 'Pip hält stolz einen winzigen Fisch hoch, der wenig beeindruckt aussieht.',
    it: 'Pip mostra tutto fiero un pesciolino minuscolo, per niente impressionato.' }),
  po7: t({ en: 'Otto reels in a soggy boot; Pip has fallen on his back laughing.',
    es: 'Otto saca del agua una bota empapada; Pip se ha caído de espaldas de la risa.',
    ca: 'L’Otto treu de l’aigua una bota xopa; en Pip ha caigut d’esquena de riure.',
    zh: '奥托钓上来一只湿透的靴子；皮普笑得仰面摔倒。',
    ar: 'أوتو يسحب حذاءً مبتلًا، وبيب سقط على ظهره من الضحك.',
    ja: 'オットーがずぶぬれの長靴を釣り上げ、ピップは笑いころげてあおむけに倒れている。',
    pt: 'Otto puxa uma bota encharcada; Pip caiu de costas de tanto rir.',
    fr: 'Otto remonte une botte détrempée ; Pip est tombé à la renverse de rire.',
    de: 'Otto holt einen triefenden Stiefel ein; Pip ist vor Lachen auf den Rücken gefallen.',
    it: 'Otto tira su uno stivale fradicio; Pip è caduto all’indietro dal ridere.' }),
};
// #endregion

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
// Every face of the six editions; each edition loads the latin files of all of them and the
// Chinese, Japanese or Arabic files of its own.
const FONTS = {
  Newsreader: ['400', '400i', '700'],
  'Archivo Narrow': ['400', '700'],
  'Comic Neue': ['400', '400i', '700', '700i'],
  Bangers: ['400'],
  'Noto Serif SC': ['400', '700'],
  'Noto Sans SC': ['400', '700'],
  'ZCOOL KuaiLe': ['400'],
  'ZCOOL QingKe HuangYou': ['400'],
  'Noto Serif JP': ['400', '700'],
  'Noto Sans JP': ['400', '700'],
  'Zen Antique': ['400'],
  'Dela Gothic One': ['400'],
  'Noto Naskh Arabic': ['400', '700'],
  'Noto Kufi Arabic': ['400', '700'],
  'Playpen Sans Arabic': ['400', '700'],
  Lalezar: ['400'],
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
const faces = Object.fromEntries([TEXT, LABEL, LETTERING, SFX].map((f) => [f, FONTS[f]]));
await loadFonts(FONTS, markdown);
await loadCjkFonts(faces, markdown);
await loadArabicFonts(faces, markdown);
await loadComicFonts({ [LETTERING]: FONTS[LETTERING], [SFX]: FONTS[SFX] }, markdown);
const panel = (id, url) => comicPanel(id, url, { ...ART[id], alt: ALT[id] });
const resources = await Promise.all([
  panel('po1', asset('po1.jpg')), panel('po2', asset('po2.jpg')), panel('po3', asset('po3.jpg')),
  panel('po4', asset('po4.jpg')), panel('po5', asset('po5.jpg')), panel('po6', asset('po6.jpg')),
  panel('po7', asset('po7.jpg')),
]);
const doc = await withLoadedFonts(() => buildDocument({ markdown, resources }, config()),
  { ...kitFonts(FONTS), text: markdown });
showBook(doc, { title: t({ en: 'A daily strip and a Sunday half page in the newspaper',
  es: 'Una tira diaria y media página dominical en el periódico',
  pt: 'Uma tirinha diária e meia página de domingo no jornal',
  fr: 'Un strip quotidien et une demi-page du dimanche dans le journal',
  de: 'Ein Tagesstrip und eine halbe Sonntagsseite in der Zeitung',
  it: 'Una striscia quotidiana e mezza pagina della domenica sul giornale' }) });
offerPdf(() => renderToPdf(doc, { fontProvider: comicPdfProvider, resourceBytes: imageBytes }),
  `${RECIPE}.pdf`);

Kit · core, fonts, viewer, pdf, images, cjk, arabic, comics: uguale in ogni ricetta · 740 righe
// ─── 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 ───────────────────────────────────────────────────────────────────────