# One set of panels, three page splits

> Five comic panels laid out under three split trees: the split attribute of :::page cuts the page, and each picture's safe area keeps its subject in any cell.

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

## In short

A comic page drawn once and laid out three ways. The same five pictures and the same dialogue fill three different panel grids, and every picture is cropped again to fit its new panel.

## What you'll build

A layout proof for one page of a comic, *The Porthcove Light*: a cover sheet and the same page in three plans, for the author to choose from. The five pictures (Maya climbing to the lighthouse, her grandfather at a dead radio, Maya pointing at the floor, the cat asleep on the cable, the lamp lit at night) and the six lines of lettering never change; only the `split` of each `:::page` does. Every picture is cropped again for its cell and every balloon placed again around its speaker. The trim is an American comic book, 168 × 259 mm, and the proof comes in six editions, each lettered in its own language.

**This recipe answers:**

- How do I divide a comic page into panels, and keep a face in view when the panel changes shape?
- How do I keep a face in view when a panel crops the picture?
- How do I re-letter a comic in another language?

## The short answer

The comic: a frame, gutters, a panel border, and a page per split.

```js
// script.js, lines 48–65
// Every :::page fills the type area; its split attribute cuts it into cells and its ::panel
// lines fill them in reading order (rows top to bottom, columns from the start side):
//   :::page{split="30 / 35 [* | * | *] / *"}    three tiers, the middle one in three
//   :::page{split="60 [* / *] | * [* / * / *]"} two columns, then each column in tiers
//   :::page{split="30 [30 | 20 | *] / *"}       a 30 % tier cut 30 | 20 | rest, then the rest
// A size is a percentage of the parent cell, * shares what is left, [ … ] cuts that cell
// on the other axis. A panel with inset="x y w h" sits over the panel before it.
const comics = {
  gutter: { horizontal: mm(4), vertical: mm(3) }, // between tiers, between panels in a tier
  panel: { borderWidth: pt(1), borderColor: col('ink'), background: col('paper') },
  lettering: { fontFamily: LETTERING, fontSize: pt(8), color: col('ink'), inset: mm(1) },
  balloonStyles: [
    { id: 'speech', stroke: col('ink') },
    { id: 'caption', fill: col('caption'), stroke: col('ink') },
    { id: 'sfx', fontFamily: SFX, color: col('accent'), haloColor: col('paper') },
  ],
  runningHeads: true, // a comic page has no running head unless asked: here, its folio
};
```

## Ingredients

**Teaches**

