# Cahier d’écriture en dix modèles scolaires

> Un premier cahier d’écriture dans chaque langue du site : l’écriture scolaire de chaque pays sur sa réglure, un modèle, des pointillés et des lignes vides.

- Version HTML: https://postext.dev/fr/cookbook/handwriting-workbook
- Recette Nº 161 · Publications complètes · Niveau 2 (Intermédiaire) · Sorties: Canvas, PDF
- Genres: Cahiers et exercices, Manuels scolaires
- Nécessite postext ≥ 1.42.1, postext-pdf ≥ 1.42.1 · testée avec 1.43.0, postext-pdf 1.43.0 le 2026-10-18
- Pages: [1](https://postext.dev/cookbook/handwriting-workbook/fr/p01.webp?v=a64f0e43), [2](https://postext.dev/cookbook/handwriting-workbook/fr/p02.webp?v=a64f0e43), [3](https://postext.dev/cookbook/handwriting-workbook/fr/p03.webp?v=a64f0e43), [4](https://postext.dev/cookbook/handwriting-workbook/fr/p04.webp?v=a64f0e43), [5](https://postext.dev/cookbook/handwriting-workbook/fr/p05.webp?v=a64f0e43), [6](https://postext.dev/cookbook/handwriting-workbook/fr/p06.webp?v=a64f0e43), [7](https://postext.dev/cookbook/handwriting-workbook/fr/p07.webp?v=a64f0e43), [8](https://postext.dev/cookbook/handwriting-workbook/fr/p08.webp?v=a64f0e43), [9](https://postext.dev/cookbook/handwriting-workbook/fr/p09.webp?v=a64f0e43), [10](https://postext.dev/cookbook/handwriting-workbook/fr/p10.webp?v=a64f0e43), [11](https://postext.dev/cookbook/handwriting-workbook/fr/p11.webp?v=a64f0e43), [12](https://postext.dev/cookbook/handwriting-workbook/fr/p12.webp?v=a64f0e43)
- PDF: https://postext.dev/cookbook/handwriting-workbook/fr/handwriting-workbook.pdf?v=a64f0e43
- Ouvrir dans le Sandbox: https://postext.dev/fr/sandbox#recipe=handwriting-workbook&lang=fr (.postext: https://postext.dev/cookbook/handwriting-workbook/fr/handwriting-workbook.postext)
- Dernière mise à jour: 2026-10-18
- Autres langues: [en](https://postext.dev/en/cookbook/handwriting-workbook.md), [es](https://postext.dev/es/cookbook/handwriting-workbook.md), [ca](https://postext.dev/ca/cookbook/handwriting-workbook.md), [de](https://postext.dev/de/cookbook/handwriting-workbook.md), [it](https://postext.dev/it/cookbook/handwriting-workbook.md), [pt](https://postext.dev/pt/cookbook/handwriting-workbook.md), [zh](https://postext.dev/zh/cookbook/handwriting-workbook.md), [ja](https://postext.dev/ja/cookbook/handwriting-workbook.md), [ar](https://postext.dev/ar/cookbook/handwriting-workbook.md)

## En bref

Un cahier d’écriture pour enfants fait dix fois, une par langue. Chaque leçon montre un mot écrit, puis en pointillés à repasser, puis des lignes vides, avec l’écriture attachée et le papier des écoles de chaque pays.

## Ce que vous allez composer

Douze pages d’un cahier d’écriture de CP au format A4, en dix éditions qui sont dix cahiers différents. Chaque langue reçoit l’écriture attachée qu’enseignent ses écoles, tirée des familles Playwrite de Google (GB J, ES, FR Trad, DE VA, IT Trad, BR) ou de Playpen Sans Arabic, sur le papier où écrivent ses enfants : la *pauta* espagnole, les carreaux Seyès avec leur marge rouge, la *Lineatur* allemande et sa bande médiane jaune, les lignes de *caligrafia* brésiliennes. L’édition chinoise écrit dans des cases 田字格, où l’enfant repasse des caractères rouge pâle (描红), avec le pinyin sur quatre lignes ; la japonaise dans des cases マス barrées d’une croix pointillée, où l’on repasse en gris (なぞり書き). Les leçons suivent l’orthographe de chaque langue : les accents et la cédille en français, le ñ et le h muet en espagnol, le l·l en catalan, le ß et les noms à majuscule en allemand, les particules は, を et へ en japonais, les quatre formes d’une lettre et les lettres qui ne s’attachent pas en arabe. Chaque ligne va du modèle aux pointillés, puis à rien. Les vingt-neuf peintures, générées avec un modèle de diffusion, servent à toutes les éditions.

**Cette recette répond à:**

- Comment faire un cahier d’écriture avec modèle, pointillés et lignes vides sur la réglure de chaque pays ?
- Comment construire une fiche d’exercices : lignes à remplir, cases de réponse, banques de mots, listes de contrôle ?

## La réponse courte

```js
// script.js, lignes 75–91
// ### Repasa y escribe {w="nina" model="niña"} draws four rows on the edition's ruling: the
// model and dotted copies, a row of dots, the model and one copy, and an empty row. The
// ruling and the dots are one picture per block ('trazo-' + w, drawn under #region art); the
// models are live text set on its baselines. A design text's baseline falls 0.8 of its line
// below the box top, so a box of line L set at baseline − 0.8 L puts the letters on the line.
const G = CJK ? null : geometry(ED.ruling, ED.u); // rows, baselines and the face's size
const LABEL_H = 7; // mm: the block's label above its ruling
const model = (id, row, extra = {}) => text(id, '{attr.model}', HAND, G.size / 0.3528,
  at('container', 'top-left', 0, LABEL_H + G.base[row] - 0.8 * G.line,
    { width: mm(W) }), { lineHeight: mm(G.line), overflow: 'clip', ...extra });
const wordBlock = (rows, again = true) => ({ enabled: true,
  minHeight: mm(LABEL_H + G.height(rows)), slot: { elements: [label('label'),
    image('trazo', 'trazo-{attr.w}', at('container', 'top-left', 0, LABEL_H,
      box(W, G.height(rows)))),
    model('model-1', 0),
    ...(again ? [model('model-3', 2)] : []), // a sentence is written out once
  ] } });
```

## Ingrédients

**Enseigne**

- [Ouvertures composées](https://postext.dev/fr/docs/configuration-headings.md#étendue-et-maquette-avancée): Un titre dessiné comme une composition libre de texte, de filets, de boîtes et d’images, qui réserve au-dessus du texte courant la hauteur dont il a besoin.
- [Attributs de titre](https://postext.dev/fr/docs/document-format.md#attributs-de-titre): Des paires clé–valeur sur un titre (auteur, surtitre, chapeau) que les ouvertures, les titres courants et la table des matières impriment au moyen de {attr.name}.
- [Images dans les maquettes de page](https://postext.dev/fr/docs/configuration-headers-footers.md#éléments-image): Logos, photos et ornements placés dans les en-têtes, pieds de page, ouvertures et pages de partie, dimensionnés en conservant leurs proportions.

**Utilise aussi**

- [Styles de titre](https://postext.dev/fr/docs/configuration-styles.md#styles-de-titre)
- [Couvertures, pages de titre et colophons](https://postext.dev/fr/docs/configuration-styles.md#styles-de-titre)
- [Texte, filets et boîtes dans les maquettes de page](https://postext.dev/fr/docs/configuration-headers-footers.md#en-têtes-et-pieds-de-page)
- [Pastilles dans le texte](https://postext.dev/fr/docs/configuration-styles.md#styles-de-pastille)
- [Encadrés](https://postext.dev/fr/docs/configuration-callouts.md#styles-dencadré)
- [Palette de couleurs sémantique](https://postext.dev/fr/docs/configuration-fonts-colors-viewers.md#palette-de-couleurs)
- [Césure et langue du document](https://postext.dev/fr/docs/justification.md#langues-prises-en-charge)
- [Titres courants selon le rôle de la page](https://postext.dev/fr/docs/configuration-headers-footers.md#éléments-de-texte)
- [Marges en miroir](https://postext.dev/fr/docs/configuration-page-layout.md#marges-en-miroir)
- [Polices arabes](https://postext.dev/fr/docs/arabic-layout.md#polices)
- [Polices chinoises, japonaises et coréennes](https://postext.dev/fr/docs/configuration-pdf-output.md#polices-chinoises-japonaises-et-coréennes)
- [Livres reliés à droite](https://postext.dev/fr/docs/configuration-page-layout.md#reliure)
- [Texte de droite à gauche](https://postext.dev/fr/docs/arabic-layout.md#sens-décriture-et-algorithme-bidirectionnel)
- [Kana, kanji et rōmaji](https://postext.dev/fr/docs/japanese-layout.md#kanji-kana-et-rōmaji)
- [Pages sur un canvas](https://postext.dev/fr/docs/configuration-programmatic-usage.md#rendre-une-page-en-bitmap)
- [Export PDF](https://postext.dev/fr/docs/configuration-pdf-output.md#générer-des-pdf)
- [Polices intégrées au PDF](https://postext.dev/fr/docs/configuration-pdf-output.md#pourquoi-un-fournisseur-de-polices)
- [Types de ressource personnalisés](https://postext.dev/fr/docs/configuration-resources.md#types-de-ressources)
- [Figures et tableaux comme ressources](https://postext.dev/fr/docs/document-format-resources.md#ressources)
- [Titres courants par section](https://postext.dev/fr/docs/configuration-styles.md#styles-de-titre)

**La configuration en un coup d’œil**

- [`bodyText`](https://postext.dev/fr/docs/configuration-text.md#texte-courant), [`calloutStyles`](https://postext.dev/fr/docs/configuration-callouts.md#styles-dencadré), [`chipStyles`](https://postext.dev/fr/docs/configuration-styles.md#styles-de-pastille), [`colorPalette`](https://postext.dev/fr/docs/configuration-fonts-colors-viewers.md#palette-de-couleurs), [`footer`](https://postext.dev/fr/docs/configuration-headers-footers.md#en-têtes-et-pieds-de-page), [`header`](https://postext.dev/fr/docs/configuration-headers-footers.md#en-têtes-et-pieds-de-page), [`headingStyles`](https://postext.dev/fr/docs/configuration-styles.md#styles-de-titre), [`headings`](https://postext.dev/fr/docs/configuration-headings.md#titres), [`layout`](https://postext.dev/fr/docs/configuration-page-layout.md#mise-en-page), [`locale`](https://postext.dev/fr/docs/configuration-language.md#césure), [`page`](https://postext.dev/fr/docs/configuration-page-layout.md#page), [`resourceTypes`](https://postext.dev/fr/docs/configuration-resources.md#types-de-ressources)

**API**

- [`buildDocument`](https://postext.dev/fr/docs/configuration-programmatic-usage.md#construire-un-document), [`decompressWoff2`](https://postext.dev/fr/docs/configuration-pdf-output.md#fournisseur-de-polices-dans-le-navigateur-fontsource--woff2), [`registerResourceImage`](https://postext.dev/fr/docs/architecture.md#surface-de-lapi), [`renderPageToCanvas`](https://postext.dev/fr/docs/configuration-programmatic-usage.md#rendre-une-page-en-bitmap), [`renderToPdf`](https://postext.dev/fr/docs/configuration-pdf-output.md#générer-des-pdf), [`withLoadedFonts`](https://postext.dev/fr/docs/configuration-programmatic-usage.md#charger-les-polices-avant-la-mise-en-page)

**Caractères**

- Andika (OFL-1.1), Lexend (OFL-1.1), Playwrite GB J (OFL-1.1), Playwrite ES (OFL-1.1), Playwrite FR Trad (OFL-1.1), Playwrite DE VA (OFL-1.1), Playwrite IT Trad (OFL-1.1), Playwrite BR (OFL-1.1), LXGW WenKai TC (OFL-1.1), Noto Serif SC (OFL-1.1), Noto Sans SC (OFL-1.1), Klee One (OFL-1.1), Zen Maru Gothic (OFL-1.1), Playpen Sans Arabic (OFL-1.1), Noto Naskh Arabic (OFL-1.1), Baloo Bhaijaan 2 (OFL-1.1)

## Préparation

### 1 · Donner à chaque édition son écriture scolaire et son papier

```js
// script.js, lignes 33–57
// hand: the school model the children copy; ruling: the paper they copy it on; u: its
// x-height in mm (the height of an a), the unit every ruling is drawn in; rise: the room its
// capitals need above a title. The Chinese text is in Song: the Kai face, cut for Hong Kong
// and Taiwan, centres its commas, so it sets only the titles and the squares.
const EDITIONS = {
  en: { hand: 'Playwrite GB J', ruling: 'gb', u: 3.6 },
  es: { hand: 'Playwrite ES', ruling: 'pauta', u: 3.6 },
  ca: { hand: 'Playwrite ES', ruling: 'pauta', u: 3.6 },
  fr: { hand: 'Playwrite FR Trad', ruling: 'seyes', u: 3, rise: 5 },
  de: { hand: 'Playwrite DE VA', ruling: 'lineatur', u: 3.6 },
  it: { hand: 'Playwrite IT Trad', ruling: 'righe', u: 3.6 },
  pt: { hand: 'Playwrite BR', ruling: 'caligrafia', u: 3.2 },
  zh: { hand: 'LXGW WenKai TC', ruling: 'tian', text: 'Noto Serif SC',
    label: 'Noto Sans SC', pinyin: 'Andika', cell: 16 },
  ja: { hand: 'Klee One', ruling: 'masu', text: 'Klee One', label: 'Zen Maru Gothic', cell: 16 },
  ar: { hand: 'Playpen Sans Arabic', ruling: 'satr', u: 3.6,
    text: 'Noto Naskh Arabic', label: 'Baloo Bhaijaan 2' },
};
const ED = { text: 'Andika', label: 'Lexend', rise: 0, ...EDITIONS[LANG] };
const [HAND, TEXT, LABEL] = [ED.hand, ED.text, ED.label];
const CJK = ED.cell !== undefined; // a grid of squares, one character to each
const RTL = LANG === 'ar';
const LW = CJK ? 700 : 600; // the labels' weight: the CJK label faces ship no 600
// Labels in tracked capitals, where the script has capitals.
const caps = (n) => (!CJK && !RTL ? { textTransform: 'uppercase', letterSpacing: pt(n) } : {});
```

`u` est la hauteur d’x en millimètres, l’unité dans laquelle chaque réglure est tracée : 3,6 mm pour la plupart des éditions, 3 mm pour la française, dont les lignes Seyès sont espacées d’une hauteur d’x. Toutes les Playwrite dessinent leur hauteur d’x à la moitié du cadratin. Le modèle mesure donc `u / 0.5`, et les lignes de la réglure tombent là où les proportions de la police placent ses hampes et ses jambages. Le texte chinois est composé en Song (Noto Serif SC) : LXGW WenKai TC centre ses virgules comme on les imprime à Hong Kong et à Taïwan, si bien que la police Kai ne compose que les titres et les cases.

### 2 · Poser le modèle sur la réglure, en texte vivant

```js
// script.js, lignes 75–91
// ### Repasa y escribe {w="nina" model="niña"} draws four rows on the edition's ruling: the
// model and dotted copies, a row of dots, the model and one copy, and an empty row. The
// ruling and the dots are one picture per block ('trazo-' + w, drawn under #region art); the
// models are live text set on its baselines. A design text's baseline falls 0.8 of its line
// below the box top, so a box of line L set at baseline − 0.8 L puts the letters on the line.
const G = CJK ? null : geometry(ED.ruling, ED.u); // rows, baselines and the face's size
const LABEL_H = 7; // mm: the block's label above its ruling
const model = (id, row, extra = {}) => text(id, '{attr.model}', HAND, G.size / 0.3528,
  at('container', 'top-left', 0, LABEL_H + G.base[row] - 0.8 * G.line,
    { width: mm(W) }), { lineHeight: mm(G.line), overflow: 'clip', ...extra });
const wordBlock = (rows, again = true) => ({ enabled: true,
  minHeight: mm(LABEL_H + G.height(rows)), slot: { elements: [label('label'),
    image('trazo', 'trazo-{attr.w}', at('container', 'top-left', 0, LABEL_H,
      box(W, G.height(rows)))),
    model('model-1', 0),
    ...(again ? [model('model-3', 2)] : []), // a sentence is written out once
  ] } });
```

Un bloc d’exercice est un titre de niveau 3 dont la maquette dessine une seule image, la réglure avec les copies en pointillés, et compose par-dessus le modèle en texte, dans l’écriture scolaire. La ligne de base d’un texte de maquette tombe à 0,8 de son interlignage sous le haut de sa boîte. La boîte du modèle commence donc 0,8 interlignage au-dessus de la ligne de base de sa ligne d’écriture, et les lettres reposent sur le trait que dessine la réglure. L’interlignage vaut dix hauteurs d’x pour que la découpe de la boîte tombe 2 u sous la ligne de base, assez bas pour la boucle du g. Le texte du titre, *Repasse et écris*, devient l’étiquette du bloc ; `w` nomme l’image et `model` le mot.

### 3 · Tirer les pointillés des contours de la police

Postext compose une lettre en couleur, en contour ou en teinte pâle, mais ne peut pas la dessiner comme une suite de points le long de son tracé. Les points sont donc dessinés avant la composition du cahier, à partir des contours de la graisse Thin de chaque famille Playwrite : un point tous les 0,2 hauteur d’x le long de chaque contour, gardé seulement si aucun autre ne se trouve à moins de 0,8 de ce pas, de sorte que les deux bords d’un trait fin donnent une seule rangée de points. Le point du i et les accents restent de petites formes pleines. Les points de chaque édition, avec les chasses de la copie et du modèle, sont dans `traces-<lang>.json`, et le pen répartit les copies sur les lignes : après le modèle, sur toute une ligne, une seule après le modèle, puis une ligne vide pour finir.

### 4 · Repasser les caractères dans leurs cases

```js
// script.js, lignes 95–127
// ### 写一写 {c1="日" c2="月"}: each character in the first square of its row, three copies to
// trace in the pale red (描红) or grey (なぞり書き) of the next squares, then empty ones. A
// Han or kana character is one em wide, so tracking of (square − em) sets one per square.
const [CELL, EM] = [ED.cell ?? 16, (ED.cell ?? 16) * 0.72]; // mm: the square, its character
const SQUARES = Math.floor(W / CELL);
const row = (n, y, content, x, color) => text(`r${n}-${x}`, content, HAND, EM / 0.3528,
  at('container', 'top-left', x * CELL + (CELL - EM) / 2, y + (CELL - EM) / 2 + EM * 0.06,
    box(W - x * CELL, EM)),
  { lineHeight: mm(EM), letterSpacing: mm(CELL - EM), overflow: 'clip', color: col(color) });
// A sentence (####) takes three rows: written out, traced, and a row to write it alone.
const squareBlock = (rows, sentence) => ({ enabled: true, minHeight: mm(LABEL_H + rows * CELL),
  slot: { elements: [label('label'), image('grid', `squares-${rows}`,
    at('container', 'top-left', 0, LABEL_H, box(SQUARES * CELL, rows * CELL))),
  ...(sentence ? [row(0, LABEL_H, '{attr.model}', 0, 'ink'),
    row(1, LABEL_H + CELL, '{attr.model}', 0, 'trace')] : Array.from({ length: rows }, (_, n) => [
    row(n, LABEL_H + n * CELL, `{attr.c${n + 1}}`, 0, 'ink'),
    row(n, LABEL_H + n * CELL, `{attr.c${n + 1}}{attr.c${n + 1}}{attr.c${n + 1}}`, 1, 'trace'),
  ]).flat()),
  ] } });
// Pinyin on four lines and three spaces (四线三格), ##### {model="bā"}: the syllable, copies
// to trace in the pale red, the syllable again and room after it.
const P = ED.pinyin ? geometry('sixian', 3.6) : null;
const pinyin = (id, n, x, content, color) => text(id, content, ED.pinyin, P.size / 0.3528,
  at('container', 'top-left', x, LABEL_H + P.base[n] - 0.8 * P.line, { width: mm(W - x) }),
  { lineHeight: mm(P.line), overflow: 'clip', color: col(color) });
const copies = Array(5).fill('{attr.model}').join('\u00a0\u00a0\u00a0\u00a0');
const pinyinBlock = P && { enabled: true, minHeight: mm(LABEL_H + P.height(3)),
  slot: { elements: [label('label'),
    image('lines', 'sixian', at('container', 'top-left', 0, LABEL_H,
      box(W, P.height(3)))),
    pinyin('p1', 0, 0, '{attr.model}', 'ink'), pinyin('p1-copies', 0, 36, copies, 'trace'),
    pinyin('p2', 1, 0, copies, 'trace'), pinyin('p3', 2, 0, '{attr.model}', 'ink'),
  ] } };
```

Un sinogramme ou un kana occupe un cadratin : une approche égale à la case moins le cadratin place donc un caractère par case, comme dans un 字帖. La première case de la ligne porte le caractère à l’encre, les trois suivantes le même caractère dans le rouge pâle du 描红 (gris dans l’édition japonaise), et les autres restent vides. Une phrase (`####`) prend trois lignes : écrite, repassée, puis vide, avec chaque signe de ponctuation dans sa propre case. Les lignes de pinyin reprennent la réglure à quatre lignes des éditions latines, avec Andika, dont le a et le g à un seul étage sont ceux qu’apprennent les enfants.

### 5 · Ne rien mettre en miroir pour l’arabe

L’édition arabe partage toutes ses maquettes avec les autres. Le moteur met en miroir une maquette de titre posée dans le flux d’une page de droite à gauche : le disque des lettres, le modèle et la première image de l’imagier passent d’eux-mêmes à droite. Seules les copies en pointillés, dessinées à l’intérieur d’une image, sont placées depuis le bord droit dans le code, et les vagues de l’échauffement vont de droite à gauche. `locale: 'ar'` relie le livre à droite.

## La recette complète

Un seul fichier, composé à partir du dossier de la recette avec le texte d’exemple et le kit commun des Recettes déjà inclus ; il construit sa propre page. Pour l’exécuter, placez-le dans un `<script type="module">` d’une page vide ou collez-le dans le panneau JS d’un nouveau pen CodePen (en tant que module). Il importe postext depuis esm.sh : il n’y a rien à installer ni à compiler.

- Dossier de la recette: https://github.com/drnachio/postext/tree/main/cookbook/handwriting-workbook

### script.js

```js
// ═══ Postext Cookbook · Nº 161 · Handwriting workbook in ten scripts ═══════════════
// https://postext.dev/en/cookbook/handwriting-workbook
// Code: MIT · Text: original (CC BY 4.0) · Pictures: generated with diffusion models
// Fonts: Playwrite, Playpen Sans Arabic, Klee One and others (SIL OFL) · Needs postext ≥ 1.42.1
import {
  buildDocument, withLoadedFonts, renderPageToCanvas, registerResourceImage,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'fr'; // @lang: the language of the workbook (en es ca fr de it pt zh ja ar)
const RECIPE = 'handwriting-workbook';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: a navy ink, one coral accent, the sun and the pale fields of the bands
const palette = {
  ink: '#22304a', // text and the models
  accent: '#bf4630', // kickers, labels, folios
  sun: '#f4b73f', // the boxes' stripe
  tint: '#fdf0da', // opener bands, boxes
  rule: '#7f9ccc', // the ruling
  dots: '#4d5b76', // the dotted letters
  trace: LANG === 'ja' ? '#b4bccb' : '#e7a9a0', // traced over: 描红 in red, なぞり書き in grey
  paper: '#ffffff',
};
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: each language its school's script, its ruling and its faces
// hand: the school model the children copy; ruling: the paper they copy it on; u: its
// x-height in mm (the height of an a), the unit every ruling is drawn in; rise: the room its
// capitals need above a title. The Chinese text is in Song: the Kai face, cut for Hong Kong
// and Taiwan, centres its commas, so it sets only the titles and the squares.
const EDITIONS = {
  en: { hand: 'Playwrite GB J', ruling: 'gb', u: 3.6 },
  es: { hand: 'Playwrite ES', ruling: 'pauta', u: 3.6 },
  ca: { hand: 'Playwrite ES', ruling: 'pauta', u: 3.6 },
  fr: { hand: 'Playwrite FR Trad', ruling: 'seyes', u: 3, rise: 5 },
  de: { hand: 'Playwrite DE VA', ruling: 'lineatur', u: 3.6 },
  it: { hand: 'Playwrite IT Trad', ruling: 'righe', u: 3.6 },
  pt: { hand: 'Playwrite BR', ruling: 'caligrafia', u: 3.2 },
  zh: { hand: 'LXGW WenKai TC', ruling: 'tian', text: 'Noto Serif SC',
    label: 'Noto Sans SC', pinyin: 'Andika', cell: 16 },
  ja: { hand: 'Klee One', ruling: 'masu', text: 'Klee One', label: 'Zen Maru Gothic', cell: 16 },
  ar: { hand: 'Playpen Sans Arabic', ruling: 'satr', u: 3.6,
    text: 'Noto Naskh Arabic', label: 'Baloo Bhaijaan 2' },
};
const ED = { text: 'Andika', label: 'Lexend', rise: 0, ...EDITIONS[LANG] };
const [HAND, TEXT, LABEL] = [ED.hand, ED.text, ED.label];
const CJK = ED.cell !== undefined; // a grid of squares, one character to each
const RTL = LANG === 'ar';
const LW = CJK ? 700 : 600; // the labels' weight: the CJK label faces ship no 600
// Labels in tracked capitals, where the script has capitals.
const caps = (n) => (!CJK && !RTL ? { textTransform: 'uppercase', letterSpacing: pt(n) } : {});
// #endregion

const W = 176; // mm: the type area's width, and every practice block's
// A design laid in the flow of a right-to-left page is mirrored by the engine, so 'left' is
// the start side in every edition: the Arabic book needs no coordinates of its own.
const box = (width, height) => ({ width: mm(width), height: mm(height) });
const at = (to, edge, x = 0, y = 0, size) => ({ anchor: { to, edge },
  offset: { x: mm(x), y: mm(y) }, ...(size && { size }) });
const text = (id, content, fontFamily, size, placement, extra = {}) => ({ kind: 'text', id,
  content, fontFamily, fontSize: pt(size), color: col('ink'), align: 'left', placement,
  ...extra });
const image = (id, resourceId, placement) => ({ kind: 'image', id, resourceId, placement,
  decorative: true });
const label = (id) => text(id, '{titleText}', LABEL, 9, at('container', 'top-left'),
  { fontWeight: LW, color: col('accent'), ...caps(1.2) });

// #region answer: a practice block: the model in the school face, then dots, then nothing
// ### Repasa y escribe {w="nina" model="niña"} draws four rows on the edition's ruling: the
// model and dotted copies, a row of dots, the model and one copy, and an empty row. The
// ruling and the dots are one picture per block ('trazo-' + w, drawn under #region art); the
// models are live text set on its baselines. A design text's baseline falls 0.8 of its line
// below the box top, so a box of line L set at baseline − 0.8 L puts the letters on the line.
const G = CJK ? null : geometry(ED.ruling, ED.u); // rows, baselines and the face's size
const LABEL_H = 7; // mm: the block's label above its ruling
const model = (id, row, extra = {}) => text(id, '{attr.model}', HAND, G.size / 0.3528,
  at('container', 'top-left', 0, LABEL_H + G.base[row] - 0.8 * G.line,
    { width: mm(W) }), { lineHeight: mm(G.line), overflow: 'clip', ...extra });
const wordBlock = (rows, again = true) => ({ enabled: true,
  minHeight: mm(LABEL_H + G.height(rows)), slot: { elements: [label('label'),
    image('trazo', 'trazo-{attr.w}', at('container', 'top-left', 0, LABEL_H,
      box(W, G.height(rows)))),
    model('model-1', 0),
    ...(again ? [model('model-3', 2)] : []), // a sentence is written out once
  ] } });
// #endregion

// #region squares: the Chinese and Japanese blocks, a character to a square
// ### 写一写 {c1="日" c2="月"}: each character in the first square of its row, three copies to
// trace in the pale red (描红) or grey (なぞり書き) of the next squares, then empty ones. A
// Han or kana character is one em wide, so tracking of (square − em) sets one per square.
const [CELL, EM] = [ED.cell ?? 16, (ED.cell ?? 16) * 0.72]; // mm: the square, its character
const SQUARES = Math.floor(W / CELL);
const row = (n, y, content, x, color) => text(`r${n}-${x}`, content, HAND, EM / 0.3528,
  at('container', 'top-left', x * CELL + (CELL - EM) / 2, y + (CELL - EM) / 2 + EM * 0.06,
    box(W - x * CELL, EM)),
  { lineHeight: mm(EM), letterSpacing: mm(CELL - EM), overflow: 'clip', color: col(color) });
// A sentence (####) takes three rows: written out, traced, and a row to write it alone.
const squareBlock = (rows, sentence) => ({ enabled: true, minHeight: mm(LABEL_H + rows * CELL),
  slot: { elements: [label('label'), image('grid', `squares-${rows}`,
    at('container', 'top-left', 0, LABEL_H, box(SQUARES * CELL, rows * CELL))),
  ...(sentence ? [row(0, LABEL_H, '{attr.model}', 0, 'ink'),
    row(1, LABEL_H + CELL, '{attr.model}', 0, 'trace')] : Array.from({ length: rows }, (_, n) => [
    row(n, LABEL_H + n * CELL, `{attr.c${n + 1}}`, 0, 'ink'),
    row(n, LABEL_H + n * CELL, `{attr.c${n + 1}}{attr.c${n + 1}}{attr.c${n + 1}}`, 1, 'trace'),
  ]).flat()),
  ] } });
// Pinyin on four lines and three spaces (四线三格), ##### {model="bā"}: the syllable, copies
// to trace in the pale red, the syllable again and room after it.
const P = ED.pinyin ? geometry('sixian', 3.6) : null;
const pinyin = (id, n, x, content, color) => text(id, content, ED.pinyin, P.size / 0.3528,
  at('container', 'top-left', x, LABEL_H + P.base[n] - 0.8 * P.line, { width: mm(W - x) }),
  { lineHeight: mm(P.line), overflow: 'clip', color: col(color) });
const copies = Array(5).fill('{attr.model}').join('\u00a0\u00a0\u00a0\u00a0');
const pinyinBlock = P && { enabled: true, minHeight: mm(LABEL_H + P.height(3)),
  slot: { elements: [label('label'),
    image('lines', 'sixian', at('container', 'top-left', 0, LABEL_H,
      box(W, P.height(3)))),
    pinyin('p1', 0, 0, '{attr.model}', 'ink'), pinyin('p1-copies', 0, 36, copies, 'trace'),
    pinyin('p2', 1, 0, copies, 'trace'), pinyin('p3', 2, 0, '{attr.model}', 'ink'),
  ] } };
// #endregion

// #region opener: a tinted band with the lesson's letters in a disc and its picture
const BAND = 40; // mm
const opener = { enabled: true, minHeight: mm(BAND + 7), slot: { elements: [
  { kind: 'box', id: 'band', decorative: true, style: { backgroundColor: col('tint'),
    borderRadius: mm(5) }, placement: at('container', 'top-left', 0, 0, box(W, BAND)) },
  text('letters', '{attr.letras}', HAND, CJK ? 30 : 26, at('container', 'top-left', 5, 5,
    box(40, 30)),
  { align: 'center', verticalAlign: 'middle', color: col('accent'), overflow: 'clip',
    box: { backgroundColor: col('paper'), borderRadius: mm(15) } }),
  text('kicker', '{attr.kicker}', LABEL, 9, at('container', 'top-left', 52, 8),
    { fontWeight: LW, color: col('accent'), ...caps(1.2) }),
  text('title', '{titleText}', HAND, CJK ? 26 : 24, at('container', 'top-left', 52,
    15 + ED.rise, { width: mm(80) }), { lineHeight: 1.25 }),
  { kind: 'box', id: 'card', decorative: true, style: { backgroundColor: col('paper'),
    borderRadius: mm(4) }, placement: at('container', 'top-right', -4, 3, box(34, 34)) },
  image('picture', '{attr.pic}', at('container', 'top-right', -5, 4, box(32, 32))),
] } };
// #endregion

// #region pages: the cover, the certificate and the picture dictionary
// The cover: a painted scene to the bleed, the title in the school face, a line for a name.
const COVER = 178; // mm from the top edge: the foot of the painting
const cover = { id: 'portada', header: { elements: [] }, footer: { elements: [] },
  advancedDesign: { enabled: true, slot: { elements: [
    image('scene', 'cover', at('page', 'top-left', 0, 0, { width: 'fill', height: mm(COVER) })),
    text('kicker', '{attr.kicker}', LABEL, 11, at('page', 'top', 0, COVER + 10),
      { align: 'center', fontWeight: LW, color: col('accent'), ...caps(1.6) }),
    text('title', '{titleText}', HAND, CJK ? 48 : 46, at('page', 'top', 0, COVER + 18 + ED.rise),
      { align: 'center', lineHeight: 1.2 }),
    text('name', '{attr.nombre}', LABEL, 12, at('page', 'top', -W / 2 + 24, COVER + 58),
      { color: col('ink') }),
    { kind: 'rule', id: 'name-line', direction: 'horizontal', thickness: pt(1),
      color: col('rule'), placement: at('page', 'top', 14, COVER + 64, { width: mm(110) }) },
    text('colophon', '{attr.colofon}', LABEL, 7, at('page', 'top', 0, 262, { width: mm(W) }),
      { align: 'center', color: col('dots'), lineHeight: 1.4 }),
  ] } } };
// The last page: the same frame as a certificate, the child's name and the date to fill in.
const diploma = { id: 'diploma', header: { elements: [] }, footer: { elements: [] },
  advancedDesign: { enabled: true, minHeight: mm(250), slot: { elements: [
    { kind: 'box', id: 'frame', decorative: true, style: { borderColor: col('sun'),
      borderWidth: pt(5), borderRadius: mm(8), backgroundColor: col('paper') },
    placement: at('container', 'top-left', 0, 4, box(W, 244)) },
    image('picture', 'medal', at('container', 'top', 0, 22, box(70, 70))),
    text('title', '{titleText}', HAND, CJK ? 40 : 38, at('container', 'top', 0, 104,
      { width: mm(W - 20) }), { align: 'center', color: col('accent'), lineHeight: 1.2 }),
    text('body', '{attr.texto}', TEXT, 15, at('container', 'top', 0, 136, { width: mm(130) }),
      { align: 'center', lineHeight: 1.45 }),
    ...[0, 1].map((n) => text(`field-${n}`, `{attr.${['nombre', 'fecha'][n]}}`, LABEL, 11,
      at('container', 'top-left', 28, 186 + n * 22), { color: col('dots') })),
    ...[0, 1].map((n) => ({ kind: 'rule', id: `line-${n}`, direction: 'horizontal',
      thickness: pt(1), color: col('rule'),
      placement: at('container', 'top-left', 28, 192 + n * 22, { width: mm(W - 56) }) })),
  ] } } };
// The picture dictionary, ## {p1="cat" w1="gato" …}: four pictures to a row, each word under
// its picture in the school face, and a line to copy it on.
const SLOT = W / 4;
const dictionary = { enabled: true, minHeight: mm(58),
  slot: { elements: [0, 1, 2, 3].flatMap((n) => [
    image(`p${n}`, `{attr.p${n + 1}}`, at('container', 'top-left', n * SLOT + (SLOT - 34) / 2,
      0, box(34, 34))),
    text(`w${n}`, `{attr.w${n + 1}}`, HAND, CJK ? 20 : 17, at('container', 'top-left',
      n * SLOT, 36, box(SLOT, 10)), { align: 'center', overflow: 'clip' }),
    { kind: 'rule', id: `l${n}`, direction: 'horizontal', thickness: pt(0.75),
      color: col('rule'), placement: at('container', 'top-left', n * SLOT + 4, 54,
        { width: mm(SLOT - 8) }) },
  ]) } };
// #endregion

// The folio in an accent disc at the outer foot, the book's title beside it.
const foot = (parity, edge, side) => [
  text(`folio-${parity}`, '{pageNumber}', LABEL, 10, { anchor: { to: 'page', edge },
    offset: { x: mm(18 * side), y: mm(-9) }, size: box(8, 8) }, { parity, align: 'center',
    verticalAlign: 'middle', fontWeight: 700, color: col('paper'), lineHeight: 1.17,
    box: { backgroundColor: col('accent'), borderRadius: mm(4) } }),
  text(`title-${parity}`, '{title} · {subtitle}', LABEL, 7.5, { anchor: { to: 'page', edge },
    offset: { x: mm(29 * side), y: mm(-11) } },
  { parity, color: col('dots'), align: side > 0 ? 'left' : 'right', ...caps(1) }),
];

const config = {
  // Hyphenation, punctuation, direction and binding follow the edition's language.
  locale: t({ en: 'en-gb', es: 'es', ca: 'ca', fr: 'fr', de: 'de', it: 'it', pt: 'pt-BR',
    zh: 'zh-Hans', ja: 'ja', ar: 'ar' }),
  resourceTypes: [{ id: 'dibujo', name: 'Dibujo', shortLabel: '', captionPrefix: '',
    numberingTemplate: '', resetOn: 'never', counterFormat: 'decimal',
    defaultPlacement: { position: 'here' } }],
  colorPalette,
  page: { sizePreset: 'custom', width: mm(210), height: mm(297), dpi: 150,
    margins: { top: mm(16), bottom: mm(22), left: mm(18), right: mm(16), mirror: true } },
  layout: { layoutType: 'single' },
  bodyText: {
    fontFamily: TEXT, fontSize: pt(CJK ? 13.5 : 14), lineHeight: pt(RTL ? 25 : 20),
    color: col('ink'), boldColor: col('ink'), italicColor: col('ink'),
    referenceColor: col('ink'), textAlign: RTL || CJK ? 'justify' : 'left',
    firstLineIndent: pt(0), paragraphSpacing: true, hyphenation: { enabled: !CJK && !RTL },
    optimalLineBreaking: true, avoidWidows: true, avoidOrphans: true, avoidRunts: true,
  },
  headings: {
    fontFamily: HAND, color: col('ink'), fontWeight: 400,
    levels: [
      { level: 1, breakBefore: { enabled: true, parity: 'any' }, marginTop: pt(0),
        marginBottom: mm(3), advancedDesign: opener },
      { level: 2, marginTop: mm(3), marginBottom: mm(3), advancedDesign: dictionary },
      { level: 3, marginTop: mm(4), marginBottom: mm(2),
        advancedDesign: CJK ? squareBlock(4) : wordBlock(4) },
      { level: 4, marginTop: mm(4), marginBottom: mm(2),
        advancedDesign: CJK ? squareBlock(3, true) : wordBlock(3, false) },
      ...(P ? [{ level: 5, marginTop: mm(4), marginBottom: mm(2), advancedDesign: pinyinBlock }]
        : []),
    ],
  },
  headingStyles: [cover, diploma],
  chipStyles: [ // a blank to write a letter in, and a letter tile
    { id: 'hueco', fontFamily: LABEL, background: col('paper'), borderColor: col('rule'),
      borderWidth: pt(1), borderRadius: mm(1.2), paddingX: mm(4), paddingY: em(0.12) },
    { id: 'letra', fontFamily: HAND, background: col('tint'), borderColor: col('sun'),
      borderWidth: pt(1), borderRadius: mm(1.6), paddingX: mm(2), paddingY: em(0.08) }],
  calloutStyles: [{ id: 'recuerda', background: col('tint'), borderRadius: mm(3),
    stripe: { enabled: true, side: 'left', width: pt(4), color: col('sun') },
    padding: { top: mm(3), right: mm(5), bottom: mm(3.5), left: mm(5) },
    titleStyle: { fontFamily: LABEL, fontSize: pt(9), fontWeight: LW, color: col('accent'),
      ...caps(1.2) },
    body: { fontFamily: TEXT, fontSize: pt(12), lineHeight: pt(RTL ? 21 : 17),
      color: col('ink'), boldColor: col('ink'), italicColor: col('ink'),
      firstLineIndent: pt(0) } }],
  header: { elements: [] },
  footer: { elements: [...foot('even', 'bottom-left', 1), ...foot('odd', 'bottom-right', -1)] },
};

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "J’apprends à écrire"
subtitle: "Cahier d’écriture 1"
---

# J’apprends à écrire {style="portada" kicker="Cahier d’écriture · Écriture cursive" nombre="Je m’appelle" colofon="Composé en Playwrite FR Trad, Andika et Lexend (SIL OFL) · Texte original (CC BY 4.0) · Illustrations générées par des modèles de diffusion"}

# Avant d’écrire {kicker="On échauffe la main" letras="a b c" pic="grip"}

Assieds-toi bien droit, les deux pieds posés par terre. Tiens ton crayon entre le pouce et l’index, appuyé sur le majeur, sans serrer. Repasse les points de gauche à droite sans lever le crayon.


### Les vagues de la mer {w="waves"}

### Les boucles {w="loops"}

# Les accents {kicker="Leçon 1" letras="é è ê" pic="bee"}

Les voyelles sont **a, e, i, o, u** et **y**. Le **e** peut porter un accent, et alors il se prononce autrement : **é** dans vélo, **è** dans père, **ê** dans fête.

### Repasse et écris {w="eleve" model="élève"}

### Repasse et écris {w="fete" model="fête"}

é, è ou ê ? v:chip[ ]{style="hueco"}lo · p:chip[ ]{style="hueco"}re · f:chip[ ]{style="hueco"}te · b:chip[ ]{style="hueco"}b:chip[ ]{style="hueco"}

:::callout{type="recuerda" title="Retiens"}
Tu poses les accents quand le mot est fini, comme le point du **i**. L’accent circonflexe est un petit chapeau : **ê**.
:::

# Ou, on et an {kicker="Leçon 2" letras="ou on" pic="owl"}

Deux lettres peuvent faire un seul son. On entend **ou** dans loup et hibou, **on** dans mouton et crayon. Le son **an** s’écrit **an** ou **en** : maman, enfant, dent.

### Repasse et écris {w="mouton" model="mouton"}

### Repasse et écris {w="enfant" model="enfant"}

ou, on ou an ? l:chip[ ]{style="hueco"}p · cray:chip[ ]{style="hueco"} · m:chip[ ]{style="hueco"}ger · r:chip[ ]{style="hueco"}e

:::callout{type="recuerda" title="Retiens"}
Devant **b** et **p**, le **n** devient **m** : jambe, lampe, pompon.
:::

# Les sons ch et gn {kicker="Leçon 3" letras="ch gn" pic="spider"}

On entend **ch** dans chat et vache, et **gn** dans araignée et montagne. Tu attaches les deux lettres sans lever le crayon. Le **g** descend sous la ligne avec une boucle.

### Repasse et écris {w="champignon" model="champignon"}

### Repasse et écris {w="araignee" model="araignée"}

ch ou gn ? va:chip[ ]{style="hueco"}e · monta:chip[ ]{style="hueco"}e · :chip[ ]{style="hueco"}eval · li:chip[ ]{style="hueco"}e

:::callout{type="recuerda" title="Retiens"}
Dans **champignon**, tu entends les deux sons : **ch** au début et **gn** à la fin.
:::

# Le c, le ç et le ge {kicker="Leçon 4" letras="c ç ge" pic="icecream"}

Devant **e** et **i**, le **c** se lit comme un s : glace, cinéma. Devant a, o et u, il lui faut une cédille : **ç**, comme dans garçon. Pour que le **g** se lise j devant a ou o, on ajoute un e : pi**ge**on.

### Repasse et écris {w="garcon" model="garçon"}

### Repasse et écris {w="pigeon" model="pigeon"}

c ou ç ? gar:chip[ ]{style="hueco"}on · le:chip[ ]{style="hueco"}on · gla:chip[ ]{style="hueco"}e · ma:chip[ ]{style="hueco"}on

:::callout{type="recuerda" title="Retiens"}
La cédille est une petite virgule sous le **c**. Tu l’ajoutes quand le mot est fini.
:::

# Au et eau {kicker="Leçon 5" letras="au eau" pic="boat"}

**au** et **eau** se lisent comme la lettre o : jaune, bateau. On trouve souvent **eau** à la fin des mots : gâteau, château, oiseau.

### Repasse et écris {w="bateau" model="bateau"}

### Repasse et écris {w="jaune" model="jaune"}

au ou eau ? bat:chip[ ]{style="hueco"} · :chip[ ]{style="hueco"}to · chap:chip[ ]{style="hueco"} · ch:chip[ ]{style="hueco"}d

:::callout{type="recuerda" title="Retiens"}
**eau** s’écrit avec trois lettres, mais on n’entend qu’un seul son.
:::

# Le s et le ss {kicker="Leçon 6" letras="s ss" pic="fish"}

Entre deux voyelles, un seul **s** se lit comme un z : rose, maison. Pour entendre le son s, on double la lettre : **ss**, comme dans poisson et tasse.

### Repasse et écris {w="poisson" model="poisson"}

### Repasse et écris {w="maison" model="maison"}

s ou ss ? poi:chip[ ]{style="hueco"}on · ro:chip[ ]{style="hueco"}e · ta:chip[ ]{style="hueco"}e · cou:chip[ ]{style="hueco"}in

:::callout{type="recuerda" title="Retiens"}
Le **poisson** nage dans l’eau, le **poison** rend malade. Une seule lettre change tout.
:::

# Lettres muettes {kicker="Leçon 7" letras="t d s" pic="cat"}

Certaines lettres ne s’entendent pas à la fin du mot : le **t** de chat, le **d** de grand, le **s** de souris. Pour trouver la lettre muette, pense à un mot de la même famille : grand, grande.

### Repasse et écris {w="chat" model="chat"}

### Repasse et écris {w="grand" model="grand"}

Trouve la lettre muette : peti:chip[ ]{style="hueco"} · lai:chip[ ]{style="hueco"} · gran:chip[ ]{style="hueco"} · tapi:chip[ ]{style="hueco"}

:::callout{type="recuerda" title="Retiens"}
Au pluriel, on ajoute souvent un **s** qu’on n’entend pas : un chat, des chats.
:::

# Mon imagier {kicker="Mes premiers mots" letras="abc" pic="house"}

Lis chaque mot et recopie-le sur la ligne en dessous, avec ta plus belle écriture.

## soleil, lune, chat, poisson {p1="sun" w1="soleil" p2="moon" w2="lune" p3="cat" w3="chat" p4="fish" w4="poisson"}

## maison, bateau, canard, clé {p1="house" w1="maison" p2="boat" w2="bateau" p3="duck" w3="canard" p4="key" w4="clé"}

## chaussure, pomme, abeille, arbre {p1="shoe" w1="chaussure" p2="apple" w2="pomme" p3="bee" w3="abeille" p4="tree" w4="arbre"}

# Les phrases {kicker="Leçon 8" letras="Aa" pic="kite"}

Une phrase commence par une majuscule et finit par un point. Entre deux mots, laisse la place d’un petit o.

#### Copie la phrase {w="phrase-1" model="Mon chat dort au soleil."}

#### Copie la phrase {w="phrase-2" model="Le garçon mange une pomme."}

#### Copie la phrase {w="phrase-3" model="La lune brille la nuit."}

# Je sais écrire ! {style="diploma" texto="Tu as appris les accents, ou, on et an, ch et gn, la cédille, au et eau, s et ss, et les lettres muettes. Maintenant, tu peux écrire tes propres histoires." nombre="Prénom" fecha="Date"}
`; // content.<lang>.md, inlined by the Cookbook

// #region art: the edition's ruling drawn in code, the dots from the face's own outlines
// Each country's paper, in x-heights (u) above and below the baseline. lines: [height,
// weight] pairs; band: a filled band; seyes: the French grid of 1 u squares, a heavy line
// every 4 u, verticals every 4 u; Seyès and the Italian page rule a red margin where the
// writing starts.
function geometry(style, u) {
  const R = {
    pauta: { above: 2, below: 1, gap: 1, lines: [[-1, 0.4], [0, 0.9], [1, 0.9], [2, 0.4]] },
    gb: { above: 2, below: 1, gap: 0.8,
      lines: [[-0.8, 0.5], [0, 0.9], [1, 0.5, 'dash'], [1.8, 0.5]] },
    lineatur: { above: 2, below: 1, gap: 1, lines: [[-1, 0.6], [0, 0.6], [1, 0.6], [2, 0.6]],
      band: [0, 1, '#fdf3c7'] },
    righe: { above: 2, below: 1, gap: 1, lines: [[-1, 0.4], [0, 0.8], [1, 0.8], [2, 0.4]],
      margin: true },
    caligrafia: { above: 2.4, below: 1.4, gap: 0.8, lines: [[-1.3, 0.4], [0, 0.9], [1, 0.9],
      [2.3, 0.4]], band: [0, 1, '#e8f0fb'] },
    satr: { above: 2, below: 1, gap: 1, lines: [[-1, 0.4], [0, 0.9], [1, 0.5, 'dash'], [2, 0.4]] },
    seyes: { above: 4, below: 2, gap: -2, seyes: true }, // a row on every heavy line
    sixian: { above: 2, below: 1, gap: 1, lines: [[-1, 0.6], [0, 0.9], [1, 0.6], [2, 0.6]] },
  }[style];
  const pitch = (R.above + R.below + R.gap) * u;
  const base = [0, 1, 2, 3].map((n) => n * pitch + R.above * u);
  // The faces set their x-height at half the em, Playpen Sans Arabic its tooth at 0.4.
  const xh = { satr: 0.4, sixian: 0.508 }[style] ?? 0.5; // Andika's x-height for pinyin
  // line: a tall box for the models, whose clip falls 2 u under the baseline.
  return { ...R, u, pitch, base, size: u / xh, line: u * 10,
    height: (rows) => (rows - 1) * pitch + (R.above + R.below) * u };
}
const n2 = (v) => +v.toFixed(2);
function ruling(g, rows) {
  const out = [];
  const h = g.height(rows);
  const hline = (y, w, dash) => out.push(`<path d="M0 ${n2(y)}H${W}" stroke="${palette.rule}" `
    + `stroke-width="${n2(w * 0.3528)}" stroke-opacity="${w < 0.6 ? 0.55 : 1}"`
    + `${dash ? ' stroke-dasharray="1.2 1"' : ''}/>`);
  if (g.seyes) {
    for (let k = 0; k <= h / g.u + 1e-6; k++) hline(k * g.u, k % 4 === 0 ? 0.9 : 0.35);
    for (let x = 4 * g.u; x <= W; x += 4 * g.u) out.push(`<path d="M${n2(x)} 0V${n2(h)}" `
      + `stroke="${palette.rule}" stroke-width=".12"/>`);
    out.push(`<path d="M.2 0V${n2(h)}" stroke="#d9534f" stroke-width=".3"/>`);
    return out.join('');
  }
  for (const b of g.base.slice(0, rows)) {
    if (g.band) out.push(`<rect x="0" y="${n2(b - g.band[1] * g.u)}" width="${W}" `
      + `height="${n2((g.band[1] - g.band[0]) * g.u)}" fill="${g.band[2]}"/>`);
    for (const [k, w, dash] of g.lines) hline(b - k * g.u, w, dash);
  }
  if (g.margin) out.push(`<path d="M.2 0V${n2(h)}" stroke="#d9534f" stroke-width=".3"/>`);
  return out.join('');
}
// The dots of a word: TRACES holds, for each model, the dots along the outlines of the face's
// thin cut (one row of dots, the two sides of a stroke merged) as a path of zero-length,
// round-capped segments, its advance, and the model's advance in the regular cut, all in mm.
function dotted(word, x, y) {
  const t = TRACES.words[word];
  return `<g transform="translate(${n2(x)} ${n2(y)})"><path d="${t.d}" stroke="${palette.dots}" `
    + `stroke-width="${TRACES.dot}" stroke-linecap="round" fill="none"/>`
    + (t.f ? `<path d="${t.f}" fill="${palette.dots}"/>` : '') + '</g>';
}
// Warm-up strokes: curves drawn by code, dotted at the same pitch as the letters.
const PATTERNS = { // s runs along the stroke; x and y in 2 u, from the baseline up
  lines: (s) => [Math.floor(s) * 0.5, s % 1], // sticks, each drawn from the foot up
  waves: (s) => [s * 0.5, (1 - Math.cos(s * Math.PI)) / 4], // waves in the x-height band
  loops: (s) => [s * 0.5 - 0.2 * Math.sin(2 * Math.PI * s), (1 - Math.cos(2 * Math.PI * s)) / 2],
};
function pattern(name, x0, x1, base, u) {
  const f = PATTERNS[name]; const pts = [];
  let prev = null; let acc = 0;
  for (let s = 0; s < 400; s += 0.002) {
    const [px, py] = f(s); const p = [x0 + px * u * 2, base - py * u * 2];
    if (p[0] > x1) break;
    acc += prev ? Math.hypot(p[0] - prev[0], p[1] - prev[1]) : TRACES.pitch;
    prev = p;
    if (acc < TRACES.pitch) continue;
    pts.push(`M${n2(RTL ? W - p[0] : p[0])} ${n2(p[1])}h.01`); acc = 0;
  }
  return `<path d="${pts.join('')}" stroke="${palette.dots}" stroke-width="${TRACES.dot}" `
    + 'stroke-linecap="round" fill="none"/>';
}
// One block's picture: the ruling, then the dotted copies laid out from the start side. A word
// (###): copies after the model, a row of copies, one copy after the model, an empty row. A
// sentence (####): one copy under the model, then an empty row. A warm-up pattern: two rows
// of it and the start of a third.
function traceSvg(g, w, word, sentence) {
  const rows = sentence ? 3 : 4; const gap = 3 * g.u; const parts = [ruling(g, rows)];
  const copies = (row, from, count = 99) => {
    const t = TRACES.words[word];
    for (let x = from, k = 0; x + t.a <= W && k < count; x += t.a + gap, k++) {
      parts.push(dotted(word, RTL ? W - x - t.a : x, g.base[row]));
    }
  };
  if (PATTERNS[w]) {
    [W, W, W * 0.4].forEach((end, row) => parts.push(pattern(w, 2, end - 2, g.base[row], g.u)));
  } else if (sentence) copies(1, 0, 1);
  else {
    const lead = TRACES.words[word].m + gap;
    copies(0, lead); copies(1, 0); copies(2, lead, 1);
  }
  const h = g.height(rows);
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${W * 10}" height="${n2(h * 10)}" `
    + `viewBox="0 0 ${W} ${n2(h)}">${parts.join('')}</svg>`;
}
// The pictures the practice blocks name: one per block, read off the headings that ask for one,
// or the edition's squares and its pinyin lines.
async function practicePictures(add) {
  const svg = (w, h, body) => `<svg xmlns="http://www.w3.org/2000/svg" width="${W * 10}" `
    + `height="${n2(h * 10)}" viewBox="0 0 ${w} ${n2(h)}">${body}</svg>`;
  const blocks = CJK ? [] : markdown.matchAll(/^(#{3,4}) .*?w="([^"]+)"(?: model="([^"]+)")?/gm);
  for (const [, level, w, word] of blocks) {
    await loadSvg(`trazo-${w}.svg`, traceSvg(G, w, word ?? '', level === '####'));
    add(`trazo-${w}`, `trazo-${w}.svg`, 'svg', W * 10, G.height(level === '####' ? 3 : 4) * 10);
  }
  if (P) {
    await loadSvg('sixian.svg', svg(W, P.height(3), ruling(P, 3)));
    add('sixian', 'sixian.svg', 'svg', W * 10, P.height(3) * 10);
  }
  if (CJK) for (const rows of [3, 4]) {
    await loadSvg(`squares-${rows}.svg`, squaresSvg(rows));
    add(`squares-${rows}`, `squares-${rows}.svg`, 'svg', SQUARES * CELL * 10, rows * CELL * 10);
  }
}
// The squares: 田字格 in red with a dashed cross, or マス with a dotted cross in grey-blue.
function squaresSvg(rows) {
  const c = CELL; const n = SQUARES; const red = ED.ruling === 'tian';
  const ink = red ? '#d0574b' : palette.rule;
  const cross = Array.from({ length: rows }, (_, r) => Array.from({ length: n }, (_, k) =>
    `M${k * c + c / 2} ${r * c + 0.6}V${r * c + c - 0.6}M${k * c + 0.6} ${r * c + c / 2}`
    + `H${k * c + c - 0.6}`).join('')).join('');
  const grid = Array.from({ length: n + 1 }, (_, k) => `M${k * c} 0V${rows * c}`).join('')
    + Array.from({ length: rows + 1 }, (_, r) => `M0 ${r * c}H${n * c}`).join('');
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${n * c * 10}" height="${rows * c * 10}" `
    + `viewBox="0 0 ${n * c} ${rows * c}"><path d="${cross}" fill="none" stroke="${ink}" `
    + `stroke-opacity=".55" stroke-width=".2" stroke-dasharray="${red ? '.9 .6' : '.25 .55'}"/>`
    + `<path d="${grid}" fill="none" stroke="${ink}" stroke-width=".35"/></svg>`;
}
// #endregion


// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = {
  Andika: ['400', '700'], // the text: drawn for children learning to read
  Lexend: ['400', '600', '700'], // labels, kickers, folios
  // The school models, one per country: Google's Playwrite families follow each one.
  'Playwrite GB J': ['400'], 'Playwrite ES': ['400'], 'Playwrite FR Trad': ['400'],
  'Playwrite DE VA': ['400'], 'Playwrite IT Trad': ['400'], 'Playwrite BR': ['400'],
  'LXGW WenKai TC': ['400'], // 楷: the Chinese titles and squares
  'Noto Serif SC': ['400', '700'], // 宋: the Chinese text
  'Noto Sans SC': ['400', '700'], // 黑: Chinese labels
  'Klee One': ['400'], // 教科書体: the Japanese text and its squares
  'Zen Maru Gothic': ['400', '700'], // Japanese labels
  'Playpen Sans Arabic': ['400'], // the Arabic model
  'Noto Naskh Arabic': ['400', '700'], // the Arabic text, vocalised
  'Baloo Bhaijaan 2': ['400', '600', '700'], // Arabic labels
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
// The edition loads its own faces only: its school face, its text and its labels.
const used = [HAND, TEXT, LABEL, ED.pinyin];
for (const family of Object.keys(FONTS)) if (!used.includes(family)) delete FONTS[family];
await loadFonts(FONTS, markdown);
await loadCjkFonts(FONTS, markdown);
await loadArabicFonts(FONTS, markdown);
const TRACES = CJK ? null : await (await fetch({
  en: asset('traces-en.json'), es: asset('traces-es.json'), ca: asset('traces-ca.json'),
  fr: asset('traces-fr.json'), de: asset('traces-de.json'), it: asset('traces-it.json'),
  pt: asset('traces-pt.json'), ar: asset('traces-ar.json') }[LANG])).json();
const resources = []; // every picture, painted or drawn
const add = (id, fileId, kind, width, height, more = {}) => resources.push({ id, kind,
  typeId: 'dibujo', createdAt: 0, updatedAt: 0, [kind]: { fileId, width, height, ...more } });
// The paintings the edition names (pic="…", p1="…"), from one shared set, at their pixels.
const named = new Set(['medal',
  ...[...markdown.matchAll(/\b(?:pic|p\d)="(\w+)"/g)].map((m) => m[1])]);
await Promise.all([['cover', 'cover-1600.jpg', 1600, 1356],
  ...[...named].map((id) => [id, `${id}-480.jpg`, 480, 480])].map(async ([id, file, w, h]) => {
  await loadImage(file, asset(file)); add(id, file, 'bitmap', w, h, { format: 'jpeg' });
}));
await practicePictures(add); // the rulings, the dots and the squares (#region art)
const doc = await withLoadedFonts(() => buildDocument({ markdown, resources }, config),
  { ...kitFonts(FONTS), text: markdown });
showBook(doc, { title: t({ en: 'Handwriting workbook', es: 'Cuaderno de caligrafía',
  ca: 'Quadern de cal·ligrafia', fr: 'Cahier d’écriture', de: 'Schreibheft',
  it: 'Quaderno di scrittura', pt: 'Caderno de caligrafia', zh: '写字练习册',
  ja: 'かきかたれんしゅうちょう', ar: 'كراسة الخط' }) });
offerPdf(() => renderToPdf(doc, { resourceBytes: imageBytes,
  fontProvider: { zh: cjkPdfProvider, ja: cjkPdfProvider, ar: arabicPdfProvider }[LANG]
    ?? fontsourceProvider }), `${RECIPE}-${LANG}.pdf`);

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

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

// ─── Kit · fonts v3 ── the same in every recipe · postext.dev/cookbook
// Postext loads the faces a config asks for before layout (prepareFonts,
// buildDocumentWithFonts) and asks the kit for the files: Fontsource's, the
// files the PDF embeds too.

/** The options of buildDocumentWithFonts / prepareFonts / withLoadedFonts:
 *  the Fontsource resolver, and the faces of FONTS loaded with the ones the
 *  config names. FONTS = { 'Family Name': ['400', '400i', '700'] }. */
function kitFonts(FONTS = {}) {
  const faces = Object.entries(FONTS).flatMap(([family, specs]) => specs.map((spec) =>
    ({ family, weight: parseInt(spec, 10), style: spec.endsWith('i') ? 'italic' : 'normal' })));
  return { resolve: fontsourceResolver, faces };
}

/** A face's Fontsource files, in a fixed order: latin, then latin-ext and greek
 *  when `text` needs them and the family ships them (kitSubsetsFor), each with
 *  its unicode-range. Null for a weight or slant Fontsource does not ship. */
async function fontsourceResolver(family, weight, style, { text = '' } = {}) {
  const id = fontsourceId(family);
  const meta = await fontsourceMeta(family);
  if (meta && !(meta.weights.includes(weight) && meta.styles.includes(style))) return null;
  kitStatus('Loading fonts…');
  const at = await fontsourceAt(id);
  return ['latin', ...kitSubsetsFor(text, meta)].map((subset) => ({
    source: `${at}files/${id}-${subset}-${weight}-${style}.woff2`,
    unicodeRange: kitRanges()[subset],
  }));
}

/** The unicode-range of each Fontsource file the kit loads (a function: the
 *  kit is inlined after the pen's code, which runs before a const would be set). */
function kitRanges() {
  return {
    latin: 'U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,'
      + 'U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD',
    'latin-ext': 'U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,'
      + 'U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF',
    greek: 'U+0370-03FF',
  };
}

/** For the cjk, arabic and comics blocks, which add their own files: the
 *  faces of `faces` = { 'Family Name': ['400', '400i', '700'] }. `text` is the sample:
 *  č ł † α χ also load latin-ext and greek files (kitSubsetsFor). With
 *  `optional`, a face Fontsource does not ship is skipped instead of failing.
 *  The files are added once all have loaded, in the order asked (latin, then
 *  latin-ext, then greek), whatever order they arrive in: the last one added
 *  wins a character two files hold. Resolves to the number of faces added. */
async function loadFonts(faces, text = '', { optional = false } = {}) {
  kitStatus('Loading fonts…');
  const ranges = kitRanges();
  const jobs = [];
  for (const [family, specs] of Object.entries(faces)) {
    const id = fontsourceId(family);
    const todo = [...new Set(specs)].map((spec) => [parseInt(spec, 10), spec.endsWith('i') ? 'italic' : 'normal'])
      .filter(([weight, style]) => !hasFace(family, weight, style)); // before any await
    const at = fontsourceAt(id);
    const meta = optional || /[^\0-ÿ]/u.test(text) ? await fontsourceMeta(family) : null;
    const subsets = ['latin', ...kitSubsetsFor(text, meta)];
    for (const [weight, style] of todo) {
      if (optional && !(meta?.weights.includes(weight) && meta.styles.includes(style))) continue;
      for (const subset of subsets) {
        const url = `${await at}files/${id}-${subset}-${weight}-${style}.woff2`;
        const face = new FontFace(family, `url(${url}) format('woff2')`,
          { weight: String(weight), style, unicodeRange: ranges[subset] });
        jobs.push(face.load().catch(() => {
          if (subset === 'latin' && !optional) throw new Error(`Fontsource has no ${family} ${weight} ${style}`);
        }));
      }
    }
  }
  const ready = await Promise.all(jobs).catch((error) => { kitFail(error); throw error; });
  return ready.filter((face) => face && document.fonts.add(face)).length;
}

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

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

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

/** A package's folder at the one version @5 names now (#766). */
function fontsourceAt(id, u = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@`) {
  return (fontsourceAt.c ??= {})[id] ??= fetch(u + '5/package.json').then((r) => r.json())
    .then((p) => p.version || 5, () => 5).then((v) => `${u}${v}/`);
}

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

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

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

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

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

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

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

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

/** Registers SVG markup as a vector image, its fonts inside (inlineSvgFonts, ≥ 1.25).
 *  `options` go to registerResourceImage: { singleInk: true } tints it on the canvas. */
async function loadSvg(fileId, svg, options) {
  if (typeof inlineSvgFonts === 'function') svg = await inlineSvgFonts(svg, svgFaces);
  const img = new Image();
  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
  await img.decode();
  registerResourceImage(fileId, img, options);
  (loadImage.bytes ??= new Map()).set(fileId, new TextEncoder().encode(svg));
}

/** A face's Fontsource files: nearest weight; latin + what the SVG sets. */
async function svgFaces(family, weight, style, { codePoints = [] } = {}) {
  const [id, m] = [fontsourceId(family), await fontsourceMeta(family)];
  const w = m?.weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a)) ?? weight;
  const s = m?.styles.includes(style) === false ? 'normal' : style;
  return Promise.all(['latin', ...kitSubsetsFor(String.fromCodePoint(...codePoints), m)].map(async (x) => new Uint8Array(
    await (await fetch(`${await fontsourceAt(id)}files/${id}-${x}-${w}-${s}.woff2`)).arrayBuffer())));
}

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

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

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

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

/** The file of `slices` the screen sets code point `cp` in, if any: the
 *  last one loadCjkFonts adds whose range holds it. A numbered file that
 *  repeats a letter of latin is added after latin, and wins it. */
function cjkSliceFor(slices, cp) {
  const holds = (slice) => slice.ranges.some(([lo, hi]) => cp >= lo && cp <= hi);
  return slices.reduce((last, slice) => (holds(slice) ? slice : last), undefined);
}

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

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

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

/** A Latin family set next to the CJK faces: its latin file, then its
 *  latin-ext file when the face sets letters only latin-ext has (ō ū in
 *  Hepburn rōmaji, ǎ in pinyin), the file loadFonts adds on screen for
 *  them, each marked with its unicode-range and its place in that order:
 *  the PDF sets a character in the file the browser took it from. A face
 *  Fontsource ships without latin-ext, or whose file does not come, gets
 *  latin alone, and the PDF names the letters it lacks. */
async function cjkLatinPdfFiles(family, weight, style, request) {
  const meta = await fontsourceMeta(family);
  const beyond = [...(request?.codePoints ?? [])].some(cjkLatinExtOnly);
  if (!beyond || !meta?.subsets?.includes('latin-ext')) return fontsourceProvider(family, weight, style);
  const weights = meta.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && !meta.styles.includes('italic') ? 'normal' : style;
  const id = fontsourceId(family);
  const url = `${await fontsourceAt(id)}files/${id}-latin-ext-${w}-${s}.woff2`;
  const [latin, ext] = await Promise.all([fontsourceProvider(family, weight, style), fetch(url)
    .then(async (res) => (res.ok ? decompressWoff2(new Uint8Array(await res.arrayBuffer())) : null), () => null)]);
  const ranges = kitRanges();
  return ext ? [Object.assign(latin, { unicodeRange: ranges.latin, order: 0 }),
    Object.assign(ext, { unicodeRange: ranges['latin-ext'], order: 1 })] : latin;
}

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

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

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

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

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

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

/** The arabic file of a face. */
async function arabicFileUrl(family, weight, style) {
  const id = fontsourceId(family);
  return `${await fontsourceAt(id)}files/${id}-arabic-${weight}-${style}.woff2`;
}

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

/** The PDF font provider for recipes with Arabic faces: a family with an
 *  arabic subset gets its arabic file when its pages set Arabic letters
 *  (`request.codePoints`), then its latin file, and its latin-ext file for
 *  the letters beyond latin (transliteration: ā ḥ ʿ), each marked with its
 *  unicode-range and its place in the order the screen added them (latin
 *  and latin-ext by loadFonts, then arabic): the arabic file also has a
 *  space and brackets, which the browser takes from latin, the file whose
 *  range holds them, and postext-pdf follows it. Any other family goes to
 *  fontsourceProvider (the "pdf" block). */
async function arabicPdfProvider(family, weight, style, request) {
  if (!(await isArabicFamily(family))) return fontsourceProvider(family, weight, style, request);
  const meta = await fontsourceMeta(family);
  const weights = meta.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && !meta.styles.includes('italic') ? 'normal' : style;
  const wanted = [...(request?.codePoints ?? [])];
  const id = fontsourceId(family);
  const subsets = !wanted.length || wanted.some(inArabicRange) ? ['arabic', 'latin'] : ['latin'];
  if (meta.subsets.includes('latin-ext') && wanted.some((cp) => /[Ā-˿Ḁ-ỿ]/u.test(String.fromCodePoint(cp)))) {
    subsets.push('latin-ext');
  }
  const at = await fontsourceAt(id);
  return Promise.all(subsets.map(async (subset) => {
    const url = `${at}files/${id}-${subset}-${w}-${s}.woff2`;
    const res = await fetch(url);
    if (!res.ok) throw new Error(`Fontsource file ${url} (${res.status})`);
    const bytes = await decompressWoff2(new Uint8Array(await res.arrayBuffer()));
    return Object.assign(bytes, { unicodeRange: subset === 'arabic' ? arabicRange() : kitRanges()[subset],
      order: ['latin', 'latin-ext', 'greek', 'arabic'].indexOf(subset) });
  }));
}

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

## Variantes

### Prendre la cursive américaine

Playwrite propose une famille pour de nombreux modèles scolaires. Pour la cursive des États-Unis, changez la police anglaise et générez de nouveau ses pointillés.

```diff
-  en: { hand: 'Playwrite GB J', ruling: 'gb', u: 3.6 },
+  en: { hand: 'Playwrite US Trad', ruling: 'gb', u: 3.6 },
```

### Écrire sur une grosse ligne Seyès sur deux

En début d’année, les enfants écrivent souvent sur une grosse ligne sur deux. Donnez aux lignes d’écriture françaises un pas de huit lignes de réglure.

```diff
-    seyes: { above: 4, below: 2, gap: -2, seyes: true }, // a row on every heavy line
+    seyes: { above: 4, below: 2, gap: 2, seyes: true },
```

## Erreurs fréquentes

- Un texte de maquette est coupé au bord de sa boîte. Une boîte haute d’une seule ligne coupe les jambages du g et du p du modèle : donnez-lui un grand interlignage et placez-la depuis la ligne de base.
- `loadCjkFonts` charge chaque police pour tout l’échantillon : une police chinoise à laquelle il manque un caractère employé n’importe où dans le texte fait échouer le chargement. Dans un colophon, écrivez les noms des polices en lettres latines.

## Crédits

- Recette: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Images: Two children writing in notebooks at a school table, a cat asleep on a chair beside them.: Generated With Diffusion Models, original
- Images: A smiling sun.: Generated With Diffusion Models, original
- Images: A crescent moon with three stars.: Generated With Diffusion Models, original
- Images: A ginger cat sitting.: Generated With Diffusion Models, original
- Images: A brown and white puppy.: Generated With Diffusion Models, original
- Images: An orange fish with blue stripes.: Generated With Diffusion Models, original
- Images: A honey bee flying.: Generated With Diffusion Models, original
- Images: A little black spider on a thread.: Generated With Diffusion Models, original
- Images: A red apple.: Generated With Diffusion Models, original
- Images: A golden key.: Generated With Diffusion Models, original
- Images: A red child's shoe.: Generated With Diffusion Models, original
- Images: A small house with a red roof.: Generated With Diffusion Models, original
- Images: A small sailing boat.: Generated With Diffusion Models, original
- Images: A yellow duckling.: Generated With Diffusion Models, original
- Images: A colourful kite.: Generated With Diffusion Models, original
- Images: A birthday cake with three candles.: Generated With Diffusion Models, original
- Images: A penguin.: Generated With Diffusion Models, original
- Images: An owl on a branch.: Generated With Diffusion Models, original
- Images: A red umbrella in the rain.: Generated With Diffusion Models, original
- Images: An ice-cream cone with two scoops.: Generated With Diffusion Models, original
- Images: A blue and orange butterfly.: Generated With Diffusion Models, original
- Images: A leafy tree.: Generated With Diffusion Models, original
- Images: A snowy mountain.: Generated With Diffusion Models, original
- Images: A daisy.: Generated With Diffusion Models, original
- Images: A small blue bird on a twig.: Generated With Diffusion Models, original
- Images: Splashing water.: Generated With Diffusion Models, original
- Images: A small campfire.: Generated With Diffusion Models, original
- Images: A child's hand holding a pencil with the tripod grip.: Generated With Diffusion Models, original
- Images: A golden star medal with coloured pencils.: Generated With Diffusion Models, original
- Images: The dotted letters of the en edition, traced along the outlines of Playwrite GB J Thin.: Ignacio Ferro, original
- Images: The dotted letters of the es edition, traced along the outlines of Playwrite ES Thin.: Ignacio Ferro, original
- Images: The dotted letters of the ca edition, traced along the outlines of Playwrite ES Thin.: Ignacio Ferro, original
- Images: The dotted letters of the fr edition, traced along the outlines of Playwrite FR Trad Thin.: Ignacio Ferro, original
- Images: The dotted letters of the de edition, traced along the outlines of Playwrite DE VA Thin.: Ignacio Ferro, original
- Images: The dotted letters of the it edition, traced along the outlines of Playwrite IT Trad Thin.: Ignacio Ferro, original
- Images: The dotted letters of the pt edition, traced along the outlines of Playwrite BR Thin.: Ignacio Ferro, original
- Images: The dotted letters of the ar edition, traced along the outlines of Playpen Sans Arabic Thin.: Ignacio Ferro, original
- Caractères: Andika (OFL-1.1), Lexend (OFL-1.1), Playwrite GB J (OFL-1.1), Playwrite ES (OFL-1.1), Playwrite FR Trad (OFL-1.1), Playwrite DE VA (OFL-1.1), Playwrite IT Trad (OFL-1.1), Playwrite BR (OFL-1.1), LXGW WenKai TC (OFL-1.1), Noto Serif SC (OFL-1.1), Noto Sans SC (OFL-1.1), Klee One (OFL-1.1), Zen Maru Gothic (OFL-1.1), Playpen Sans Arabic (OFL-1.1), Noto Naskh Arabic (OFL-1.1), Baloo Bhaijaan 2 (OFL-1.1)
- Code: MIT · Contenu d’exemple: CC-BY-4.0

## Recettes liées

- [Nº 060 · Livret de lecture avec pastilles de sons](https://postext.dev/fr/cookbook/reading-primer-syllables.md): Un livret de lecture sur la lettre M : chaque son en pastille de la couleur de sa voyelle, et une grille de mots illustrés, une aquarelle par case. · Niveau 2 (Intermédiaire) · Cahiers et exercices
- [Nº 159 · Cahier d’activités aux encadrés qui s’agrandissent](https://postext.dev/fr/cookbook/activity-book-growing-boxes.md): Un cahier de sciences fait de gabarits : les encadrés d’une pile grandissent avec leur texte, les lignes sont sur des blocs vides, le projet a sa suite. · Niveau 3 (Avancé) · Cahiers et exercices, Manuels scolaires
- [Nº 122 · Le kanbun avec ses signes de lecture et sa lecture japonaise](https://postext.dev/fr/cookbook/kanbun-kundoku.md): Trois maximes des Entretiens et un quatrain Tang comme dans un manuel japonais : signes de retour et okurigana vermillon, lecture en kana sous chaque passage. · Niveau 2 (Intermédiaire) · Manuels scolaires