# Eine Actionseite mit schrägen Zwischenräumen

> Die Seite, die ein Kendo-Finale entscheidet: schräge Zwischenräume (40~55) in der Aufteilung, ein rahmenloses Trefferpanel, ドン japanisch mit Übersetzung.

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

## Kurz gesagt

Eine Kampfseite aus einem japanischen Comic mit schrägen Zwischenräumen zwischen den Panels, sodass sich die Handlung zu neigen scheint, und dem großen japanischen Geräusch des Treffers an seinem Platz, mit kleiner Übersetzung daneben.

## Was Sie setzen

Die Seite, auf der das Kendo-Finale entschieden wird, aus demselben Manga wie [das Rezept von rechts nach links](https://postext.dev/de/cookbook/manga-right-to-left.md), in zwei Ausgaben nebeneinander: das japanische Original und sein Lettering in der Sprache dieser Seite (Englisch auf der japanischen Seite). Vier Reihen: die Halle, Hanas Augen durch das Gitter ihres Helms, der Schlagabtausch und die Reaktionen. Die dritte Reihe wird von einem geneigten Zwischenraum geteilt, sodass der Stoß der Gegnerin und Hanas Konter aufeinander zuzustürzen scheinen; die vierte neigt sich in die andere Richtung und bremst die Seite. Hanas Schlag hat überhaupt keinen Rahmen, und sein Soundeffekt, ドン, steht in einer kräftigen japanischen Grotesk, die jede Ausgabe beibehält, in den übersetzten Seiten mit einer kleinen Übersetzung darunter.

**Dieses Rezept beantwortet:**

- Wie neige ich die Zwischenräume zwischen Panels für eine Actionszene im Comic?
- Wie lettere ich Soundeffekte über die Zeichnung?

## Die kurze Antwort

```js
// script.js, Zeilen 46–64
// The page is split in content.<lang>.md: `* [40~55 | *]` runs the gutter of the third
// tier from 40 % at the top to 55 % at the bottom, so both panels lean into the strike,
// and `24 [58~64 | *]` tilts the last tier the other way. The panel that lands the blow
// is drawn with `border=none`: no frame, so its speed lines run straight to the gutter.
// ドン keeps its Japanese face in every edition (`font=` on the line);
// the translations add a small subtitle under it, the way licensed manga gloss a drawn
// sound effect instead of redrawing it.
const comics = (lang) => ({
  artDirection: 'rtl', // drawn for right-to-left reading: slants and order mirror with it
  mirrorArt: false,
  gutter: { horizontal: mm(4), vertical: mm(2.5) }, // a slanted gutter keeps its width
  panel: { borderWidth: pt(1.1), borderColor: col('ink'), background: col('paper') },
  lettering: {
    fontFamily: EDITIONS[lang].faces[0], color: col('ink'),
    fontSize: pt(['ja', 'zh'].includes(lang) ? 8.5 : 7.5),
    writingMode: lang === 'zh' ? 'vertical' : 'auto',
  },
  balloonStyles: balloons(),
});
```

## Zutaten

**Zeigt**

- [Panel-Aufteilung](https://postext.dev/de/docs/comics.md#die-seite-aufteilen): split= schneidet die Seite mit einem kurzen Ausdruck in Panels: mit / gestapelte Streifen, mit | nebeneinanderliegende Panels, Größen in Prozent, schräge Zwischenräume mit 30~40 und Klammern, um eine Zelle erneut zu teilen.
- [Soundeffekte](https://postext.dev/de/docs/comics.md#sprechblasenstile): Eine sfx-Zeile lettert ein Geräusch ohne Sprechblase über das Bild: eine Displayschrift je Sprache (Bangers, Dela Gothic One für Japanisch), ein weißer Halo und at=, rotate= und size=, um es zu platzieren, zu neigen und zu skalieren.

**Verwendet außerdem**

- [Leserichtung und Manga-Reihenfolge](https://postext.dev/de/docs/comics.md#leserichtung)
- [Chinesische, japanische und koreanische Schriften](https://postext.dev/de/docs/configuration-programmatic-usage.md#chinesische-japanische-und-koreanische-schriften)
- [Panelbilder und Zuschnitte](https://postext.dev/de/docs/comics.md#panels-und-bilder)
- [Panelrahmen und Zwischenräume](https://postext.dev/de/docs/comics.md#panels-und-bilder)
- [Neues Lettering in anderen Sprachen](https://postext.dev/de/docs/comics.md#lettering)
- [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)
- [Sprechblasenformate](https://postext.dev/de/docs/comics.md#sprechblasenstile)
- [Senkrechter Text](https://postext.dev/de/docs/configuration-page-layout.md#vertikale-schrift)
- [Rechts gebundene Bücher](https://postext.dev/de/docs/configuration-page-layout.md#bindung)
- [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)
- [Chinesischer Zeilenumbruch](https://postext.dev/de/docs/configuration-east-asian.md#ostasiatische-typografie)
- [Papierfarbe](https://postext.dev/de/docs/configuration-page-layout.md#seite)
- [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)
- [Hoch- und Tiefstellung](https://postext.dev/de/docs/document-format.md#inline-formatierung)

**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), [`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), `loadVerticalAlternates`, [`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**

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

## Zubereitung

### 1 · Den Zwischenraum in der Aufteilung neigen

Der Code steht oben in [der kurzen Antwort](https://postext.dev/de/cookbook/manga-action-slants.md#die-kurze-antwort). Eine Größe in der Form `40~55` gibt dem fernen Rand einer Zelle zwei Positionen: 40 % der Reihe oben, 55 % unten. Die Zellen bleiben konvexe Polygone, der Zwischenraum behält seine quer zur Neigung gemessene Breite, und bei Leserichtung von rechts nach links spiegelt sich die Neigung mit der Reihenfolge, sodass die erste Zelle weiterhin die rechte ist. Die Aufteilung der Seite ist `24 / 18 / * [40~55 | *] / 24 [58~64 | *]`: zwei gerade Reihen, die den Moment vorbereiten, eine schräge für den Treffer und eine letzte, die sich in die andere Richtung neigt ([Seitenaufteilung](https://postext.dev/de/docs/comics.md#die-seite-aufteilen)).

### 2 · In Explosionsblasen schreien und die Effekte ausbrechen lassen

```js
// script.js, Zeilen 68–76
const balloons = () => [
  { id: 'speech', fill: col('paper'), stroke: col('ink'), strokeWidth: pt(0.6), roundness: 2 },
  { id: 'shout', fill: col('paper'), stroke: col('ink'), burstPoints: 18, burstDepth: 0.3 },
  { id: 'thought', fill: col('paper'), stroke: col('ink') },
  { id: 'inner', fill: col('tone'), stroke: col('tone'), strokeWidth: pt(0), italic: false },
  { id: 'caption', fill: col('paper'), stroke: col('ink'), strokeWidth: pt(0.5) },
  // white-edged on the art
  { id: 'sfx', color: col('ink'), haloColor: col('paper'), halo: pt(2.2) },
];
```

Die Kiai beider Kämpferinnen sind Schreie: eine Explosionsblase mit 18 Zacken, tiefer als der Standard. Die Soundeffekte haben überhaupt keine Blase; sie sind mit einem weißen Rand von 2,2 pt aufs Bild gelettert, damit sie über den Speedlines lesbar bleiben. Das Panel des Schlags lautet `::panel{art=strike border=none}`, und sein ドン trägt `break`, darf also den schrägen Zwischenraum ins Nachbarpanel überqueren, so wie ein Letterer ein Geräusch über den Rahmen hinausquellen lässt ([Soundeffekte](https://postext.dev/de/docs/comics.md#sprechblasenstile)).

### 3 · ドン japanisch lassen und untertiteln

```js
// script.js, Zeilen 301–320
const SFX = /^sfx(\{[^}\n]*\})?[ \t]*[:：](.*)$/gm; // sound effects: the second face sets them
async function loadEdition(lang) {
  const text = TEXT[lang];
  const [face, sfx] = EDITIONS[lang].faces;
  const faces = { [face]: FONTS[face], [sfx]: FONTS[sfx] };
  const effects = [...text.matchAll(SFX)];
  for (const [, attrs = '', words] of effects) { // ドン keeps its face in every language
    const family = /font="([^"]+)"/.exec(attrs)?.[1];
    if (!family) continue;
    faces[family] = FONTS[family];
    await loadCjkFonts({ [family]: FONTS[family] }, words, { vertical: true });
  }
  if (['ja', 'zh'].includes(lang)) { // CJK: only the files that hold these characters
    const own = effects.filter(([, attrs = '']) => !attrs.includes('font=')).map((m) => m[2]);
    await loadCjkFonts({ [face]: FONTS[face] }, text.replace(SFX, ''), { vertical: true });
    await loadCjkFonts({ [sfx]: FONTS[sfx] }, own.join(''), { vertical: true });
  }
  if (lang === 'ar') await loadArabicFonts(faces, text);
  await loadComicFonts(faces, text); // the bold and italic the faces do not ship
}
```

Im Manga gehören die Soundeffekte zur Zeichnung, und lizenzierte Ausgaben lassen sie meist an ihrem Platz und fügen daneben eine kleine Übersetzung hinzu. Das Skript macht es genauso: Jede Ausgabe hat die Zeile `sfx{… font="Dela Gothic One" break}: ドン`; die in Zeilen geletterten Ausgaben ergänzen darin `vertical`, damit ドン die Spalte behält, die es im Original hat, und setzen darunter einen zweiten, kleineren Effekt, WUMM oder WHAM. Weil die Schrift in der Zeile genannt wird, lädt jede Ausgabe die Dela Gothic One nur mit den Zeichen von ドン, gleich welche Lettering-Schrift sie selbst verwendet.

### 4 · Die Sicherheitsbereiche auf schräge Zellen abstimmen

```js
// script.js, Zeilen 188–297
const ART = { // fractions of the picture: the same in every language
  final: {
    alt: t({ en: 'The kendo final in a packed gym: two fighters cross swords among three referees.',
      es: 'La final en un pabellón lleno: dos rivales cruzan las espadas entre tres árbitros.',
      ca: 'La final en un pavelló ple: dos rivals creuen les espases entre tres àrbitres.',
      fr: 'La finale dans un gymnase comble : deux combattants croisent le sabre entre trois '
        + 'arbitres.',
      de: 'Das Kendo-Finale in einer vollen Halle: Zwei Kämpfer kreuzen zwischen drei '
        + 'Kampfrichtern die Schwerter.',
      it: 'La finale in una palestra gremita: due atleti incrociano le spade tra tre '
        + 'arbitri.',
      pt: 'A final num ginásio lotado: dois lutadores cruzam as espadas entre três árbitros.',
      zh: '座无虚席的体育馆里的决赛：两名选手在三名裁判之间交剑。',
      ar: 'النهائي في صالة ممتلئة: متباريان يتقاطع سيفاهما بين ثلاثة حكّام.',
      ja: '満員の体育館での決勝。3人の審判の間で2人が剣先を交える。' }),
  safeArea: { x: 0.22, y: 0.44, width: 0.56, height: 0.46 },
  anchors: [{ id: 'hana', x: 0.31, y: 0.51, head: { x: 0.31, y: 0.49 },
    face: { x: 0.28, y: 0.45, width: 0.07, height: 0.1 } },
  { id: 'rival', x: 0.68, y: 0.51, head: { x: 0.68, y: 0.49 },
    face: { x: 0.65, y: 0.46, width: 0.06, height: 0.09 } },
  { id: 'shinpan', x: 0.575, y: 0.585, head: { x: 0.575, y: 0.56 },
    face: { x: 0.56, y: 0.54, width: 0.03, height: 0.06 } }] },
  eyes: {
    alt: t({ en: "Hana's eyes through the bars of her helmet grille.",
      es: 'Los ojos de Hana tras las barras de la rejilla del casco.',
      ca: 'Els ulls de la Hana darrere les barres de la reixa del casc.',
      fr: 'Les yeux de Hana derrière les barreaux de la grille de son casque.',
      de: 'Hanas Augen hinter den Gitterstäben ihres Helms.',
      it: 'Gli occhi di Hana dietro le sbarre della grata dell’elmo.',
      pt: 'Os olhos de Hana atrás das barras da grade do capacete.',
      zh: '面罩铁栏后花的眼睛。',
      ar: 'عينا هانا خلف قضبان شبكة الخوذة.',
      ja: '面金の向こうの花の目。' }),
  safeArea: { x: 0.22, y: 0.26, width: 0.57, height: 0.38 },
  anchors: [{ id: 'hana', x: 0.5, y: 0.62, head: { x: 0.5, y: 0.4 },
    face: { x: 0.2, y: 0.3, width: 0.6, height: 0.3 } }] },
  lunge: {
    alt: t({ en: 'The opponent lunges at the viewer, speed lines all round.',
      es: 'El rival se lanza hacia el lector entre líneas cinéticas.',
      ca: 'El rival es llança cap al lector entre línies cinètiques.',
      fr: 'L’adversaire se jette vers le lecteur, entouré de lignes de vitesse.',
      de: 'Der Gegner stürzt auf den Betrachter zu, ringsum Bewegungslinien.',
      it: 'L’avversario si lancia verso chi guarda, tra linee cinetiche.',
      pt: 'O adversário avança contra o leitor entre linhas de velocidade.',
      zh: '对手在速度线中朝读者猛刺过来。',
      ar: 'الخصم يندفع نحو القارئ وسط خطوط السرعة.',
      ja: '集中線の中、こちらへ突いてくる相手。' }),
  safeArea: { x: 0.03, y: 0.01, width: 0.8, height: 0.61 },
  avoid: [{ x: 0.02, y: 0.42, width: 0.23, height: 0.18 }],
  anchors: [{ id: 'rival', x: 0.7, y: 0.2, head: { x: 0.7, y: 0.14 },
    face: { x: 0.63, y: 0.02, width: 0.15, height: 0.24 } }] },
  strike: {
    alt: t({ en: "Hana leaps and strikes the top of the opponent's helmet; the sword bends.",
      es: 'Hana salta y golpea la parte alta del casco del rival; la espada se dobla.',
      ca: 'La Hana salta i colpeja la part alta del casc del rival; l’espasa es doblega.',
      fr: 'Hana bondit et frappe le sommet du casque adverse ; le sabre plie.',
      de: 'Hana springt und trifft den Gegner oben auf den Helm; das Schwert biegt sich.',
      it: 'Hana salta e colpisce la sommità dell’elmo avversario; la spada si piega.',
      pt: 'Hana salta e acerta o alto do capacete do adversário; a espada se curva.',
      zh: '花跃起击中对手面罩顶部，竹剑弯了起来。',
      ar: 'هانا تقفز وتضرب أعلى خوذة الخصم؛ ينثني السيف.',
      ja: '跳び込んで相手の面を打つ花。竹刀がしなる。' }),
  safeArea: { x: 0.36, y: 0.06, width: 0.42, height: 0.77 },
  avoid: [{ x: 0.52, y: 0.48, width: 0.13, height: 0.16 }],
  anchors: [{ id: 'hana', x: 0.43, y: 0.25, head: { x: 0.43, y: 0.18 },
    face: { x: 0.38, y: 0.07, width: 0.1, height: 0.25 } }, { id: 'sfx', x: 0.75, y: 0.25 }] },
  stands: {
    alt: t({ en: 'Sora jumps up in the stands, fists raised, shouting.',
      es: 'Sora salta en la grada con los puños en alto, gritando.',
      ca: 'En Sora salta a la graderia amb els punys enlaire, cridant.',
      fr: 'Sora bondit dans les gradins, poings levés, en criant.',
      de: 'Sora springt auf der Tribüne auf, die Fäuste erhoben, und schreit.',
      it: 'Sora salta sugli spalti con i pugni alzati, gridando.',
      pt: 'Sora pula na arquibancada de punhos erguidos, gritando.',
      zh: '空在看台上跳起来，举着拳头大喊。',
      ar: 'سورا يقفز في المدرّجات رافعًا قبضتيه وهو يصيح.',
      ja: '観客席で拳を突き上げて叫ぶ空。' }),
  safeArea: { x: 0.08, y: 0.07, width: 0.69, height: 0.44 },
  avoid: [{ x: 0.08, y: 0.06, width: 0.12, height: 0.1 },
    { x: 0.64, y: 0.35, width: 0.1, height: 0.12 }],
  anchors: [{ id: 'sora', x: 0.51, y: 0.44, head: { x: 0.5, y: 0.37 },
    face: { x: 0.4, y: 0.3, width: 0.22, height: 0.2 } }] },
  coach: {
    alt: t({ en: 'Mori, arms crossed and eyes closed; behind him the referees raise their flags.',
      es: 'Mori, de brazos cruzados y ojos cerrados; detrás, los árbitros alzan las banderas.',
      ca: 'En Mori, de braços plegats i ulls tancats; darrere, els àrbitres alcen les banderes.',
      fr: 'Mori, bras croisés et yeux fermés ; derrière lui, les arbitres lèvent leurs '
        + 'drapeaux.',
      de: 'Mori, Arme verschränkt, Augen geschlossen; hinter ihm heben die Kampfrichter '
        + 'die Fahnen.',
      it: 'Mori, braccia conserte e occhi chiusi; dietro di lui gli arbitri alzano le '
        + 'bandiere.',
      pt: 'Mori, de braços cruzados e olhos fechados; atrás, os árbitros erguem as bandeiras.',
      zh: '森老师抱着双臂、闭着眼；身后的裁判举起了旗子。',
      ar: 'موري عاقد الذراعين مغمض العينين، وخلفه يرفع الحكّام راياتهم.',
      ja: '腕を組み目を閉じる森先生。後ろで審判が旗を上げる。' }),
  safeArea: { x: 0.16, y: 0.1, width: 0.76, height: 0.53 },
  avoid: [{ x: 0.55, y: 0.18, width: 0.4, height: 0.17 }, // the referees' flags
    { x: 0.22, y: 0.47, width: 0.25, height: 0.21 }], // Mori’s folded arms: his pose
  anchors: [{ id: 'mori', x: 0.29, y: 0.31, head: { x: 0.29, y: 0.2 },
    face: { x: 0.22, y: 0.1, width: 0.14, height: 0.24 } }] },
};
const panels = () => Promise.all([
  comicPanel('final', asset('match-final.jpg'), ART.final),
  comicPanel('eyes', asset('match-eyes.jpg'), ART.eyes),
  comicPanel('lunge', asset('match-lunge.jpg'), ART.lunge),
  comicPanel('strike', asset('match-strike.jpg'), ART.strike),
  comicPanel('coach', asset('match-coach.jpg'), ART.coach),
  comicPanel('stands', asset('match-stands.jpg'), ART.stands),
]);
```

Eine schräge Zelle ist an einem Ende breiter als am anderen, und das Bild muss sie ganz bedecken. Jeder Sicherheitsbereich ist auf das zugeschnitten, was das Panel braucht, die Augen für die Nahaufnahme des Gitters und Soras Oberkörper für den Jubel, sodass er in den breitesten Ausschnitt der Zelle passt und die Engine das Bild nie mit Balken einpassen muss.

### 5 · Das Original neben jede Ausgabe stellen

```js
// script.js, Zeilen 325–335
const FACING = LANG === 'ja' ? 'en' : LANG; // Japanese readers see the English edition
const TEXT = { ja: original, [FACING]: LANG === 'ja' ? english : markdown };
await loadFonts(FONTS, Object.values(TEXT).join('\n'));
const resources = await panels();
const build = async (lang) => { // the same pictures and page; this language's lettering
  await loadEdition(lang);
  return withLoadedFonts(() => buildDocument({ markdown: TEXT[lang], resources,
    continuation: { pageIndexOffset: lang === 'ja' ? 1 : 2 } }, edition(lang)),
    { ...kitFonts(FONTS), text: TEXT[lang] });
};
const docs = [await build('ja'), await build(FACING)];
```

Jede Sprache der Website lettert die Seite in ihrer eigenen Datei, und das japanische Original steht ihr auf der anderen Seite der Doppelseite gegenüber (die japanische Seite steht der englischen Ausgabe gegenüber). ドン bleibt in jeder Ausgabe, jede bringt ihren eigenen Untertitel mit (WUMM, WHAM, ZAS!, PÁ!, PAF !, SDENG!, 咚, بوم!), und die Neigungen bewegen sich nie.

## 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/manga-action-slants

### script.js

```js
// ═══ Postext Cookbook · Nº 150 · An action page with slanted gutters ═════════════════
// https://postext.dev/en/cookbook/manga-action-slants
// Code: MIT · Story: written for the recipe (CC BY 4.0) · Pictures: generated with diffusion models
// Fonts: Zen Antique, Comic Neue and six more (SIL OFL 1.1) · Needs postext ≥ 1.26.0
// The last page of a kendo final: slanted panels, a borderless strike, ドン kept in every edition.
import {
  buildDocument, withLoadedFonts, renderPageToCanvas, registerResourceImage, loadVerticalAlternates,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'de'; // @lang: this edition's language; the Japanese original faces it
const RECIPE = 'manga-action-slants';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: black ink on a warm white, one screen-tone grey
const palette = {
  ink: '#151413', // panel borders, balloon outlines, the lettering
  paper: '#fdfcf9', // the page and the balloons
  tone: '#e8e6e1', // the inner-voice box, a light screen tone
  muted: '#6f6b64',
  accent: '#a8322b', // the cover red (the Folio case in recipe.json)
};
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

// The engine's lettering and sound-effect faces per language (defaultComicFont and
// defaultComicSfxFont), written out so FONTS and the PDF know them.
const EDITIONS = {
  ja: { locale: 'ja', faces: ['Zen Antique', 'Dela Gothic One'] },
  en: { locale: 'en-us', faces: ['Comic Neue', 'Bangers'] },
  es: { locale: 'es', faces: ['Comic Neue', 'Bangers'] },
  ca: { locale: 'ca', faces: ['Comic Neue', 'Bangers'] },
  pt: { locale: 'pt-BR', faces: ['Comic Neue', 'Bangers'] },
  fr: { locale: 'fr', faces: ['Comic Neue', 'Bangers'] },
  de: { locale: 'de', faces: ['Comic Neue', 'Bangers'] },
  it: { locale: 'it', faces: ['Comic Neue', 'Bangers'] },
  zh: { locale: 'zh-Hans', faces: ['Noto Sans SC', 'ZCOOL KuaiLe'] },
  ar: { locale: 'ar', faces: ['Playpen Sans Arabic', 'Lalezar'] },
};

// #region answer: the slant is in the split; the impact is in the panel and the effect
// The page is split in content.<lang>.md: `* [40~55 | *]` runs the gutter of the third
// tier from 40 % at the top to 55 % at the bottom, so both panels lean into the strike,
// and `24 [58~64 | *]` tilts the last tier the other way. The panel that lands the blow
// is drawn with `border=none`: no frame, so its speed lines run straight to the gutter.
// ドン keeps its Japanese face in every edition (`font=` on the line);
// the translations add a small subtitle under it, the way licensed manga gloss a drawn
// sound effect instead of redrawing it.
const comics = (lang) => ({
  artDirection: 'rtl', // drawn for right-to-left reading: slants and order mirror with it
  mirrorArt: false,
  gutter: { horizontal: mm(4), vertical: mm(2.5) }, // a slanted gutter keeps its width
  panel: { borderWidth: pt(1.1), borderColor: col('ink'), background: col('paper') },
  lettering: {
    fontFamily: EDITIONS[lang].faces[0], color: col('ink'),
    fontSize: pt(['ja', 'zh'].includes(lang) ? 8.5 : 7.5),
    writingMode: lang === 'zh' ? 'vertical' : 'auto',
  },
  balloonStyles: balloons(),
});
// #endregion

// #region balloons: oval speech, a spiky shout, a grey box for the inner voice
const balloons = () => [
  { id: 'speech', fill: col('paper'), stroke: col('ink'), strokeWidth: pt(0.6), roundness: 2 },
  { id: 'shout', fill: col('paper'), stroke: col('ink'), burstPoints: 18, burstDepth: 0.3 },
  { id: 'thought', fill: col('paper'), stroke: col('ink') },
  { id: 'inner', fill: col('tone'), stroke: col('tone'), strokeWidth: pt(0), italic: false },
  { id: 'caption', fill: col('paper'), stroke: col('ink'), strokeWidth: pt(0.5) },
  // white-edged on the art
  { id: 'sfx', color: col('ink'), haloColor: col('paper'), halo: pt(2.2) },
];
// #endregion

const config = () => ({
  // Each edition's language, written out (gotcha: ja-locale-tag); the original is built
  // with 'ja' in every edition (edition('ja') below).
  locale: t({ ja: 'ja', en: 'en-us', es: 'es', ca: 'ca', zh: 'zh-Hans', ar: 'ar', pt: 'pt-BR',
    fr: 'fr', de: 'de', it: 'it' }),
  colorPalette,
  page: {
    sizePreset: 'custom', width: mm(128), height: mm(182), dpi: 150, // B6, a tankōbon
    binding: 'right', backgroundColor: col('paper'), // manga open from the right, in any language
    margins: { top: mm(13), bottom: mm(15), left: mm(11), right: mm(11), mirror: true },
  },
  bodyText: {
    fontFamily: 'Zen Antique', fontSize: pt(9), lineHeight: pt(15), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
  },
  headings: { fontFamily: 'Zen Antique', color: col('ink'),
    levels: [{ level: 1, breakBefore: { enabled: true, parity: 'any' } }] }, // the H1 break
  header: { elements: [] }, // comic pages are all panels: no running heads, no folios
  footer: { elements: [] },
  comics: comics(LANG),
});
// Another edition changes the language and the faces; the page and its slants stay.
const edition = (lang) => ({ ...config(), locale: EDITIONS[lang].locale, comics: comics(lang) });

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "Das Finale"
author: "Postext Cookbook"
---

:::page{split="24 / 18 / * [40~55 | *] / 24 [58~64 | *]"}
::panel{art=final}
caption: Das Finale.
shinpan: Hajime!
::panel{art=eyes}
hana{inner}: …Ich sehe es.
::panel{art=lunge}
sfx{rotate=-12}: STAMPF
rival{shout}: MEEEN!
::panel{art=strike border=none}
sfx{at="74% 30%" rotate=-8 size=2.6 font="Dela Gothic One" vertical break}: ドン
sfx{at="64% 80%" rotate=-8 size=0.9}: WUMM
hana{shout}: MEN!!
::panel{art=coach}
shinpan{tail=top}: Men! Punkt!
mori{thought}: …Hm. Nicht schlecht.
::panel{art=stands}
sora{shout}: Geschafft!!
:::
`; // content.<lang>.md: this edition's lettering
const original = String.raw`---
title: "決勝"
author: "Postext Cookbook"
---

:::page{split="24 / 18 / * [40~55 | *] / 24 [58~64 | *]"}
::panel{art=final}
caption: 決勝戦。
shinpan: 始め！
::panel{art=eyes}
hana{inner}: ……見える
::panel{art=lunge}
sfx{rotate=-12}: ダンッ
rival{shout}: メェェン！
::panel{art=strike border=none}
sfx{at="74% 30%" rotate=-8 size=2.6 font="Dela Gothic One" break}: ドン
hana{shout}: メン！！
::panel{art=coach}
shinpan{tail=top}: 面あり！
mori{thought}: ……ふん。悪くない
::panel{art=stands}
sora{shout break}: 決まったぁぁ！！
:::
`; // content.ja.md, the original, in every edition
const english = String.raw`---
title: "The Final"
author: "Postext Cookbook"
---

:::page{split="24 / 18 / * [40~55 | *] / 24 [58~64 | *]"}
::panel{art=final}
caption: The final.
shinpan: Hajime!
::panel{art=eyes}
hana{inner}: …I can see it.
::panel{art=lunge}
sfx{rotate=-12}: STOMP
rival{shout}: MEEEN!
::panel{art=strike border=none}
sfx{at="74% 30%" rotate=-8 size=2.6 font="Dela Gothic One" vertical break}: ドン
sfx{at="64% 80%" rotate=-8 size=0.9}: WHAM
hana{shout}: MEN!!
::panel{art=coach}
shinpan{tail=top}: Men! Point!
mori{thought}: …Hmph. Not bad.
::panel{art=stands}
sora{shout}: She did it!!
:::
`; // the Japanese edition faces the original with it
// The same panels and speaker ids in every file; only the words change.

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

// #region art: six panels drawn for the recipe, with each speaker's mouth, head and face marked
const ART = { // fractions of the picture: the same in every language
  final: {
    alt: t({ en: 'The kendo final in a packed gym: two fighters cross swords among three referees.',
      es: 'La final en un pabellón lleno: dos rivales cruzan las espadas entre tres árbitros.',
      ca: 'La final en un pavelló ple: dos rivals creuen les espases entre tres àrbitres.',
      fr: 'La finale dans un gymnase comble : deux combattants croisent le sabre entre trois '
        + 'arbitres.',
      de: 'Das Kendo-Finale in einer vollen Halle: Zwei Kämpfer kreuzen zwischen drei '
        + 'Kampfrichtern die Schwerter.',
      it: 'La finale in una palestra gremita: due atleti incrociano le spade tra tre '
        + 'arbitri.',
      pt: 'A final num ginásio lotado: dois lutadores cruzam as espadas entre três árbitros.',
      zh: '座无虚席的体育馆里的决赛：两名选手在三名裁判之间交剑。',
      ar: 'النهائي في صالة ممتلئة: متباريان يتقاطع سيفاهما بين ثلاثة حكّام.',
      ja: '満員の体育館での決勝。3人の審判の間で2人が剣先を交える。' }),
  safeArea: { x: 0.22, y: 0.44, width: 0.56, height: 0.46 },
  anchors: [{ id: 'hana', x: 0.31, y: 0.51, head: { x: 0.31, y: 0.49 },
    face: { x: 0.28, y: 0.45, width: 0.07, height: 0.1 } },
  { id: 'rival', x: 0.68, y: 0.51, head: { x: 0.68, y: 0.49 },
    face: { x: 0.65, y: 0.46, width: 0.06, height: 0.09 } },
  { id: 'shinpan', x: 0.575, y: 0.585, head: { x: 0.575, y: 0.56 },
    face: { x: 0.56, y: 0.54, width: 0.03, height: 0.06 } }] },
  eyes: {
    alt: t({ en: "Hana's eyes through the bars of her helmet grille.",
      es: 'Los ojos de Hana tras las barras de la rejilla del casco.',
      ca: 'Els ulls de la Hana darrere les barres de la reixa del casc.',
      fr: 'Les yeux de Hana derrière les barreaux de la grille de son casque.',
      de: 'Hanas Augen hinter den Gitterstäben ihres Helms.',
      it: 'Gli occhi di Hana dietro le sbarre della grata dell’elmo.',
      pt: 'Os olhos de Hana atrás das barras da grade do capacete.',
      zh: '面罩铁栏后花的眼睛。',
      ar: 'عينا هانا خلف قضبان شبكة الخوذة.',
      ja: '面金の向こうの花の目。' }),
  safeArea: { x: 0.22, y: 0.26, width: 0.57, height: 0.38 },
  anchors: [{ id: 'hana', x: 0.5, y: 0.62, head: { x: 0.5, y: 0.4 },
    face: { x: 0.2, y: 0.3, width: 0.6, height: 0.3 } }] },
  lunge: {
    alt: t({ en: 'The opponent lunges at the viewer, speed lines all round.',
      es: 'El rival se lanza hacia el lector entre líneas cinéticas.',
      ca: 'El rival es llança cap al lector entre línies cinètiques.',
      fr: 'L’adversaire se jette vers le lecteur, entouré de lignes de vitesse.',
      de: 'Der Gegner stürzt auf den Betrachter zu, ringsum Bewegungslinien.',
      it: 'L’avversario si lancia verso chi guarda, tra linee cinetiche.',
      pt: 'O adversário avança contra o leitor entre linhas de velocidade.',
      zh: '对手在速度线中朝读者猛刺过来。',
      ar: 'الخصم يندفع نحو القارئ وسط خطوط السرعة.',
      ja: '集中線の中、こちらへ突いてくる相手。' }),
  safeArea: { x: 0.03, y: 0.01, width: 0.8, height: 0.61 },
  avoid: [{ x: 0.02, y: 0.42, width: 0.23, height: 0.18 }],
  anchors: [{ id: 'rival', x: 0.7, y: 0.2, head: { x: 0.7, y: 0.14 },
    face: { x: 0.63, y: 0.02, width: 0.15, height: 0.24 } }] },
  strike: {
    alt: t({ en: "Hana leaps and strikes the top of the opponent's helmet; the sword bends.",
      es: 'Hana salta y golpea la parte alta del casco del rival; la espada se dobla.',
      ca: 'La Hana salta i colpeja la part alta del casc del rival; l’espasa es doblega.',
      fr: 'Hana bondit et frappe le sommet du casque adverse ; le sabre plie.',
      de: 'Hana springt und trifft den Gegner oben auf den Helm; das Schwert biegt sich.',
      it: 'Hana salta e colpisce la sommità dell’elmo avversario; la spada si piega.',
      pt: 'Hana salta e acerta o alto do capacete do adversário; a espada se curva.',
      zh: '花跃起击中对手面罩顶部，竹剑弯了起来。',
      ar: 'هانا تقفز وتضرب أعلى خوذة الخصم؛ ينثني السيف.',
      ja: '跳び込んで相手の面を打つ花。竹刀がしなる。' }),
  safeArea: { x: 0.36, y: 0.06, width: 0.42, height: 0.77 },
  avoid: [{ x: 0.52, y: 0.48, width: 0.13, height: 0.16 }],
  anchors: [{ id: 'hana', x: 0.43, y: 0.25, head: { x: 0.43, y: 0.18 },
    face: { x: 0.38, y: 0.07, width: 0.1, height: 0.25 } }, { id: 'sfx', x: 0.75, y: 0.25 }] },
  stands: {
    alt: t({ en: 'Sora jumps up in the stands, fists raised, shouting.',
      es: 'Sora salta en la grada con los puños en alto, gritando.',
      ca: 'En Sora salta a la graderia amb els punys enlaire, cridant.',
      fr: 'Sora bondit dans les gradins, poings levés, en criant.',
      de: 'Sora springt auf der Tribüne auf, die Fäuste erhoben, und schreit.',
      it: 'Sora salta sugli spalti con i pugni alzati, gridando.',
      pt: 'Sora pula na arquibancada de punhos erguidos, gritando.',
      zh: '空在看台上跳起来，举着拳头大喊。',
      ar: 'سورا يقفز في المدرّجات رافعًا قبضتيه وهو يصيح.',
      ja: '観客席で拳を突き上げて叫ぶ空。' }),
  safeArea: { x: 0.08, y: 0.07, width: 0.69, height: 0.44 },
  avoid: [{ x: 0.08, y: 0.06, width: 0.12, height: 0.1 },
    { x: 0.64, y: 0.35, width: 0.1, height: 0.12 }],
  anchors: [{ id: 'sora', x: 0.51, y: 0.44, head: { x: 0.5, y: 0.37 },
    face: { x: 0.4, y: 0.3, width: 0.22, height: 0.2 } }] },
  coach: {
    alt: t({ en: 'Mori, arms crossed and eyes closed; behind him the referees raise their flags.',
      es: 'Mori, de brazos cruzados y ojos cerrados; detrás, los árbitros alzan las banderas.',
      ca: 'En Mori, de braços plegats i ulls tancats; darrere, els àrbitres alcen les banderes.',
      fr: 'Mori, bras croisés et yeux fermés ; derrière lui, les arbitres lèvent leurs '
        + 'drapeaux.',
      de: 'Mori, Arme verschränkt, Augen geschlossen; hinter ihm heben die Kampfrichter '
        + 'die Fahnen.',
      it: 'Mori, braccia conserte e occhi chiusi; dietro di lui gli arbitri alzano le '
        + 'bandiere.',
      pt: 'Mori, de braços cruzados e olhos fechados; atrás, os árbitros erguem as bandeiras.',
      zh: '森老师抱着双臂、闭着眼；身后的裁判举起了旗子。',
      ar: 'موري عاقد الذراعين مغمض العينين، وخلفه يرفع الحكّام راياتهم.',
      ja: '腕を組み目を閉じる森先生。後ろで審判が旗を上げる。' }),
  safeArea: { x: 0.16, y: 0.1, width: 0.76, height: 0.53 },
  avoid: [{ x: 0.55, y: 0.18, width: 0.4, height: 0.17 }, // the referees' flags
    { x: 0.22, y: 0.47, width: 0.25, height: 0.21 }], // Mori’s folded arms: his pose
  anchors: [{ id: 'mori', x: 0.29, y: 0.31, head: { x: 0.29, y: 0.2 },
    face: { x: 0.22, y: 0.1, width: 0.14, height: 0.24 } }] },
};
const panels = () => Promise.all([
  comicPanel('final', asset('match-final.jpg'), ART.final),
  comicPanel('eyes', asset('match-eyes.jpg'), ART.eyes),
  comicPanel('lunge', asset('match-lunge.jpg'), ART.lunge),
  comicPanel('strike', asset('match-strike.jpg'), ART.strike),
  comicPanel('coach', asset('match-coach.jpg'), ART.coach),
  comicPanel('stands', asset('match-stands.jpg'), ART.stands),
]);
// #endregion

// #region fonts: each edition loads its faces with the words they set
const SFX = /^sfx(\{[^}\n]*\})?[ \t]*[:：](.*)$/gm; // sound effects: the second face sets them
async function loadEdition(lang) {
  const text = TEXT[lang];
  const [face, sfx] = EDITIONS[lang].faces;
  const faces = { [face]: FONTS[face], [sfx]: FONTS[sfx] };
  const effects = [...text.matchAll(SFX)];
  for (const [, attrs = '', words] of effects) { // ドン keeps its face in every language
    const family = /font="([^"]+)"/.exec(attrs)?.[1];
    if (!family) continue;
    faces[family] = FONTS[family];
    await loadCjkFonts({ [family]: FONTS[family] }, words, { vertical: true });
  }
  if (['ja', 'zh'].includes(lang)) { // CJK: only the files that hold these characters
    const own = effects.filter(([, attrs = '']) => !attrs.includes('font=')).map((m) => m[2]);
    await loadCjkFonts({ [face]: FONTS[face] }, text.replace(SFX, ''), { vertical: true });
    await loadCjkFonts({ [sfx]: FONTS[sfx] }, own.join(''), { vertical: true });
  }
  if (lang === 'ar') await loadArabicFonts(faces, text);
  await loadComicFonts(faces, text); // the bold and italic the faces do not ship
}
// #endregion

// ─── 4 · Build & show ───────────────────────────────────────────────────────
// #region editions: the original on the right-hand page, this edition's lettering facing it
const FACING = LANG === 'ja' ? 'en' : LANG; // Japanese readers see the English edition
const TEXT = { ja: original, [FACING]: LANG === 'ja' ? english : markdown };
await loadFonts(FONTS, Object.values(TEXT).join('\n'));
const resources = await panels();
const build = async (lang) => { // the same pictures and page; this language's lettering
  await loadEdition(lang);
  return withLoadedFonts(() => buildDocument({ markdown: TEXT[lang], resources,
    continuation: { pageIndexOffset: lang === 'ja' ? 1 : 2 } }, edition(lang)),
    { ...kitFonts(FONTS), text: TEXT[lang] });
};
const docs = [await build('ja'), await build(FACING)];
// #endregion
const TITLE = t({
  en: 'An action page with slanted gutters', es: 'Una página de acción con calles inclinadas',
  ca: 'Una pàgina d’acció amb carrers inclinats', zh: '斜向格间的动作页', ar: 'صفحة حركة بفواصل مائلة',
  fr: 'Une page d’action aux gouttières inclinées',
  de: 'Eine Actionseite mit schrägen Zwischenräumen',
  it: 'Una tavola d’azione con intervalli inclinati',
  pt: 'Uma página de ação com sarjetas inclinadas',
  ja: '斜めのコマ割りで組むアクションのページ' });
showBook(docs, { title: TITLE });
offerPdf(() => renderToPdf(docs, { 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 ───────────────────────────────────────────────────────────────────────
```

## Häufige Fehler

- **Zeichnen Sie japanischen Text mit 'ja' aus, nie mit zh-Hans oder LANG.** Die Ausgaben eines Rezepts sind en und es, ein japanisches Beispiel ist aber in beiden Japanisch: `locale: LANG` würde es als Englisch oder Spanisch auszeichnen, und eine chinesische Auszeichnung würde es nach chinesischen Regeln setzen (Kaiming-Interpunktion, kleine Kana dürfen eine Zeile beginnen, 图 statt 図, chinesische Glyphenformen im PDF). Seit postext 1.30 ist die Auszeichnung auch die Sprache, in der der Text geformt wird (gemessen, gezeichnet und eingebettet). Jede Auszeichnung außer 'ja' liefert daher andere Glyphenformen als die japanischen (unter einer chinesischen Auszeichnung die chinesischen) und andere Zeilenumbrüche. Schreiben Sie 'ja': Das wählt die Region Japan (JLReq-Zeilenumbruch und -Interpunktion, Sesam-Betonungszeichen, Furigana-Abstände, die Beschriftungen 図 und 表) und schaltet die Silbentrennung ab. Der Lint schlägt bei einem Text mit Kana unter einer zh- oder ko-Auszeichnung fehl.
- **Chinesische Schnitte werden in Teilstücken geladen, über den Block cjk.** Fontsource liefert eine chinesische, japanische oder koreanische Familie als etwa hundert Dateien pro Schriftstärke aus, jede für einen Zeichenbereich. loadFonts holt nur die Datei latin, am Bildschirm stammen die Han-Zeichen also aus einer Systemschrift und werden falsch gemessen, und fontsourceProvider gibt dem PDF diese latin-Datei, die sie als leere Kästchen druckt. Führen Sie den Kit-Block cjk auf, rufen Sie loadCjkFonts(FONTS, markdown) nach loadFonts auf (einmal pro Stimme, mit dem Text, den sie setzt, wenn das Buch mehrere CJK-Schriften verwendet), und geben Sie renderToPdf fontProvider: cjkPdfProvider: Beide nehmen die Dateien, die die Zeichen des Textes enthalten.

- Ein Soundeffekt, der in einer in Zeilen geletterten Ausgabe japanisch bleibt, wird wie der Rest der Ausgabe in einer Zeile gesetzt, wenn seine Zeile nicht `vertical` sagt.
- Soras Jubel ist auf Japanisch, Spanisch und Katalanisch länger als sein kleines Panel: Der Engine überlassen, überquerte er den Rand, und der Build warnte `comicBalloonOverflow`. Diese Ausgaben markieren ihn mit `break` (`sora{shout break}`): Er bricht absichtlich nach oben durch den Rahmen in den Zwischenraum und das Panel darüber, und nichts wird gemeldet. Eine Sprechblase mit `break` läuft nie in den Seitenrand, es sei denn, ihr Panel ist randabfallend; ein Pin (`at=`) stellt sie an jede andere Stelle.

## Nachweise

- Rezept: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Text: 決勝 (The Final), a one-page kendo manga written for this recipe, with its English, Spanish, Catalan, Chinese and Arabic letterings: Postext Cookbook, CC-BY-4.0
- Bilder: The kendo final in a packed gym, two fighters between three referees: Generated With Diffusion Models, Original
- Bilder: Hana's eyes through her helmet grille: Generated With Diffusion Models, Original
- Bilder: The opponent lunging with speed lines: Generated With Diffusion Models, Original
- Bilder: Hana's leaping strike to the helmet: Generated With Diffusion Models, Original
- Bilder: Sora cheering in the stands: Generated With Diffusion Models, Original
- Bilder: Coach Mori nodding while the referees raise their flags: Generated With Diffusion Models, Original
- Schrift: Zen Antique (OFL-1.1), Dela Gothic One (OFL-1.1), Comic Neue (OFL-1.1), Bangers (OFL-1.1), Noto Sans SC (OFL-1.1), ZCOOL KuaiLe (OFL-1.1), Playpen Sans Arabic (OFL-1.1), Lalezar (OFL-1.1)
- Code: MIT · Beispielinhalt: CC-BY-4.0

## Verwandte Rezepte

- [Nº 118 · Eine japanische Erzählung in zwei Stufen, Titel über beide](https://postext.dev/de/cookbook/two-tier-tankobon.md): Zwei Erzählungen Akutagawas in Gesammelten Werken: zwei Stufen zu 25 Zeichen auf A5, jeder Titel über beide auf ungerader Seite, letzte Seiten wie sie fallen. · Stufe 2 (Mittel) · Belletristik, Drama und Prosa
- [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º 153 · Eine Seite, in sechs Sprachen gelettert](https://postext.dev/de/cookbook/one-page-six-languages.md): Eine Comicseite, Aufteilung und Bilder fest, je Sprache gelettert: Die Locale wählt die Schrift; Japanisch läuft senkrecht und liest wie Arabisch von rechts. · Stufe 3 (Fortgeschritten) · Comics