- [Panel splits](https://postext.dev/en/docs/comics.md#splitting-the-page): split= cuts the page into panels with a short expression: tiers stacked with /, panels side by side with |, sizes in percent, slanted gutters with 30~40, and brackets to split a cell again.
- [Panel art and crops](https://postext.dev/en/docs/comics.md#panels-and-art): art= puts a picture in a panel and crops it to the cell around its safe area, so the same art fits any split; focus= picks the point to keep, fit=contain shows the picture whole.

**Also uses**

- [Speakers and anchors](https://postext.dev/en/docs/comics.md#speakers-and-anchors)
- [Picture safe area](https://postext.dev/en/docs/document-format.md#safe-area)
- [Panel borders and gutters](https://postext.dev/en/docs/comics.md#panels-and-art)
- [Comic pages](https://postext.dev/en/docs/comics.md#comic-pages)
- [Comic lettering](https://postext.dev/en/docs/comics.md#lettering)
- [Re-lettering in other languages](https://postext.dev/en/docs/comics.md#lettering)
- [Balloon styles](https://postext.dev/en/docs/comics.md#balloon-styles)
- [Sound effects](https://postext.dev/en/docs/comics.md#balloon-styles)
- [Semantic colour palette](https://postext.dev/en/docs/configuration.md#color-palette)
- [Pages on a canvas](https://postext.dev/en/docs/configuration.md#rendering-a-page-to-a-bitmap)
- [PDF export](https://postext.dev/en/docs/configuration.md#generating-pdfs)
- [Paragraphs in the other direction](https://postext.dev/en/docs/arabic-layout.md#document-block-and-inline-direction)
- [Insets, bleeds and broken borders](https://postext.dev/en/docs/comics.md#panels-and-art)
- [Paper colour](https://postext.dev/en/docs/configuration.md#page)
- [Paragraph styles](https://postext.dev/en/docs/configuration.md#paragraph-styles)
- [Fonts embedded in the PDF](https://postext.dev/en/docs/configuration.md#why-a-font-provider)
- [Figures and tables as resources](https://postext.dev/en/docs/document-format.md#resources)

**Config at a glance**

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

**APIs**

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

**Typefaces**

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

## Method

### 1 · Cut the page with a split tree

The code is [the short answer](https://postext.dev/en/cookbook/comic-page-splitters.md#the-short-answer) above. A `:::page` fills the type area, 144 × 227 mm here, and its `split` attribute cuts it. `/` separates rows, `|` separates columns, each size is a percentage of the cell it cuts, `*` shares what is left, and a bracket cuts that cell again on the other axis ([splitting the page](https://postext.dev/en/docs/comics.md#splitting-the-page)). Plan C, `30 [30 | 20 | *] / *`, makes a tier 30% deep, cuts it into cells 30% and 20% wide plus the rest, and leaves one tall cell under it. The gutters straddle each line: 4 mm between tiers, 3 mm between panels in a tier. The `::panel` lines fill the cells in reading order, rows from the top and columns from the start side.

![Page 4. Plan C: a top tier of three narrow panels with the cat as an inset over Maya's, and one tall panel of the lighthouse at night with two balloons near the gallery.](https://postext.dev/cookbook/comic-page-splitters/en/p04.webp?v=6681d87a)

*Plan C: the 30 | 20 | rest tier, with the cat as an inset over the third panel.*

### 2 · Give each picture a safe area

```js
// script.js, lines 182–264
// From the art manifest; fractions of each picture, the same in every language. The safe
// area is what every crop keeps: Tomás alone, not his radio, so a cell a fifth of the page
// wide still shows him; the lighthouse and the gallery, not the boat, so a tall cell holds them.
const ART = {
  'lh-arrive': { width: 1100, height: 733, safeArea: { x: 0.22, y: 0.08, width: 0.4, height: 0.64 },
    anchors: [{ id: 'maya', x: 0.29, y: 0.52, head: { x: 0.27, y: 0.47 },
      face: { x: 0.22, y: 0.42, width: 0.12, height: 0.16 } },
    { id: 'biscuit', x: 0.4, y: 0.68, face: { x: 0.37, y: 0.64, width: 0.07, height: 0.08 } }],
    avoid: [{ x: 0.51, y: 0.09, width: 0.1, height: 0.43 }],
    alt: t({ en: 'A girl in a yellow raincoat walks up a coastal path towards a red-and-white '
      + 'lighthouse, a fat orange cat ahead of her.',
      es: 'Una niña con chubasquero amarillo sube por un camino de costa hacia un faro rojo y '
        + 'blanco, con un gato naranja gordo delante.',
      ca: 'Una nena amb impermeable groc puja per un camí de costa cap a un far vermell i blanc, '
        + 'amb un gat taronja gras al davant.',
      zh: '一个穿黄色雨衣的女孩沿着海边小路走向红白相间的灯塔，一只胖胖的橘猫走在前面。',
      ar: 'فتاة بمعطف مطر أصفر تصعد دربًا ساحليًا نحو منارة حمراء وبيضاء، وأمامها قط برتقالي سمين.',
      ja: '黄色いレインコートの女の子が、赤と白の灯台へ続く海辺の小道をのぼっていく。前を太ったオレンジ色の猫が歩く。',
      pt: 'Uma menina de capa de chuva amarela sobe um caminho à beira-mar rumo a um farol '
        + 'vermelho e branco, com um gato laranja gordo à frente.' }) },
  'lh-radio': { width: 1000, height: 1000,
    safeArea: { x: 0.27, y: 0.38, width: 0.24, height: 0.3 },
    anchors: [{ id: 'tomas', x: 0.345, y: 0.52, head: { x: 0.38, y: 0.44 },
      face: { x: 0.29, y: 0.4, width: 0.16, height: 0.18 } }],
    avoid: [{ x: 0, y: 0.44, width: 0.22, height: 0.26 }],
    alt: t({ en: 'The old keeper, white-bearded, in a navy sweater and cap, taps a valve radio '
      + 'with the microphone in his hand.',
      es: 'El viejo farero, de barba blanca, jersey azul marino y gorra, golpea una radio de '
        + 'válvulas con el micrófono en la mano.',
      ca: 'El vell faroner, de barba blanca, jersei blau marí i gorra, pica una ràdio de vàlvules '
        + 'amb el micròfon a la mà.',
      zh: '白胡子的老守塔人穿着藏青色毛衣、戴着帽子，手握话筒，敲着一台电子管收音机。',
      ar: 'حارس المنارة العجوز بلحيته البيضاء وكنزته الكحلية وقبعته ينقر على مذياع قديم '
        + 'والميكروفون في يده.',
      ja: '白いひげの老灯台守が、紺のセーターに帽子姿でマイクを握り、真空管ラジオをたたいている。',
      pt: 'O velho faroleiro, de barba branca, suéter azul-marinho e boné, dá batidinhas num '
        + 'rádio valvulado com o microfone na mão.' }) },
  'lh-maya': { width: 1100, height: 1100, safeArea: { x: 0.25, y: 0.27, width: 0.41, height: 0.68 },
    anchors: [{ id: 'maya', x: 0.54, y: 0.565, head: { x: 0.5, y: 0.3 },
      face: { x: 0.4, y: 0.33, width: 0.24, height: 0.29 } }],
    avoid: [{ x: 0.27, y: 0.73, width: 0.25, height: 0.22 }],
    alt: t({ en: 'Close-up of Maya frowning at the floor and pointing down.',
      es: 'Primer plano de Maya, que frunce el ceño mirando al suelo y señala hacia abajo.',
      ca: 'Primer pla de la Maya, que arrufa les celles mirant a terra i assenyala avall.',
      zh: '玛雅的特写：她皱着眉头看着地板，手指向下指。',
      ar: 'لقطة قريبة لمايا وهي تعقد حاجبيها ناظرةً إلى الأرض وتشير إلى أسفل.',
      ja: 'マヤのアップ。眉をひそめて床を見つめ、下を指さしている。',
      pt: 'Close de Maya, de testa franzida, olhando para o chão e apontando para baixo.' }) },
  'lh-biscuit': { width: 1000, height: 1000,
    safeArea: { x: 0.58, y: 0.25, width: 0.42, height: 0.33 },
    anchors: [{ id: 'biscuit', x: 0.72, y: 0.355, head: { x: 0.73, y: 0.32 },
      face: { x: 0.64, y: 0.27, width: 0.2, height: 0.18 } }],
    avoid: [{ x: 0.93, y: 0.28, width: 0.07, height: 0.24 },
      { x: 0, y: 0.72, width: 0.4, height: 0.1 }],
    alt: t({ en: 'Under the desk the fat orange cat sleeps on his back, right on top of the black '
      + 'radio cable.',
      es: 'Bajo la mesa, el gato naranja gordo duerme panza arriba justo encima del cable negro '
        + 'de la radio.',
      ca: 'Sota la taula, el gat taronja gras dorm panxa enlaire just a sobre del cable negre de '
        + 'la ràdio.',
      zh: '桌子底下，胖橘猫四脚朝天地睡着，正好压在收音机的黑色电线上。',
      ar: 'تحت المكتب ينام القط البرتقالي السمين على ظهره فوق سلك المذياع الأسود تمامًا.',
      ja: '机の下で、太ったオレンジ色の猫がラジオの黒いコードの真上にあおむけで眠っている。',
      pt: 'Debaixo da mesa, o gato laranja gordo dorme de barriga para cima bem em cima do cabo '
        + 'preto do rádio.' }) },
  'lh-beam': { width: 1200, height: 800, safeArea: { x: 0.15, y: 0.01, width: 0.25, height: 0.3 },
    anchors: [{ id: 'maya', x: 0.235, y: 0.15,
      face: { x: 0.21, y: 0.11, width: 0.05, height: 0.07 } },
      { id: 'tomas', x: 0.3, y: 0.145, face: { x: 0.28, y: 0.11, width: 0.04, height: 0.06 } }],
    avoid: [{ x: 0.79, y: 0.55, width: 0.08, height: 0.09 }],
    alt: t({ en: 'Night: the beam sweeps over a dark sea; Maya and her grandfather stand on the '
      + 'lantern gallery and a fishing boat shows its lights far out.',
      es: 'De noche, el haz barre un mar oscuro; Maya y su abuelo están en la galería de la '
        + 'linterna y a lo lejos se ven las luces de un pesquero.',
      ca: 'De nit, el feix escombra un mar fosc; la Maya i el seu avi són a la galeria de la '
        + 'llanterna i lluny es veuen els llums d’un pesquer.',
      zh: '夜里，灯塔的光束扫过漆黑的海面；玛雅和外公站在灯室外的回廊上，远处一艘渔船亮着灯。',
      ar: 'ليلًا يمسح الشعاع بحرًا مظلمًا، ومايا وجدّها واقفان على شرفة الفانوس، وفي البعيد قارب '
        + 'صيد بأضوائه.',
      ja: '夜。光の帯が暗い海をなでる。マヤと祖父は灯室の回廊に立ち、沖には漁船の明かりが見える。',
      pt: 'À noite, o facho varre um mar escuro; Maya e o avô estão na galeria da lanterna e, ao '
        + 'longe, aparecem as luzes de um barco de pesca.' }) },
};
```

Each picture is drawn once and cropped to fill whatever cell it lands in. The safe area is the part every crop keeps whole ([panels and art](https://postext.dev/en/docs/comics.md#panels-and-art)). The radio picture's safe area is the keeper alone, 24% of its width, so the 26 mm cell of plan C shows him from cap to boots and drops the radio; the wide cells of plans A and B show both. A cell whose shape cannot hold a safe area letterboxes the picture and the build warns (`comicPanelLetterbox`). The anchors mark each speaker's mouth and face in the same fractions, so the tails find the speakers in every crop.

### 3 · Lay one panel over another

Plan C's split makes four cells for five panels. The cat goes in with `inset="50 50 46 46"`: a panel 46% wide and 46% deep, placed at 50%, 50% of the panel before it, Maya's. An inset takes no cell, so the panels after it keep their places, and it is read right after the panel it covers.

### 4 · Letter six editions from one layout

```js
// script.js, lines 36–44
// The lettering and sound-effect faces of each edition: the engine's defaults, but for Chinese
// two ZCOOL faces drawn for cartoons instead of Noto Sans SC. content.<lang>.md holds the words
// of each edition under the same speaker ids; Japanese balloons are set vertically, and the
// Japanese and Arabic editions, read right to left, mirror the order of the panels in every row.
const [LETTERING, SFX] = t({
  en: ['Comic Neue', 'Bangers'], es: ['Comic Neue', 'Bangers'], ca: ['Comic Neue', 'Bangers'],
  ja: ['Zen Antique', 'Dela Gothic One'], zh: ['ZCOOL KuaiLe', 'ZCOOL QingKe HuangYou'],
  ar: ['Playpen Sans Arabic', 'Lalezar'], pt: ['Comic Neue', 'Bangers'],
});
```

The split, the pictures, the crops and the anchors are the same in every language; `content.<lang>.md` holds only the words, under the same speaker ids (`maya`, `tomas`). The Japanese edition sets its balloons vertically, eight characters to the column, and drops the final 。; it reads right to left, like the Arabic one, so each row's panels are mirrored while the pictures are not. The lettering size stays 8 pt in every edition: a longer line makes a bigger balloon, never smaller type ([lettering](https://postext.dev/en/docs/comics.md#lettering)).

## The whole recipe

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

- Source folder: https://github.com/drnachio/postext/tree/main/cookbook/comic-page-splitters

### script.js

```js
// ═══ Postext Cookbook · Nº 144 · One set of panels, three page splits ═══════════════
// https://postext.dev/en/cookbook/comic-page-splitters
// Code: MIT · Text: original (CC BY 4.0) · Pictures: generated with diffusion models
// Fonts: Comic Neue, Bangers and the faces of five editions (OFL) · Needs postext ≥ 1.21.0
//
// A layout proof for one page of a comic: the same five pictures and the same lines of
// dialogue laid out under three `split` trees. Each picture carries a safe area, so its subject
// stays in view whether its cell is wide, tall or square, and the lettering is placed again
// around the speakers' anchors on every page and in every language.
import {
  buildDocument, renderPageToCanvas, clearMeasurementCache, registerResourceImage,
  loadVerticalAlternates,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'en'; // @lang: the sample's language: 'en' | 'es' | 'ca' | 'zh' | 'ar' | 'ja' | 'pt'
const RECIPE = 'comic-page-splitters';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: the night sea, the lighthouse red and the yellow of the captions
const palette = {
  ink: '#1b2430', // panel borders, lettering and text: a blue-black
  accent: '#b8322a', // the lighthouse red: the proof's labels
  caption: '#f4e7bf', // caption boxes, an old-paper yellow
  muted: '#5f6873', // folios and the imprint
  paper: '#fdfbf6',
};
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: 'accent (defaults)', value: { hex: palette.accent, model: 'hex' } },
];
// #endregion

// #region editions: one comic, six editions, each lettered in faces for its script
// The lettering and sound-effect faces of each edition: the engine's defaults, but for Chinese
// two ZCOOL faces drawn for cartoons instead of Noto Sans SC. content.<lang>.md holds the words
// of each edition under the same speaker ids; Japanese balloons are set vertically, and the
// Japanese and Arabic editions, read right to left, mirror the order of the panels in every row.
const [LETTERING, SFX] = t({
  en: ['Comic Neue', 'Bangers'], es: ['Comic Neue', 'Bangers'], ca: ['Comic Neue', 'Bangers'],
  ja: ['Zen Antique', 'Dela Gothic One'], zh: ['ZCOOL KuaiLe', 'ZCOOL QingKe HuangYou'],
  ar: ['Playpen Sans Arabic', 'Lalezar'], pt: ['Comic Neue', 'Bangers'],
});
// #endregion

// #region answer: the comic: a frame, gutters, a panel border, and a page per split
// Every :::page fills the type area; its split attribute cuts it into cells and its ::panel
// lines fill them in reading order (rows top to bottom, columns from the start side):
//   :::page{split="30 / 35 [* | * | *] / *"}    three tiers, the middle one in three
//   :::page{split="60 [* / *] | * [* / * / *]"} two columns, then each column in tiers
//   :::page{split="30 [30 | 20 | *] / *"}       a 30 % tier cut 30 | 20 | rest, then the rest
// A size is a percentage of the parent cell, * shares what is left, [ … ] cuts that cell
// on the other axis. A panel with inset="x y w h" sits over the panel before it.
const comics = {
  gutter: { horizontal: mm(4), vertical: mm(3) }, // between tiers, between panels in a tier
  panel: { borderWidth: pt(1), borderColor: col('ink'), background: col('paper') },
  lettering: { fontFamily: LETTERING, fontSize: pt(8), color: col('ink'), inset: mm(1) },
  balloonStyles: [
    { id: 'speech', stroke: col('ink') },
    { id: 'caption', fill: col('caption'), stroke: col('ink') },
    { id: 'sfx', fontFamily: SFX, color: col('accent'), haloColor: col('paper') },
  ],
  runningHeads: true, // a comic page has no running head unless asked: here, its folio
};
// #endregion

const LABEL = { fontFamily: LETTERING, fontSize: pt(7.5), color: col('muted') };
const footer = { elements: [{ kind: 'text', id: 'folio', content: '{pageNumber}', ...LABEL,
  align: 'center', placement: { anchor: { to: 'page', edge: 'bottom' },
    offset: { x: mm(0), y: mm(-8) } } }] };

const config = () => ({ // a factory: the engine caches resolved configs per object
  locale: t({ en: 'en-us', es: 'es', ca: 'ca', ja: 'ja', zh: 'zh-Hans', ar: 'ar',
    pt: 'pt-BR' }),
  colorPalette, comics,
  // The trim of an American comic book, 6⅝ × 10³⁄₁₆ in; the type area is the panel frame.
  page: { sizePreset: 'custom', width: mm(168), height: mm(259), dpi: 150,
    backgroundColor: col('paper'),
    margins: { top: mm(14), bottom: mm(18), left: mm(13), right: mm(11), mirror: true } },
  layout: { layoutType: 'single' },
  // The proof's cover sheet is set in the lettering face of the edition.
  bodyText: { fontFamily: LETTERING, fontSize: pt(10.5), lineHeight: pt(15), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    textAlign: 'left', firstLineIndent: pt(0), paragraphSpacing: true,
    hyphenation: { enabled: false } },
  headings: { fontFamily: SFX, color: col('accent'), fontWeight: 400,
    levels: [
      // Restated: any headings object drops the H1 break (gotcha: headings-drop-h1-break).
      { level: 1, fontSize: pt(34), lineHeight: pt(38), breakBefore: { enabled: true,
        parity: 'any' }, marginTop: mm(30), marginBottom: pt(15) },
      { level: 2, fontFamily: LETTERING, fontSize: pt(10.5), fontWeight: 700,
        color: col('accent'), marginTop: pt(15), marginBottom: pt(0) },
    ] },
  paragraphStyles: [
    { id: 'split', fontSize: pt(10.5), color: col('accent'), textAlign: 'left' }, // the attribute
    { id: 'imprint', fontSize: pt(7.5), lineHeight: pt(10), color: col('muted'),
      marginTop: pt(30) },
  ],
  header: { elements: [] }, footer,
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`# One page, three plans

## The Porthcove Light · page 12 · layout proof

Three plans for the same page, for the author to choose from. Each one holds the same five pictures and the same lines of dialogue; only the split of the page changes, and the crops and the balloons follow it.

**Plan A, page 2.** Three tiers, the middle one cut into three panels.

:::paragraphs{style="split" dir=ltr}
split="30 / 35 [\* | \* | \*] / \*"
:::

**Plan B, page 3.** Two columns, the left one in two panels, the right one in three.

:::paragraphs{style="split" dir=ltr}
split="60 [\* / \*] | \* [\* / \* / \*]"
:::

**Plan C, page 4.** A tier 30% deep, cut 30 | 20 | the rest, over one tall panel; the cat is an inset over Maya’s panel.

:::paragraphs{style="split" dir=ltr}
split="30 [30 | 20 | \*] / \*"
:::

:::paragraphs{style="imprint"}
Story and lettering for the Postext Cookbook. Pictures generated with diffusion models. Lettered in Comic Neue and Bangers (SIL OFL).
:::

:::page{split="30 / 35 [* | * | *] / *"}
::panel{art=lh-arrive}
caption: Every summer, Maya spent a week at the lighthouse.
maya: Grandpa! I’m here!
::panel{art=lh-radio}
tomas: Just in time. The radio’s gone deaf,
tomas: and there’s a storm on the way.
::panel{art=lh-maya}
maya: Grandpa… I think I found the problem.
::panel{art=lh-biscuit}
sfx{rotate=-6}: purrrr
::panel{art=lh-beam}
tomas: Radio’s working, lamp’s lit.
maya: And Biscuit has found a new bed.
:::

:::page{split="60 [* / *] | * [* / * / *]"}
::panel{art=lh-arrive}
caption: Every summer, Maya spent a week at the lighthouse.
maya: Grandpa! I’m here!
::panel{art=lh-radio}
tomas: Just in time. The radio’s gone deaf,
tomas: and there’s a storm on the way.
::panel{art=lh-maya}
maya: Grandpa… I think I found the problem.
::panel{art=lh-biscuit}
sfx{rotate=-6}: purrrr
::panel{art=lh-beam}
tomas: Radio’s working, lamp’s lit.
maya: And Biscuit has found a new bed.
:::

:::page{split="30 [30 | 20 | *] / *"}
::panel{art=lh-arrive}
caption: Every summer, Maya spent a week at the lighthouse.
maya: Grandpa! I’m here!
::panel{art=lh-radio}
tomas{break}: Just in time. The radio’s gone deaf,
tomas: and there’s a storm on the way.
::panel{art=lh-maya}
maya: Grandpa… I think I found the problem.
::panel{art=lh-biscuit inset="50 50 46 46"}
sfx{rotate=-6}: purrrr
::panel{art=lh-beam}
tomas: Radio’s working, lamp’s lit.
maya: And Biscuit has found a new bed.
:::
`; // content.<lang>.md, inlined by the Cookbook

// #region art: the five pictures: safe area, speakers' anchors and avoid zones
// From the art manifest; fractions of each picture, the same in every language. The safe
// area is what every crop keeps: Tomás alone, not his radio, so a cell a fifth of the page
// wide still shows him; the lighthouse and the gallery, not the boat, so a tall cell holds them.
const ART = {
  'lh-arrive': { width: 1100, height: 733, safeArea: { x: 0.22, y: 0.08, width: 0.4, height: 0.64 },
    anchors: [{ id: 'maya', x: 0.29, y: 0.52, head: { x: 0.27, y: 0.47 },
      face: { x: 0.22, y: 0.42, width: 0.12, height: 0.16 } },
    { id: 'biscuit', x: 0.4, y: 0.68, face: { x: 0.37, y: 0.64, width: 0.07, height: 0.08 } }],
    avoid: [{ x: 0.51, y: 0.09, width: 0.1, height: 0.43 }],
    alt: t({ en: 'A girl in a yellow raincoat walks up a coastal path towards a red-and-white '
      + 'lighthouse, a fat orange cat ahead of her.',
      es: 'Una niña con chubasquero amarillo sube por un camino de costa hacia un faro rojo y '
        + 'blanco, con un gato naranja gordo delante.',
      ca: 'Una nena amb impermeable groc puja per un camí de costa cap a un far vermell i blanc, '
        + 'amb un gat taronja gras al davant.',
      zh: '一个穿黄色雨衣的女孩沿着海边小路走向红白相间的灯塔，一只胖胖的橘猫走在前面。',
      ar: 'فتاة بمعطف مطر أصفر تصعد دربًا ساحليًا نحو منارة حمراء وبيضاء، وأمامها قط برتقالي سمين.',
      ja: '黄色いレインコートの女の子が、赤と白の灯台へ続く海辺の小道をのぼっていく。前を太ったオレンジ色の猫が歩く。',
      pt: 'Uma menina de capa de chuva amarela sobe um caminho à beira-mar rumo a um farol '
        + 'vermelho e branco, com um gato laranja gordo à frente.' }) },
  'lh-radio': { width: 1000, height: 1000,
    safeArea: { x: 0.27, y: 0.38, width: 0.24, height: 0.3 },
    anchors: [{ id: 'tomas', x: 0.345, y: 0.52, head: { x: 0.38, y: 0.44 },
      face: { x: 0.29, y: 0.4, width: 0.16, height: 0.18 } }],
    avoid: [{ x: 0, y: 0.44, width: 0.22, height: 0.26 }],
    alt: t({ en: 'The old keeper, white-bearded, in a navy sweater and cap, taps a valve radio '
      + 'with the microphone in his hand.',
      es: 'El viejo farero, de barba blanca, jersey azul marino y gorra, golpea una radio de '
        + 'válvulas con el micrófono en la mano.',
      ca: 'El vell faroner, de barba blanca, jersei blau marí i gorra, pica una ràdio de vàlvules '
        + 'amb el micròfon a la mà.',
      zh: '白胡子的老守塔人穿着藏青色毛衣、戴着帽子，手握话筒，敲着一台电子管收音机。',
      ar: 'حارس المنارة العجوز بلحيته البيضاء وكنزته الكحلية وقبعته ينقر على مذياع قديم '
        + 'والميكروفون في يده.',
      ja: '白いひげの老灯台守が、紺のセーターに帽子姿でマイクを握り、真空管ラジオをたたいている。',
      pt: 'O velho faroleiro, de barba branca, suéter azul-marinho e boné, dá batidinhas num '
        + 'rádio valvulado com o microfone na mão.' }) },
  'lh-maya': { width: 1100, height: 1100, safeArea: { x: 0.25, y: 0.27, width: 0.41, height: 0.68 },
    anchors: [{ id: 'maya', x: 0.54, y: 0.565, head: { x: 0.5, y: 0.3 },
      face: { x: 0.4, y: 0.33, width: 0.24, height: 0.29 } }],
    avoid: [{ x: 0.27, y: 0.73, width: 0.25, height: 0.22 }],
    alt: t({ en: 'Close-up of Maya frowning at the floor and pointing down.',
      es: 'Primer plano de Maya, que frunce el ceño mirando al suelo y señala hacia abajo.',
      ca: 'Primer pla de la Maya, que arrufa les celles mirant a terra i assenyala avall.',
      zh: '玛雅的特写：她皱着眉头看着地板，手指向下指。',
      ar: 'لقطة قريبة لمايا وهي تعقد حاجبيها ناظرةً إلى الأرض وتشير إلى أسفل.',
      ja: 'マヤのアップ。眉をひそめて床を見つめ、下を指さしている。',
      pt: 'Close de Maya, de testa franzida, olhando para o chão e apontando para baixo.' }) },
  'lh-biscuit': { width: 1000, height: 1000,
    safeArea: { x: 0.58, y: 0.25, width: 0.42, height: 0.33 },
    anchors: [{ id: 'biscuit', x: 0.72, y: 0.355, head: { x: 0.73, y: 0.32 },
      face: { x: 0.64, y: 0.27, width: 0.2, height: 0.18 } }],
    avoid: [{ x: 0.93, y: 0.28, width: 0.07, height: 0.24 },
      { x: 0, y: 0.72, width: 0.4, height: 0.1 }],
    alt: t({ en: 'Under the desk the fat orange cat sleeps on his back, right on top of the black '
      + 'radio cable.',
      es: 'Bajo la mesa, el gato naranja gordo duerme panza arriba justo encima del cable negro '
        + 'de la radio.',
      ca: 'Sota la taula, el gat taronja gras dorm panxa enlaire just a sobre del cable negre de '
        + 'la ràdio.',
      zh: '桌子底下，胖橘猫四脚朝天地睡着，正好压在收音机的黑色电线上。',
      ar: 'تحت المكتب ينام القط البرتقالي السمين على ظهره فوق سلك المذياع الأسود تمامًا.',
      ja: '机の下で、太ったオレンジ色の猫がラジオの黒いコードの真上にあおむけで眠っている。',
      pt: 'Debaixo da mesa, o gato laranja gordo dorme de barriga para cima bem em cima do cabo '
        + 'preto do rádio.' }) },
  'lh-beam': { width: 1200, height: 800, safeArea: { x: 0.15, y: 0.01, width: 0.25, height: 0.3 },
    anchors: [{ id: 'maya', x: 0.235, y: 0.15,
      face: { x: 0.21, y: 0.11, width: 0.05, height: 0.07 } },
      { id: 'tomas', x: 0.3, y: 0.145, face: { x: 0.28, y: 0.11, width: 0.04, height: 0.06 } }],
    avoid: [{ x: 0.79, y: 0.55, width: 0.08, height: 0.09 }],
    alt: t({ en: 'Night: the beam sweeps over a dark sea; Maya and her grandfather stand on the '
      + 'lantern gallery and a fishing boat shows its lights far out.',
      es: 'De noche, el haz barre un mar oscuro; Maya y su abuelo están en la galería de la '
        + 'linterna y a lo lejos se ven las luces de un pesquero.',
      ca: 'De nit, el feix escombra un mar fosc; la Maya i el seu avi són a la galeria de la '
        + 'llanterna i lluny es veuen els llums d’un pesquer.',
      zh: '夜里，灯塔的光束扫过漆黑的海面；玛雅和外公站在灯室外的回廊上，远处一艘渔船亮着灯。',
      ar: 'ليلًا يمسح الشعاع بحرًا مظلمًا، ومايا وجدّها واقفان على شرفة الفانوس، وفي البعيد قارب '
        + 'صيد بأضوائه.',
      ja: '夜。光の帯が暗い海をなでる。マヤと祖父は灯室の回廊に立ち、沖には漁船の明かりが見える。',
      pt: 'À noite, o facho varre um mar escuro; Maya e o avô estão na galeria da lanterna e, ao '
        + 'longe, aparecem as luzes de um barco de pesca.' }) },
};
// #endregion

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
// Every face of the six editions; each edition loads the latin files of all of them and the
// Japanese, Chinese or Arabic files of its own two (gotcha: fonts-first).
const FONTS = {
  'Comic Neue': ['400', '400i', '700', '700i'],
  Bangers: ['400'],
  'Zen Antique': ['400'],
  'Dela Gothic One': ['400'],
  'ZCOOL KuaiLe': ['400'],
  'ZCOOL QingKe HuangYou': ['400'],
  'Playpen Sans Arabic': ['400', '700'],
  Lalezar: ['400'],
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
const faces = { [LETTERING]: FONTS[LETTERING], [SFX]: FONTS[SFX] };
await loadFonts(FONTS, markdown);
await loadCjkFonts(faces, markdown, { vertical: LANG === 'ja' }); // ja balloons are vertical
await loadArabicFonts(faces, markdown);
await loadComicFonts(faces, markdown); // the bold and italic the faces do not ship
const resources = await Promise.all([
  comicPanel('lh-arrive', asset('lh-arrive.jpg'), ART['lh-arrive']),
  comicPanel('lh-radio', asset('lh-radio.jpg'), ART['lh-radio']),
  comicPanel('lh-maya', asset('lh-maya.jpg'), ART['lh-maya']),
  comicPanel('lh-biscuit', asset('lh-biscuit.jpg'), ART['lh-biscuit']),
  comicPanel('lh-beam', asset('lh-beam.jpg'), ART['lh-beam']),
]);
const doc = await buildWithFonts(() => buildDocument({ markdown, resources }, config()), markdown);
showBook(doc, { title: t({ en: 'One set of panels, three page splits',
  es: 'Las mismas viñetas en tres divisiones de página',
  pt: 'Os mesmos quadros em três divisões de página' }) });
offerPdf(() => renderToPdf(doc, { fontProvider: comicPdfProvider, resourceBytes: imageBytes }),
  `${RECIPE}.pdf`);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## Variations

### Slant the middle tier

A size written `30~40` runs that cell's far gutter from 30% at one end to 40% at the other. Slanted cells lose their rounded corners.

```diff
-:::page{split="30 / 35 [* | * | *] / *"}
+:::page{split="30 / 35 [30~40 | * | *] / *"}
```

### Mirror the art in the right-to-left editions

Pictures keep their handedness by default. A comic drawn without lettering or clocks can follow the reading direction.

```diff
 const comics = {
+  mirrorArt: true, // pictures flip in a right-to-left edition
   gutter: { horizontal: mm(4), vertical: mm(3) },
```

## Pitfalls

- **Any headings object switches off the H1 page break.** By default an H1 breaks to a recto (always-odd), but passing any headings object resets that default, so chapters run on and span: 'page' does nothing. Restate headings.levels[0].breakBefore: { enabled: true, parity } in every config.
- **Load every face before layout.** Layout measures text with the faces the browser has loaded and caches the widths, so a face that arrives after the first build leaves wrong line breaks and a PDF that no longer matches the screen. Load every weight and style first, and call clearMeasurementCache() before rebuilding when one arrives late.

- A cell a fifth of the page wide holds about four words a line at 8 pt, and in plan C the keeper's face is in the middle of his: his two balloons about the storm are deeper than the room above or below it. There the first of the two lines carries `break` (`tomas{break}:`), so the pair may cross the gutter into Maya's panel; the engine keeps the second balloon after the first and never lets it run into the page margin. Without `break` the build warns `comicBalloonOverflow`.
- A tighter safe area gives more cells a clean crop, but whatever lies outside it may be cut: the boots in plan A's first tier, the radio in plan C.

## Credits

- Recipe: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Images: Panel picture: Maya arrives at the lighthouse: Generated With Diffusion Models, original
- Images: Panel picture: Tomás at the radio: Generated With Diffusion Models, original
- Images: Panel picture: Maya finds the problem: Generated With Diffusion Models, original
- Images: Panel picture: Biscuit asleep on the cable: Generated With Diffusion Models, original
- Images: Panel picture: the lamp lit at night: Generated With Diffusion Models, original
- Type: Comic Neue (OFL-1.1), Bangers (OFL-1.1), Zen Antique (OFL-1.1), Dela Gothic One (OFL-1.1), ZCOOL KuaiLe (OFL-1.1), ZCOOL QingKe HuangYou (OFL-1.1), Playpen Sans Arabic (OFL-1.1), Lalezar (OFL-1.1)
- Code: MIT · Sample content: CC-BY-4.0

## Related

- [Nº 147 · A splash page, an inset and a broken border](https://postext.dev/en/cookbook/splash-inset-broken-border.md): A storm in two comic pages: a full-bleed splash under an inset panel, a tier bled off three edges, a gull flying out over its border, a captions-only panel. · Level 2 (Intermediate) · Comics
- [Nº 155 · A Pepper&Carrot page re-lettered from its transcript](https://postext.dev/en/cookbook/pepper-and-carrot-page.md): Two pages of Pepper&Carrot (CC BY 4.0) set again from David Revoy’s text-free art and the official translations, every balloon lettered in six languages. · Level 3 (Advanced) · Comics
- [Nº 150 · An action page with slanted gutters](https://postext.dev/en/cookbook/manga-action-slants.md): The page that decides a kendo final: slanted gutters (40~55) in the split, a borderless strike panel, and ドン kept in Japanese under a small translation. · Level 2 (Intermediate) · Comics