# Una página splash, una viñeta insertada y un borde roto

> Una tormenta en dos páginas: una splash a sangre con una viñeta insertada, una tira sangrada por tres lados, una gaviota que cruza el borde y cartelas solas.

- Versión HTML: https://postext.dev/es/cookbook/splash-inset-broken-border
- Receta N.º 147 · Cómic y manga · Nivel 2 (Intermedio) · Salidas: Canvas, PDF
- Géneros: Cómics
- Requiere postext ≥ 1.21.0, postext-pdf ≥ 1.21.0 · probada con 1.21.0, postext-pdf 1.21.0 el 2026-10-07
- Páginas: [1](https://postext.dev/cookbook/splash-inset-broken-border/es/p01.webp?v=c6cd11d4), [2](https://postext.dev/cookbook/splash-inset-broken-border/es/p02.webp?v=c6cd11d4)
- PDF: https://postext.dev/cookbook/splash-inset-broken-border/es/splash-inset-broken-border.pdf?v=c6cd11d4
- Abrir en el Sandbox: https://postext.dev/es/sandbox#recipe=splash-inset-broken-border&lang=es (.postext: https://postext.dev/cookbook/splash-inset-broken-border/es/splash-inset-broken-border.postext)
- Última actualización: 2026-10-07
- Otros idiomas: [en](https://postext.dev/en/cookbook/splash-inset-broken-border.md), [ca](https://postext.dev/ca/cookbook/splash-inset-broken-border.md), [pt](https://postext.dev/pt/cookbook/splash-inset-broken-border.md), [zh](https://postext.dev/zh/cookbook/splash-inset-broken-border.md), [ja](https://postext.dev/ja/cookbook/splash-inset-broken-border.md), [ar](https://postext.dev/ar/cookbook/splash-inset-broken-border.md)

## En pocas palabras

Dos páginas de un cómic sobre una tormenta: una imagen enorme que llena toda la primera página con una pequeña viñeta de una niña encima, y una página en la que una gaviota sale volando de su marco.

## Lo que vas a componer

Dos páginas de la tormenta de *La luz de Porthcove*. La primera es una splash: una sola imagen del faro en plena tormenta sale por todos los bordes de la página, con una pequeña viñeta enmarcada de Maya en su ventana sobre la esquina inferior. La segunda abre con una ola sangrada por tres lados; debajo, una gaviota sale de la viñeta del farero cruzando el borde, y una viñeta estrecha sin imagen lleva dos cartelas sobre un fondo azul noche. El formato es el de un cómic americano, 168 × 259 mm con 3 mm de sangrado, y las páginas salen en seis idiomas.

**Esta receta responde a:**

- ¿Cómo saco una viñeta a sangre o dejo que el dibujo rompa el borde de la viñeta?

## La respuesta corta

```js
// script.js, líneas 44–64
// In the Markdown, the panel attributes do the work:
//   :::page{split="*" bleed}                 one panel, every edge bled off the page
//   ::panel{art=sp-maya-face inset="56 64 38 30"}   over the panel before it: x y w h in %
//   ::panel{art=sp-wave bleed="top start end"}      only the edges that touch the trim
//   ::panel{art=sp-tomas pop=sp-tomas-pop}   a transparent layer drawn over the border
//   ::panel{bg=night}                        no picture: captions on a palette colour
// A bleeding panel runs to the bleed box, 3 mm past the trim, and loses its border on those
// sides. The pop layer is cropped and placed exactly like the panel's picture, then drawn
// after the border without the panel's clip, so whatever it holds outside the cell shows.
const comics = {
  gutter: { horizontal: mm(4), vertical: mm(3) },
  panel: { borderWidth: pt(1.2), borderColor: col('ink'), background: col('paper') },
  lettering: { fontFamily: LETTERING, fontSize: pt(8.5), color: col('ink'), inset: mm(2) },
  balloonStyles: [
    { id: 'speech', stroke: col('ink') },
    { id: 'caption', fill: col('lamp'), stroke: col('ink') },
    { id: 'inner', fill: col('paper'), stroke: col('ink') },
    { id: 'sfx', fontFamily: SFX, color: col('accent'), haloColor: col('ink'), halo: pt(2) },
  ],
  runningHeads: true, // a comic page has no running head unless asked: here, its folio
};
```

## Ingredientes

**Enseña**

- [Viñetas insertadas, a sangre y con el borde roto](https://postext.dev/es/docs/comics.md#viñetas-e-imágenes): inset= superpone una viñeta pequeña a la anterior, bleed lleva la viñeta hasta el corte de la página y pop= dibuja una capa recortada de la imagen sobre el borde, para que una figura se salga de su viñeta.
- [Imagen y recorte de la viñeta](https://postext.dev/es/docs/comics.md#viñetas-e-imágenes): art= pone una imagen en la viñeta y la recorta a la celda alrededor de su zona segura, de modo que la misma imagen sirve para cualquier división; focus= elige el punto que se conserva y fit=contain muestra la imagen entera.

**También usa**

- [División en viñetas](https://postext.dev/es/docs/comics.md#dividir-la-página)
- [Bordes y calles de las viñetas](https://postext.dev/es/docs/comics.md#viñetas-e-imágenes)
- [Onomatopeyas](https://postext.dev/es/docs/comics.md#estilos-de-bocadillo)
- [Páginas de cómic](https://postext.dev/es/docs/comics.md#páginas-de-cómic)
- [Rotulación de cómic](https://postext.dev/es/docs/comics.md#rotulación)
- [Rotular en otros idiomas](https://postext.dev/es/docs/comics.md#rotulación)
- [Estilos de bocadillo](https://postext.dev/es/docs/comics.md#estilos-de-bocadillo)
- [Zona segura de la imagen](https://postext.dev/es/docs/document-format.md#zona-segura)
- [Paleta de color semántica](https://postext.dev/es/docs/configuration.md#paleta-de-colores)
- [Páginas en un canvas](https://postext.dev/es/docs/configuration.md#renderizar-una-página-a-un-bitmap)
- [Exportación a PDF](https://postext.dev/es/docs/configuration.md#generación-de-pdf)
- [Color del papel](https://postext.dev/es/docs/configuration.md#página)
- [Fuentes incrustadas en el PDF](https://postext.dev/es/docs/configuration.md#por-qué-un-proveedor-de-fuentes)
- [Figuras y tablas como recursos](https://postext.dev/es/docs/document-format.md#recursos)

**La configuración de un vistazo**

- [`bodyText`](https://postext.dev/es/docs/configuration.md#texto-de-cuerpo), [`colorPalette`](https://postext.dev/es/docs/configuration.md#paleta-de-colores), [`comics`](https://postext.dev/es/docs/comics.md#páginas-de-cómic), [`footer`](https://postext.dev/es/docs/configuration.md#encabezados-y-pies), [`header`](https://postext.dev/es/docs/configuration.md#encabezados-y-pies), [`headings`](https://postext.dev/es/docs/configuration.md#encabezados), [`layout`](https://postext.dev/es/docs/configuration.md#disposición), [`locale`](https://postext.dev/es/docs/configuration.md#separación-silábica), [`page`](https://postext.dev/es/docs/configuration.md#página)

**API**

- [`buildDocument`](https://postext.dev/es/docs/configuration.md#construir-un-documento), [`clearMeasurementCache`](https://postext.dev/es/docs/configuration.md#caché-de-medidas), [`decompressWoff2`](https://postext.dev/es/docs/configuration.md#proveedor-de-fuentes-en-el-navegador-fontsource--woff2), `loadVerticalAlternates`, [`registerResourceImage`](https://postext.dev/es/docs/architecture.md#superficie-de-api), [`renderPageToCanvas`](https://postext.dev/es/docs/configuration.md#renderizar-una-página-a-un-bitmap), [`renderToPdf`](https://postext.dev/es/docs/configuration.md#generación-de-pdf)

**Tipografías**

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

## Elaboración

### 1 · Saca la splash a sangre por todos los lados

El código es [la respuesta corta](https://postext.dev/es/cookbook/splash-inset-broken-border.md#la-respuesta-corta) de arriba. `split="*"` hace una sola celda con todo el marco, y `bleed` en la página lleva cada viñeta que toca el marco hasta la caja de sangrado, 3 mm más allá del corte, sin filete en esos lados ([dividir la página](https://postext.dev/es/docs/comics.md#dividir-la-página)). En la página 2, `bleed="top start end"` en la ola sangra solo esos tres lados; su pie conserva la calle con las viñetas de abajo. `start` y `end` siguen el sentido de lectura, así que las ediciones japonesa y árabe, que se leen de derecha a izquierda, sangran los mismos lados.

### 2 · Pon una viñeta insertada sobre la splash

`inset="56 64 38 30"` coloca la viñeta de Maya en el 56 %, 64 % de la viñeta anterior, con un 38 % de ancho y un 30 % de alto. Una viñeta insertada no ocupa celda: se superpone a la splash, conserva su propio filete y se lee justo después de ella. Su imagen se recorta a su propia caja según su zona segura, aquí la cara de Maya.

![Página 1. La splash: el faro en una noche de tormenta, a sangre por los cuatro lados, ¡BRRROOM! en letras blancas junto al rayo, una cartela arriba a la izquierda y una pequeña viñeta enmarcada con la cara de Maya tras una ventana con lluvia, abajo a la derecha.](https://postext.dev/cookbook/splash-inset-broken-border/es/p01.webp?v=c6cd11d4)

*La viñeta insertada: la cara de Maya en su marco sobre la esquina inferior de la splash, con su voz interior.*

### 3 · Deja que una gaviota rompa el borde

```js
// script.js, líneas 111–173
// From the art manifest; fractions of each picture, the same in every language. The gull's
// layer is a transparent PNG the size of the keeper's picture, so it shares its crop.
const face = (x, y, width, height) => ({ x, y, width, height });
const ART = {
  'sp-splash': { width: 708, height: 1000, safeArea: face(0.26, 0.14, 0.6, 0.48),
    anchors: [{ id: 'sfx', x: 0.82, y: 0.4 }], avoid: [face(0.28, 0.15, 0.17, 0.35)] },
  'sp-maya-face': { width: 1000, height: 1000, safeArea: face(0.33, 0.26, 0.35, 0.34),
    anchors: [{ id: 'maya', x: 0.52, y: 0.48, face: face(0.37, 0.27, 0.29, 0.31) }] },
  'sp-wave': { width: 1400, height: 600, safeArea: face(0.4, 0.12, 0.53, 0.6),
    anchors: [{ id: 'sfx', x: 0.6, y: 0.35 }], avoid: [face(0.82, 0.02, 0.06, 0.3)] },
  'sp-tomas': { width: 1000, height: 1000, safeArea: face(0.22, 0.13, 0.6, 0.49),
    anchors: [{ id: 'tomas', x: 0.63, y: 0.345, head: { x: 0.67, y: 0.24 },
      face: face(0.56, 0.17, 0.24, 0.25) }], avoid: [face(0.32, 0.13, 0.15, 0.33)] },
  'sp-tomas-pop': { width: 1000, height: 1000 },
};
const ALT = {
  'sp-splash': t({ en: 'The red-and-white lighthouse in a night storm, waves exploding on the '
      + 'rocks, its beam cutting through the rain, lightning behind.',
    es: 'El faro rojo y blanco en una noche de tormenta: las olas revientan en las rocas, el haz '
      + 'corta la lluvia y detrás cae un rayo.',
    ca: 'El far vermell i blanc en una nit de tempesta: les onades esclaten a les roques, el feix '
      + 'talla la pluja i al darrere cau un llamp.',
    zh: '暴风雨之夜，红白相间的灯塔，浪头在礁石上炸开，光束穿过雨幕，后面是闪电。',
    ar: 'المنارة الحمراء والبيضاء في ليلة عاصفة، والموج يتفجّر على الصخور، وشعاعها يشقّ المطر، '
      + 'وخلفها برق.',
    ja: '嵐の夜の赤と白の灯台。岩に波が砕け、光の帯が雨を切り裂き、後ろで稲妻が光る。',
    pt: 'O farol vermelho e branco numa noite de tempestade: as ondas arrebentam nas pedras, o '
      + 'facho corta a chuva e, atrás, cai um raio.' }),
  'sp-maya-face': t({ en: 'Maya’s face behind a rain-streaked window, hood up, lit by the lamp.',
    es: 'La cara de Maya tras una ventana surcada de lluvia, con la capucha puesta y la luz de la '
      + 'lámpara.',
    ca: 'La cara de la Maya darrere una finestra plena de pluja, amb la caputxa posada i la llum '
      + 'del llum.',
    zh: '玛雅戴着兜帽，脸贴在满是雨痕的窗后，被灯光照亮。',
    ar: 'وجه مايا خلف نافذة يسيل عليها المطر، والقلنسوة على رأسها، ونور المصباح عليها.',
    ja: '雨の筋が流れる窓の向こうに、フードをかぶったマヤの顔。ランプの光に照らされている。',
    pt: 'O rosto de Maya atrás de uma janela riscada de chuva, de capuz, à luz da lamparina.' }),
  'sp-wave': t({ en: 'A huge wave bursts over black rocks below the lighthouse at night.',
    es: 'Una ola enorme revienta sobre las rocas negras al pie del faro, de noche.',
    ca: 'Una onada enorme esclata sobre les roques negres al peu del far, de nit.',
    zh: '夜里，一道巨浪在灯塔下的黑色礁石上炸开。',
    ar: 'موجة هائلة تتفجّر ليلًا فوق الصخور السوداء تحت المنارة.',
    ja: '夜、灯台の下の黒い岩に巨大な波が砕け散る。',
    pt: 'Uma onda enorme arrebenta nas pedras negras ao pé do farol, à noite.' }),
  'sp-tomas': t({ en: 'The keeper in an oilskin on the lantern gallery holds up a storm lantern, '
      + 'his beard whipping in the wind.',
    es: 'El farero, con impermeable de hule en la galería, levanta un farol; el viento le agita '
      + 'la barba.',
    ca: 'El faroner, amb impermeable d’hule a la galeria, aixeca un fanal; el vent li remena la '
      + 'barba.',
    zh: '守塔人穿着油布雨衣站在灯室回廊上，高举一盏防风灯，胡子被风吹得乱飞。',
    ar: 'الحارس بمعطفه المشمّع على شرفة الفانوس يرفع مصباح العاصفة، والريح تعبث بلحيته.',
    ja: '油合羽の灯台守が回廊でカンテラを掲げる。ひげが風にあおられている。',
    pt: 'O faroleiro, de capa impermeável na galeria, ergue um lampião; o vento agita a barba '
      + 'dele.' }),
  'sp-tomas-pop': t({ en: 'A herring gull flies out across the panel’s left border.',
    es: 'Una gaviota sale volando por el borde izquierdo de la viñeta.',
    ca: 'Una gavina surt volant per la vora esquerra de la vinyeta.',
    zh: '一只银鸥飞出格子的左边框。',
    ar: 'نورس فضي يطير خارجًا عبر الحافة اليسرى للإطار.',
    ja: 'セグロカモメがコマの左の枠を越えて飛んでいく。',
    pt: 'Uma gaivota sai voando pela borda esquerda do quadro.' }),
};
```

`pop=sp-tomas-pop` da a la viñeta del farero una segunda imagen: un PNG transparente del tamaño de su dibujo en el que solo está la gaviota. Postext la recorta y la coloca exactamente como el dibujo de la viñeta, y la pinta después del filete y fuera del recorte de la viñeta, así que la parte de la gaviota que queda fuera de la celda vuela sobre el borde y el margen ([viñetas e imágenes](https://postext.dev/es/docs/comics.md#viñetas-e-imágenes)). `focus="45% 50%"` desplaza el encuadre a la izquierda dentro de lo que permite la zona segura, para que la gaviota cruce el borde izquierdo en vez de quedarse en el margen.

### 4 · Deja una viñeta sin imagen

```js
// script.js, líneas 20–32
const palette = {
  ink: '#141b24', // panel borders and lettering
  night: '#1d2a3a', // the ground of the text-only panel
  lamp: '#f2c14e', // the captions: the colour of the lantern
  accent: '#e9f0f5', // sound effects: surf white, outlined in ink
  muted: '#5c6672', // folios
  paper: '#fbfaf7',
};
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' } },
];
```

Un `::panel` sin `art` es una celda vacía con el filete del estilo de viñeta; `bg=night` la rellena con un color de la paleta. Sus cartelas, `at=top` y `at=bottom`, se encajan en los bordes superior e inferior: una pausa después de la tormenta.

## La receta completa

Un solo archivo, compuesto a partir de la carpeta de la receta con el texto de ejemplo y el kit común del Recetario ya incluidos; construye su propia página. Para ejecutarlo, ponlo en un `<script type="module">` de una página vacía o pégalo en el panel JS de un pen nuevo de CodePen (como módulo). Importa postext desde esm.sh, así que no hay nada que instalar ni compilar.

- Carpeta de la receta: https://github.com/drnachio/postext/tree/main/cookbook/splash-inset-broken-border

### script.js

```js
// ═══ Postext Cookbook · Nº 147 · A splash page, an inset and a broken border ═══════
// https://postext.dev/en/cookbook/splash-inset-broken-border
// 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
//
// Two pages of a storm: a splash page that bleeds off all four edges with a small inset panel
// laid over it, then a page whose top tier bleeds off three edges, whose second panel lets a
// gull fly out over its border, and whose last panel holds only captions on a night-blue ground.
import {
  buildDocument, renderPageToCanvas, clearMeasurementCache, registerResourceImage,
  loadVerticalAlternates,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'es'; // @lang: the sample's language: 'en' | 'es' | 'ca' | 'zh' | 'ar' | 'ja' | 'pt'
const RECIPE = 'splash-inset-broken-border';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: storm blue, lamplight and the white of the surf
const palette = {
  ink: '#141b24', // panel borders and lettering
  night: '#1d2a3a', // the ground of the text-only panel
  lamp: '#f2c14e', // the captions: the colour of the lantern
  accent: '#e9f0f5', // sound effects: surf white, outlined in ink
  muted: '#5c6672', // folios
  paper: '#fbfaf7',
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = [
  ...Object.entries(palette).map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } })),
  { id: 'main-color', name: 'ink (defaults)', value: { hex: palette.ink, model: 'hex' } },
];
// #endregion

// #region editions: six editions, each lettered in faces for its script
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: a bleed, an inset and a pop-out, written on the panels themselves
// In the Markdown, the panel attributes do the work:
//   :::page{split="*" bleed}                 one panel, every edge bled off the page
//   ::panel{art=sp-maya-face inset="56 64 38 30"}   over the panel before it: x y w h in %
//   ::panel{art=sp-wave bleed="top start end"}      only the edges that touch the trim
//   ::panel{art=sp-tomas pop=sp-tomas-pop}   a transparent layer drawn over the border
//   ::panel{bg=night}                        no picture: captions on a palette colour
// A bleeding panel runs to the bleed box, 3 mm past the trim, and loses its border on those
// sides. The pop layer is cropped and placed exactly like the panel's picture, then drawn
// after the border without the panel's clip, so whatever it holds outside the cell shows.
const comics = {
  gutter: { horizontal: mm(4), vertical: mm(3) },
  panel: { borderWidth: pt(1.2), borderColor: col('ink'), background: col('paper') },
  lettering: { fontFamily: LETTERING, fontSize: pt(8.5), color: col('ink'), inset: mm(2) },
  balloonStyles: [
    { id: 'speech', stroke: col('ink') },
    { id: 'caption', fill: col('lamp'), stroke: col('ink') },
    { id: 'inner', fill: col('paper'), stroke: col('ink') },
    { id: 'sfx', fontFamily: SFX, color: col('accent'), haloColor: col('ink'), halo: pt(2) },
  ],
  runningHeads: true, // a comic page has no running head unless asked: here, its folio
};
// #endregion

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

const config = () => ({ // a factory: the engine caches resolved configs per object
  locale: t({ en: 'en-gb', 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, with 3 mm of bleed.
  page: { sizePreset: 'custom', width: mm(168), height: mm(259), bleed: mm(3), dpi: 150,
    backgroundColor: col('paper'),
    margins: { top: mm(14), bottom: mm(16), left: mm(13), right: mm(11), mirror: true } },
  layout: { layoutType: 'single' },
  bodyText: { fontFamily: LETTERING, fontSize: pt(10), lineHeight: pt(14), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink') },
  headings: { fontFamily: SFX, color: col('ink'),
    // Restated: any headings object drops the H1 break (gotcha: headings-drop-h1-break).
    levels: [{ level: 1, fontSize: pt(30), breakBefore: { enabled: true, parity: 'any' } }] },
  header: { elements: [] }, footer,
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`:::page{split="*" bleed}
::panel{art=sp-splash}
caption{at=top-start}: La noche del gran temporal, la luz de Porthcove no se apagó ni un momento.
sfx{at="82% 42%" rotate=8 size=1.4}: ¡BRRROOM!
::panel{art=sp-maya-face inset="56 64 38 30"}
maya{inner}: El abuelo sigue ahí fuera, en la galería.
:::

:::page{split="36 / * [72 | *]"}
::panel{art=sp-wave bleed="top start end"}
sfx{at="60% 32%" rotate=-6 size=1.6}: ¡CHAAAS!
caption{at=top-start}: El mar subía por las rocas como si quisiera llevarse la casa.
::panel{art=sp-tomas pop=sp-tomas-pop focus="45% 50%"}
tomas: Tranquila, vieja. Las has visto peores.
tomas: Y yo también.
::panel{bg=night}
caption{at=top}: Al amanecer el viento amainó.
caption{at=bottom}: Las gaviotas fueron las primeras en volver.
:::
`; // content.<lang>.md, inlined by the Cookbook

// #region art: the five pictures and the gull's layer
// From the art manifest; fractions of each picture, the same in every language. The gull's
// layer is a transparent PNG the size of the keeper's picture, so it shares its crop.
const face = (x, y, width, height) => ({ x, y, width, height });
const ART = {
  'sp-splash': { width: 708, height: 1000, safeArea: face(0.26, 0.14, 0.6, 0.48),
    anchors: [{ id: 'sfx', x: 0.82, y: 0.4 }], avoid: [face(0.28, 0.15, 0.17, 0.35)] },
  'sp-maya-face': { width: 1000, height: 1000, safeArea: face(0.33, 0.26, 0.35, 0.34),
    anchors: [{ id: 'maya', x: 0.52, y: 0.48, face: face(0.37, 0.27, 0.29, 0.31) }] },
  'sp-wave': { width: 1400, height: 600, safeArea: face(0.4, 0.12, 0.53, 0.6),
    anchors: [{ id: 'sfx', x: 0.6, y: 0.35 }], avoid: [face(0.82, 0.02, 0.06, 0.3)] },
  'sp-tomas': { width: 1000, height: 1000, safeArea: face(0.22, 0.13, 0.6, 0.49),
    anchors: [{ id: 'tomas', x: 0.63, y: 0.345, head: { x: 0.67, y: 0.24 },
      face: face(0.56, 0.17, 0.24, 0.25) }], avoid: [face(0.32, 0.13, 0.15, 0.33)] },
  'sp-tomas-pop': { width: 1000, height: 1000 },
};
const ALT = {
  'sp-splash': t({ en: 'The red-and-white lighthouse in a night storm, waves exploding on the '
      + 'rocks, its beam cutting through the rain, lightning behind.',
    es: 'El faro rojo y blanco en una noche de tormenta: las olas revientan en las rocas, el haz '
      + 'corta la lluvia y detrás cae un rayo.',
    ca: 'El far vermell i blanc en una nit de tempesta: les onades esclaten a les roques, el feix '
      + 'talla la pluja i al darrere cau un llamp.',
    zh: '暴风雨之夜，红白相间的灯塔，浪头在礁石上炸开，光束穿过雨幕，后面是闪电。',
    ar: 'المنارة الحمراء والبيضاء في ليلة عاصفة، والموج يتفجّر على الصخور، وشعاعها يشقّ المطر، '
      + 'وخلفها برق.',
    ja: '嵐の夜の赤と白の灯台。岩に波が砕け、光の帯が雨を切り裂き、後ろで稲妻が光る。',
    pt: 'O farol vermelho e branco numa noite de tempestade: as ondas arrebentam nas pedras, o '
      + 'facho corta a chuva e, atrás, cai um raio.' }),
  'sp-maya-face': t({ en: 'Maya’s face behind a rain-streaked window, hood up, lit by the lamp.',
    es: 'La cara de Maya tras una ventana surcada de lluvia, con la capucha puesta y la luz de la '
      + 'lámpara.',
    ca: 'La cara de la Maya darrere una finestra plena de pluja, amb la caputxa posada i la llum '
      + 'del llum.',
    zh: '玛雅戴着兜帽，脸贴在满是雨痕的窗后，被灯光照亮。',
    ar: 'وجه مايا خلف نافذة يسيل عليها المطر، والقلنسوة على رأسها، ونور المصباح عليها.',
    ja: '雨の筋が流れる窓の向こうに、フードをかぶったマヤの顔。ランプの光に照らされている。',
    pt: 'O rosto de Maya atrás de uma janela riscada de chuva, de capuz, à luz da lamparina.' }),
  'sp-wave': t({ en: 'A huge wave bursts over black rocks below the lighthouse at night.',
    es: 'Una ola enorme revienta sobre las rocas negras al pie del faro, de noche.',
    ca: 'Una onada enorme esclata sobre les roques negres al peu del far, de nit.',
    zh: '夜里，一道巨浪在灯塔下的黑色礁石上炸开。',
    ar: 'موجة هائلة تتفجّر ليلًا فوق الصخور السوداء تحت المنارة.',
    ja: '夜、灯台の下の黒い岩に巨大な波が砕け散る。',
    pt: 'Uma onda enorme arrebenta nas pedras negras ao pé do farol, à noite.' }),
  'sp-tomas': t({ en: 'The keeper in an oilskin on the lantern gallery holds up a storm lantern, '
      + 'his beard whipping in the wind.',
    es: 'El farero, con impermeable de hule en la galería, levanta un farol; el viento le agita '
      + 'la barba.',
    ca: 'El faroner, amb impermeable d’hule a la galeria, aixeca un fanal; el vent li remena la '
      + 'barba.',
    zh: '守塔人穿着油布雨衣站在灯室回廊上，高举一盏防风灯，胡子被风吹得乱飞。',
    ar: 'الحارس بمعطفه المشمّع على شرفة الفانوس يرفع مصباح العاصفة، والريح تعبث بلحيته.',
    ja: '油合羽の灯台守が回廊でカンテラを掲げる。ひげが風にあおられている。',
    pt: 'O faroleiro, de capa impermeável na galeria, ergue um lampião; o vento agita a barba '
      + 'dele.' }),
  'sp-tomas-pop': t({ en: 'A herring gull flies out across the panel’s left border.',
    es: 'Una gaviota sale volando por el borde izquierdo de la viñeta.',
    ca: 'Una gavina surt volant per la vora esquerra de la vinyeta.',
    zh: '一只银鸥飞出格子的左边框。',
    ar: 'نورس فضي يطير خارجًا عبر الحافة اليسرى للإطار.',
    ja: 'セグロカモメがコマの左の枠を越えて飛んでいく。',
    pt: 'Uma gaivota sai voando pela borda esquerda do quadro.' }),
};
// #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 panel = (id, url) => comicPanel(id, url, { ...ART[id], alt: ALT[id] });
const resources = await Promise.all([
  panel('sp-splash', asset('sp-splash.jpg')), panel('sp-maya-face', asset('sp-maya-face.jpg')),
  panel('sp-wave', asset('sp-wave.jpg')), panel('sp-tomas', asset('sp-tomas.jpg')),
  panel('sp-tomas-pop', asset('sp-tomas-pop.png')),
]);
const doc = await buildWithFonts(() => buildDocument({ markdown, resources }, config()), markdown);
showBook(doc, { title: t({ en: 'A splash page, an inset and a broken border',
  es: 'Una página splash, una viñeta insertada y un borde roto',
  pt: 'Uma página splash, um quadro inserido e uma borda quebrada' }) });
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 ───────────────────────────────────────────────────────────────────────
```

## Variantes

### Sangra también la tira de abajo

```diff
-::panel{art=sp-tomas pop=sp-tomas-pop focus="45% 50%"}
+::panel{art=sp-tomas pop=sp-tomas-pop focus="45% 50%" bleed="bottom start"}
```

### Da a la viñeta insertada un marco blanco

Un estilo de viñeta con nombre cambia una sola viñeta; `style=` en la viñeta lo elige.

```diff
   panel: { borderWidth: pt(1.2), borderColor: col('ink'), background: col('paper') },
+  panelStyles: [{ id: 'framed', borderWidth: pt(3), borderColor: col('paper') }],
```

## Errores frecuentes

- **Cualquier objeto headings desactiva el salto de página del H1.** Por defecto un H1 salta a una página impar (always-odd), pero cualquier objeto headings anula ese valor, así que los capítulos van seguidos y span: 'page' no hace nada. Vuelve a declarar headings.levels[0].breakBefore: { enabled: true, parity } en cada configuración.
- **Carga todas las fuentes antes de componer.** La composición mide el texto con las fuentes que el navegador ha cargado y guarda los anchos, así que una fuente que llega después de la primera composición deja cortes de línea erróneos y un PDF que ya no coincide con la pantalla. Carga antes todos los pesos y estilos, y llama a clearMeasurementCache() antes de recomponer si alguna llega tarde.

- La capa emergente debe tener exactamente el tamaño en píxeles de la imagen de la viñeta: Postext la recorta con la misma ventana, así que un recorte más pequeño caería en otro sitio.
- El sangrado necesita `page.bleed`; sin él, una viñeta a sangre se detiene en el corte.
- Una onomatopeya junto a un borde sangrado puede entrar en el sangrado, más allá del corte, donde la guillotina la recorta. La ザッバーン japonesa es una columna de cinco caracteres, así que va fijada más abajo que las onomatopeyas latinas, en `60% 44%`.

## Créditos

- Receta: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Imágenes: Viñeta: el faro en la tormenta (splash): Generated With Diffusion Models, original
- Imágenes: Viñeta: Maya en la ventana (viñeta insertada): Generated With Diffusion Models, original
- Imágenes: Viñeta: la ola en las rocas: Generated With Diffusion Models, original
- Imágenes: Viñeta: el farero en la galería: Generated With Diffusion Models, original
- Imágenes: Viñeta: la gaviota que vuela sobre el borde (capa transparente): Generated With Diffusion Models, original
- Tipografías: 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)
- Código: MIT · Contenido de ejemplo: CC-BY-4.0

## Relacionadas

- [N.º 144 · Las mismas viñetas en tres divisiones de página](https://postext.dev/es/cookbook/comic-page-splitters.md): Cinco viñetas en tres árboles de división: split en :::page corta la página y la zona segura de cada imagen mantiene a la vista lo importante. · Nivel 2 (Intermedio) · Cómics
- [N.º 155 · Una página de Pepper&Carrot rotulada desde su transcripción](https://postext.dev/es/cookbook/pepper-and-carrot-page.md): Dos páginas de Pepper&Carrot (CC BY 4.0) compuestas con los dibujos sin texto de David Revoy y las traducciones oficiales, rotuladas en seis idiomas. · Nivel 3 (Avanzado) · Cómics
- [N.º 145 · Todos los bocadillos en una página del faro](https://postext.dev/es/cookbook/balloon-kinds.md): Una página de cómic con diálogo, pensamiento, susurro, grito, radio, cartela, voz interior, nota del editor y onomatopeyas, cada uno nombrado entre llaves. · Nivel 2 (Intermedio) · Cómics