# Des notes au pied de la colonne qui les appelle

> Les appels Markdown [^id] deviennent des notes numérotées au pied de la colonne qui les cite ; options : une colonne, fin de chapitre, numéros continus.

- Version HTML: https://postext.dev/fr/cookbook/novel-footnotes-column-foot
- Recette Nº 071 · Encadrés et notes · Niveau 2 (Intermédiaire) · Sorties: Canvas, PDF, Contrôles en direct
- Genres: Fiction, théâtre et prose littéraire
- Nécessite postext ≥ 1.25.0, postext-pdf ≥ 1.25.0 · testée avec 1.31.0, postext-pdf 1.31.0 le 2026-10-13
- Pages: [1](https://postext.dev/cookbook/novel-footnotes-column-foot/en/p01.webp?v=a115cc5f), [2](https://postext.dev/cookbook/novel-footnotes-column-foot/en/p02.webp?v=a115cc5f), [3](https://postext.dev/cookbook/novel-footnotes-column-foot/en/p03.webp?v=a115cc5f)
- PDF: https://postext.dev/cookbook/novel-footnotes-column-foot/en/novel-footnotes-column-foot.pdf?v=a115cc5f
- Ouvrir dans le Sandbox: https://postext.dev/fr/sandbox#recipe=novel-footnotes-column-foot&lang=en (.postext: https://postext.dev/cookbook/novel-footnotes-column-foot/en/novel-footnotes-column-foot.postext)
- Dernière mise à jour: 2026-10-10
- Autres langues: [en](https://postext.dev/en/cookbook/novel-footnotes-column-foot.md), [es](https://postext.dev/es/cookbook/novel-footnotes-column-foot.md), [ca](https://postext.dev/ca/cookbook/novel-footnotes-column-foot.md), [pt](https://postext.dev/pt/cookbook/novel-footnotes-column-foot.md), [zh](https://postext.dev/zh/cookbook/novel-footnotes-column-foot.md), [ja](https://postext.dev/ja/cookbook/novel-footnotes-column-foot.md), [ar](https://postext.dev/ar/cookbook/novel-footnotes-column-foot.md)

## En bref

Une édition scolaire d’un roman classique espagnol, en deux colonnes. Elle montre comment placer chaque note au pied de la colonne qui la mentionne : le lecteur n’a jamais à tourner la page pour la trouver.

## Ce que vous allez composer

Une édition scolaire du *Lazarillo de Tormes*, en 210 × 280 mm et deux colonnes d’EB Garamond : le prologue et le début du premier traité, où Lázaro naît dans un moulin sur le Tormes et part courir le monde avec un aveugle. Les notes expliquent ce qu’un lecteur de 1554 savait et qu’un lecteur d’aujourd’hui ignore : le village de Tejares, l’expédition de l’île de Los Gelves, le taureau de pierre du pont de Salamanque. Chacune se place au pied de la colonne qui l’appelle, en corps plus petit, sous un filet court lie-de-vin : l’œil descend du numéro à la note et remonte sans tourner la page. L’édition anglaise reprend les notes de Clements Markham pour sa traduction de 1908.

**Cette recette répond à:**

- Comment composer les notes de bas de page au pied de la colonne où elles sont appelées ?

## La réponse courte

```js
// script.js, lignes 42–54
// In the Markdown: `Tejares,[^9]` cites a note (the id may be a word: `[^tejares]`), and
// a paragraph that opens with `[^9]:` anywhere in the chapter defines it. The engine
// numbers the notes in order of citation and keeps each note in the column of the line
// that cites it: a line whose note does not fit under it moves on with the note.
const footnotes = () => ({
  placement: options.placement, // 'column' (the foot of the citing column) or 'chapterEnd'
  numbering: options.numbering, // 'chapter': 1, 2, 3… again under every chapter heading
  fontSize: pt(8.5), // off the baseline grid: the notes stack up from the column's foot
  lineHeight: pt(10.5),
  hangingIndent: em(0.9), // turnover lines align past the number
  spaceBetween: pt(1.5),
  separator: { width: 0.25, lineWidth: pt(0.5), color: col('oxblood') },
});
```

## Ingrédients

**Enseigne**

- [Notes de bas de page](https://postext.dev/fr/docs/document-format.md#notes-de-bas-de-page): Des notes appelées avec [^id] et composées au pied de la colonne qui les cite, ou après le chapitre, numérotées par chapitre ou sur tout le livre.

**Utilise aussi**

- [Exposants et indices](https://postext.dev/fr/docs/document-format.md#mise-en-forme-en-ligne)
- [Une ou deux colonnes](https://postext.dev/fr/docs/configuration-page-layout.md#types-de-mise-en-page)
- [Ouvertures composées](https://postext.dev/fr/docs/configuration-text.md#étendue-et-maquette-avancée)
- [Attributs de titre](https://postext.dev/fr/docs/document-format.md#attributs-de-titre)
- [Titres courants et folios](https://postext.dev/fr/docs/configuration-page-layout.md#en-têtes-et-pieds-de-page)
- [Marges en miroir](https://postext.dev/fr/docs/configuration-page-layout.md#marges-en-miroir)
- [Titres courants selon le rôle de la page](https://postext.dev/fr/docs/configuration-page-layout.md#éléments-de-texte)
- [Styles de paragraphe](https://postext.dev/fr/docs/configuration-styles.md#styles-de-paragraphe)
- [Palette de couleurs sémantique](https://postext.dev/fr/docs/configuration-fonts-colors-viewers.md#palette-de-couleurs)
- [Couleur du papier](https://postext.dev/fr/docs/configuration-page-layout.md#page)
- [Veuves, orphelines et fins de paragraphe trop courtes](https://postext.dev/fr/docs/configuration-text.md#orphelines-veuves-lignes-creuses-et-règles-de-maintien)
- [Export PDF](https://postext.dev/fr/docs/configuration-programmatic-usage.md#générer-des-pdf)
- [PDF balisé accessible](https://postext.dev/fr/docs/configuration-fonts-colors-viewers.md#génération-pdf-configuration)
- [Bandeau de chapitre sur toute la largeur](https://postext.dev/fr/docs/configuration-text.md#étendue-et-maquette-avancée)
- [Polices intégrées au PDF](https://postext.dev/fr/docs/configuration-programmatic-usage.md#pourquoi-un-fournisseur-de-polices)

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

- [`bodyText`](https://postext.dev/fr/docs/configuration-text.md#texte-courant), [`colorPalette`](https://postext.dev/fr/docs/configuration-fonts-colors-viewers.md#palette-de-couleurs), [`footer`](https://postext.dev/fr/docs/configuration-page-layout.md#en-têtes-et-pieds-de-page), `footnotes`, [`header`](https://postext.dev/fr/docs/configuration-page-layout.md#en-têtes-et-pieds-de-page), [`headings`](https://postext.dev/fr/docs/configuration-text.md#titres), [`layout`](https://postext.dev/fr/docs/configuration-page-layout.md#mise-en-page), [`locale`](https://postext.dev/fr/docs/configuration-text.md#césure), [`page`](https://postext.dev/fr/docs/configuration-page-layout.md#page), [`paragraphStyles`](https://postext.dev/fr/docs/configuration-styles.md#styles-de-paragraphe)

**API**

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

**Caractères**

- EB Garamond (OFL-1.1), Bodoni Moda (OFL-1.1), IBM Plex Sans Condensed (OFL-1.1)

## Préparation

### 1 · Appeler la note là où elle se rapporte, la définir n’importe où

La configuration est [la réponse courte](https://postext.dev/fr/cookbook/novel-footnotes-column-foot.md#la-réponse-courte) ci-dessus ; le reste est du Markdown. `natives of Tejares,[^9]` imprime un chiffre en exposant collé à la virgule, et un paragraphe qui commence par `[^9]:` contient la note. Les définitions sortent du flux où que vous les écriviez : cet exemple les regroupe toutes à la fin du chapitre, comme les notes de Markham dans le fichier source. Les numéros suivent l’ordre des appels, si bien que les identifiants Markdown peuvent être des mots (`[^tejares]` dans l’édition espagnole) et que renuméroter un chapitre n’oblige jamais à retoucher les notes.

### 2 · Laisser à la colonne la place de ses notes

Avant de composer une ligne, la mise en page ajoute la hauteur des notes que cette ligne appelle pour la première fois, et celle du filet quand il s’agit de la première note de la colonne. Une ligne dont la note ne tient pas en dessous passe à la colonne suivante avec son paragraphe, selon les règles des veuves et des orphelines : un numéro ne renvoie jamais à une note placée dans une autre colonne. Les notes s’empilent depuis le pied à leur propre corps et leur propre interlignage, hors de la grille de ligne de base, tandis que le texte au-dessus reste sur la grille ; l’équilibrage des colonnes ne compte que le texte.

### 3 · Descendre chaque ouverture à la même ligne

```js
// script.js, lignes 58–76
const opener = {
  enabled: true,
  // The sink holds a two-line title and its rule, with ~8 mm to the first line of text,
  // so every chapter starts on the same grid line whatever its title's length.
  minHeight: pt(LEAD * 10),
  slot: { elements: [
    { kind: 'text', id: 'kicker', content: '{attr.kicker}', ...label, fontSize: pt(8.5),
      letterSpacing: pt(1.8), color: col('oxblood'), align: 'center',
      placement: at('container', 'top', 0, 7) },
    { kind: 'text', id: 'title', content: '{titleText}', fontFamily: 'Bodoni Moda', italic: true,
      fontSize: pt(26), lineHeight: 1.1, color: col('ink'), align: 'center',
      overflow: 'wrap', // design text ends in an ellipsis by default
      placement: { ...at('container', 'top-left', 0, 13),
        size: { width: 'fill', height: 'auto' } } },
    { kind: 'rule', id: 'rule', direction: 'horizontal', thickness: pt(0.75), color: col('oxblood'),
      placement: { anchor: { to: '#title', edge: 'below' }, // a rule starts at the box's left
        offset: { x: mm((MEASURE - 14) / 2), y: mm(4.5) }, size: { width: mm(14) } } },
  ] },
};
```

L’ouverture s’étend sur les deux colonnes et tire le surtitre du chapitre de l’attribut `kicker` du titre. `minHeight` réserve dix lignes de la grille, assez pour un titre de deux lignes en Bodoni et son filet : le texte de chaque chapitre commence ainsi sur la même ligne, et le filet ne tombe jamais sur la première ligne de texte.

### 4 · Le livre au verso, le chapitre au recto

```js
// script.js, lignes 80–97
const head = (id, content, parity, edge, x, extra = {}) => ({
  kind: 'text', id, content, parity, pages: 'body', // never on openers
  ...label, fontSize: pt(7.5), letterSpacing: pt(1.3), color: col('muted'),
  placement: at('page', edge, x, 13), ...extra,
});
const folio = { color: col('oxblood') };
const header = { elements: [
  head('verso-folio', '{pageNumber}', 'even', 'top-left', MARGIN.outer,
    { ...folio, align: 'left' }),
  head('verso-title', '{title}', 'even', 'top-left', MARGIN.outer + 9, { align: 'left' }),
  head('recto-title', '{chapterTitle}', 'odd', 'top-right', -(MARGIN.outer + 9),
    { align: 'right', overflow: 'ellipsis', size: { width: mm(120) } }),
  head('recto-folio', '{pageNumber}', 'odd', 'top-right', -MARGIN.outer,
    { ...folio, align: 'right' }),
] };
// Openers carry a drop folio instead, centred under the text block.
const footer = { elements: [{ ...head('drop-folio', '{pageNumber}', 'all', 'bottom', 0,
  { ...folio, align: 'center', placement: at('page', 'bottom', 0, -11) }), pages: 'opener' }] };
```

Les titres courants sont ancrés à la page selon sa parité, avec le folio sur le bord extérieur ; `pages: 'body'` les écarte des ouvertures, qui reçoivent un folio centré en pied. Un titre de chapitre trop long se termine par des points de suspension à 120 mm au lieu d’empiéter sur le folio.

### 5 · Essayer les autres placements

```js
// script.js, lignes 202–230
const CHOICES = {
  columns: [[2, t({ en: 'Two columns', es: 'Dos columnas' })],
    [1, t({ en: 'One column', es: 'Una columna' })]],
  placement: [['column', t({ en: 'Column foot', es: 'Pie de columna' })],
    ['chapterEnd', t({ en: 'End of chapter', es: 'Final del capítulo' })]],
  numbering: [['chapter', t({ en: 'Per chapter', es: 'Por capítulo' })],
    ['document', t({ en: 'Continuous', es: 'Continua' })]],
};
const bar = document.createElement('form');
bar.id = 'options';
bar.ariaLabel = t({ en: 'Footnote options', es: 'Opciones de las notas' });
for (const [key, choices] of Object.entries(CHOICES)) {
  const group = bar.appendChild(document.createElement('fieldset'));
  for (const [value, text] of choices) {
    const input = Object.assign(document.createElement('input'), { type: 'radio', name: key,
      value: String(value), checked: options[key] === value });
    const item = group.appendChild(document.createElement('label'));
    item.append(input, text);
  }
}
bar.addEventListener('change', (event) => {
  const { name, value } = event.target;
  options[name] = name === 'columns' ? Number(value) : value;
  config.layout = layoutFor(options.columns); // changed in place: the build sees it
  config.footnotes = footnotes();
  doc = buildDocument({ markdown }, config); // the fonts are loaded by now
  showPages(doc, { title: TITLE });
});
document.getElementById('pages').before(bar);
```

Chaque interrupteur recompose le chapitre avec une seule option modifiée. **One column** place les notes au pied de la page, qui fait alors office de colonne. **End of chapter** les place après le dernier paragraphe du chapitre et les descend au pied de la colonne qu’elles ferment, sous le même filet. **Continuous** poursuit la numérotation du prologue dans le premier chapitre au lieu de repartir de 1.

## La recette complète

Les fichiers ci-dessous sont composés à partir du dossier de la recette, avec le texte d’exemple et le kit commun des Recettes déjà inclus. Pour les exécuter comme une seule page, placez le HTML dans `<body>`, le CSS dans un élément `<style>` et le script dans un `<script type="module">` ; ou collez chacun dans le panneau correspondant d’un nouveau pen CodePen (le JS en tant que module). Le script 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/novel-footnotes-column-foot

### style.css

```css
/* The option bar over the pages: three pairs of choices, each a segmented switch. */
#options {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px;
  max-width: 1120px; margin: 0 auto; padding: 18px 16px 6px;
  font: 600 12px/1.2 "IBM Plex Sans Condensed", system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
}
#options fieldset {
  display: flex; margin: 0; padding: 2px; border: 1px solid #4a433d; border-radius: 999px;
}
#options label {
  display: block; padding: 7px 14px; border-radius: 999px; color: #c9bdae; cursor: pointer;
}
#options input { position: absolute; opacity: 0; pointer-events: none; }
#options label:has(input:checked) { background: #7d2b1f; color: #fbf8f2; }
#options label:has(input:focus-visible) { outline: 2px solid #c9bdae; outline-offset: 2px; }
```

### script.js

```js
// ═══ Postext Cookbook · Nº 071 · Footnotes at the foot of the column ══════════════
// https://postext.dev/en/cookbook/novel-footnotes-column-foot
// Code: MIT · Text: Lazarillo de Tormes (1554) and Markham's 1908 translation (PD)
// Fonts: EB Garamond, Bodoni Moda, IBM Plex Sans Condensed (SIL OFL 1.1) · Needs postext ≥ 1.25.0
import { buildDocument, buildDocumentWithFonts, renderPageToCanvas } from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'en'; // @lang: the language of the sample document ('en' | 'es')
const RECIPE = 'novel-footnotes-column-foot';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: oxblood for the kickers, the folios and the notes' rule; ink on warm paper
const palette = {
  ink: '#241e1a', // text: a warm near-black
  oxblood: '#7d2b1f', // the one accent
  muted: '#6f655b', // running heads, colophon
  rule: '#c9bdae', // hairlines
  paper: '#fbf8f2',
};
// col(id): a colour linked to its palette entry, with the entry's hex beside the id.
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' } })),
  // The engine's defaults link to main-color: point it at the accent, never the default blue.
  { id: 'main-color', name: 'accent (defaults)', value: { hex: palette.oxblood, model: 'hex' } },
];
// #endregion
const TRIM = { width: 210, height: 280 }; // a school edition: two 82 mm columns
const MARGIN = { top: 23, bottom: 22, inner: 21, outer: 17 }; // mirrored
const MEASURE = TRIM.width - MARGIN.inner - MARGIN.outer; // 172 mm
const LEAD = 13.5; // body leading in pt: the baseline grid
const at = (to, edge, x = 0, y = 0) => ({ anchor: { to, edge }, offset: { x: mm(x), y: mm(y) } });
const label = { fontFamily: 'IBM Plex Sans Condensed', fontWeight: 600,
  textTransform: 'uppercase' };

// The switches under the title change these and build again (#region live).
const options = { columns: 2, placement: 'column', numbering: 'chapter' };
const layoutFor = (columns) => (columns === 2
  ? { layoutType: 'double', gutterWidth: mm(7) } : { layoutType: 'single' });

// #region answer: the notes at the foot of the column that cites them
// In the Markdown: `Tejares,[^9]` cites a note (the id may be a word: `[^tejares]`), and
// a paragraph that opens with `[^9]:` anywhere in the chapter defines it. The engine
// numbers the notes in order of citation and keeps each note in the column of the line
// that cites it: a line whose note does not fit under it moves on with the note.
const footnotes = () => ({
  placement: options.placement, // 'column' (the foot of the citing column) or 'chapterEnd'
  numbering: options.numbering, // 'chapter': 1, 2, 3… again under every chapter heading
  fontSize: pt(8.5), // off the baseline grid: the notes stack up from the column's foot
  lineHeight: pt(10.5),
  hangingIndent: em(0.9), // turnover lines align past the number
  spaceBetween: pt(1.5),
  separator: { width: 0.25, lineWidth: pt(0.5), color: col('oxblood') },
});
// #endregion

// #region opener: kicker, a Bodoni title and a short rule, centred over both columns
const opener = {
  enabled: true,
  // The sink holds a two-line title and its rule, with ~8 mm to the first line of text,
  // so every chapter starts on the same grid line whatever its title's length.
  minHeight: pt(LEAD * 10),
  slot: { elements: [
    { kind: 'text', id: 'kicker', content: '{attr.kicker}', ...label, fontSize: pt(8.5),
      letterSpacing: pt(1.8), color: col('oxblood'), align: 'center',
      placement: at('container', 'top', 0, 7) },
    { kind: 'text', id: 'title', content: '{titleText}', fontFamily: 'Bodoni Moda', italic: true,
      fontSize: pt(26), lineHeight: 1.1, color: col('ink'), align: 'center',
      overflow: 'wrap', // design text ends in an ellipsis by default
      placement: { ...at('container', 'top-left', 0, 13),
        size: { width: 'fill', height: 'auto' } } },
    { kind: 'rule', id: 'rule', direction: 'horizontal', thickness: pt(0.75), color: col('oxblood'),
      placement: { anchor: { to: '#title', edge: 'below' }, // a rule starts at the box's left
        offset: { x: mm((MEASURE - 14) / 2), y: mm(4.5) }, size: { width: mm(14) } } },
  ] },
};
// #endregion

// #region running-heads: book title on the verso, chapter on the recto, folios outside
const head = (id, content, parity, edge, x, extra = {}) => ({
  kind: 'text', id, content, parity, pages: 'body', // never on openers
  ...label, fontSize: pt(7.5), letterSpacing: pt(1.3), color: col('muted'),
  placement: at('page', edge, x, 13), ...extra,
});
const folio = { color: col('oxblood') };
const header = { elements: [
  head('verso-folio', '{pageNumber}', 'even', 'top-left', MARGIN.outer,
    { ...folio, align: 'left' }),
  head('verso-title', '{title}', 'even', 'top-left', MARGIN.outer + 9, { align: 'left' }),
  head('recto-title', '{chapterTitle}', 'odd', 'top-right', -(MARGIN.outer + 9),
    { align: 'right', overflow: 'ellipsis', size: { width: mm(120) } }),
  head('recto-folio', '{pageNumber}', 'odd', 'top-right', -MARGIN.outer,
    { ...folio, align: 'right' }),
] };
// Openers carry a drop folio instead, centred under the text block.
const footer = { elements: [{ ...head('drop-folio', '{pageNumber}', 'all', 'bottom', 0,
  { ...folio, align: 'center', placement: at('page', 'bottom', 0, -11) }), pages: 'opener' }] };
// #endregion

const config = { // one object: the switches below change it in place
  locale: t({ en: 'en-us', es: 'es' }), // the language of the hyphenation patterns
  colorPalette,
  page: { sizePreset: 'custom', width: mm(TRIM.width), height: mm(TRIM.height), dpi: 150,
    backgroundColor: col('paper'),
    margins: { top: mm(MARGIN.top), bottom: mm(MARGIN.bottom), left: mm(MARGIN.inner),
      right: mm(MARGIN.outer), mirror: true } }, // left = inner
  layout: layoutFor(options.columns),
  bodyText: { fontFamily: 'EB Garamond', fontSize: pt(10.5), lineHeight: pt(LEAD),
    color: col('ink'), boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    textAlign: 'justify', firstLineIndent: mm(4.5), indentAfterHeading: false,
    hyphenation: { enabled: true }, optimalLineBreaking: true,
    avoidWidows: true, avoidOrphans: true, avoidRunts: true },
  headings: { fontFamily: 'EB Garamond', color: col('ink'), levels: [
    // 'any': the treatise opens on the next page, recto or verso.
    { level: 1, span: 'page', advancedDesign: opener, marginBottom: pt(0),
      breakBefore: { enabled: true, parity: 'any' } },
    { level: 2, fontSize: pt(12.5), lineHeight: pt(LEAD), italic: true, fontWeight: 400,
      color: col('oxblood'), marginTop: pt(LEAD), marginBottom: pt(0) },
  ] },
  paragraphStyles: [
    { id: 'colophon', ...label, textTransform: 'none', fontSize: pt(7.5), lineHeight: pt(10),
      color: col('muted'), textAlign: 'left', firstLineIndent: pt(0), marginTop: pt(LEAD) },
  ],
  footnotes: footnotes(),
  header,
  footer,
};

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "Lazarillo de Tormes"
---

# Prologue

I hold it to be good that such remarkable things as have happened to me, perhaps never before seen or heard of, should not be buried in the tomb of oblivion. It may be that some one who reads may find something that pleases him. For those who do not go very deep into the matter there is a saying of Pliny “*that there is no book so bad that it does not contain something that is good*.”[^8] Moreover, all tastes are not the same, and what one does not eat another will. Thus we see things that are thought much of by some, depreciated by others. Hence no circumstance ought to be omitted, how insignificant soever it may be, but all should be made known, especially as some fruit might be plucked from such a tree.

If this were not so, very few would write at all, for it cannot be done without hard work.

Authors do not wish to be recompensed with money, but by seeing that their work is known and read, and, if it contains anything that is worthy, that it is praised. On this point Tully says: “Honour creates the arts.” Think you that the soldier who is first on the ladder cares less for his life than the others? Certainly not. It is the desire for fame that leads him to seek such danger. It is the same in the arts and in letters. We say: “The Doctor preaches very well and he is one who desires much the welfare of souls,” but ask him whether he is much offended when they say, “How wonderfully your reverence has done it!” So also in arms, men report how such an one has jousted wretchedly, and he has given his arms to a jester because he praised him for using his lances so well. What would he have given if he had been told the truth? Now that all things go in this manner, I confess that I am not more righteous than my neighbours. I write in this rough style, and all who may find any pleasure in it will be satisfied to know that there lives a man who has met with such fortunes, encountered such dangers, and suffered such adversities. I beseech your Honour that you will accept the poor service of one who would be richer if his power was equal to his desire. Well, your Honour! This author writes what he writes, and relates his story very fully.

It seemed to him that he should not begin in the middle, but quite at the beginning, so that there might be a full notice of his personality, and also that those who inherit noble estates may consider how little fortune owes them, having been so very partial to them in its gifts; and how much more those have done who, not being so favoured, have, by force and management, arrived at a good estate.

# Lazaro relates the way of his birth and tells whose son he is {kicker="Chapter I"}

Well! your Honour must know, before anything else, that they call me Lazarillo de Tormes, and that I am the son of Thomé Gonçales and Antonia Perez, natives of Tejares,[^9] a village near Salamanca. My birth was in the river Tormes,[^10] for which reason I have the river for a surname, and it was in this manner.

My father, whom God pardon, had charge of a flour mill which was on the banks of that river. He was the miller there for over fifteen years, and my mother, being one night taken with me in the mill, she gave birth to me there. So that I may say with truth that I was born in the river.

When I was a child of eight years old, they accused my father of certain misdeeds done to the sacks of those who came to have their corn ground. He was taken into custody, and confessed and denied not, suffering persecution for justice’s sake. So I trust in God that he is in glory, for the Evangelist tells us that such are blessed. At that time there was a certain expedition against the Moors[^11] and among the adventurers was my father, who was banished for the affair already mentioned. He went in the position of attendant on a knight who also went, and, with his master, like a loyal servant, he ended his life.

My widowed mother, finding herself without husband or home, determined to betake herself to the good things so as to be among them; so she went to live in the city. She hired a small house, and was employed to prepare victuals for certain students. She also washed the clothes of the stable-boys who had charge of the horses of the Comendador de la Magdalena.[^12] Thus she frequented the stables, she and a dark-coloured man, who was one of those who had the care of the horses. They came to know each other. Sometimes he came to our house late, and went away in the morning. At other times he came to the door in the day-time, with the excuse that he wanted to buy eggs, and walked into the house. At first I did not like him, for I was afraid of his colour and his ugly face. But when I saw that his coming was the sign of better living, I began to like him, for he always brought pieces of meat, bread, and in the winter, fuel to warm us.

This intercourse went on until one day my mother gave me a pretty little brown brother, whom I played with and helped to keep warm. I remember once that when my stepfather was fondling the child, it noticed that my mother and I were white, and that he was not. It frightened the child, who ran to my mother, pointing with its finger and saying, “Mother, he is ugly!” To this he replied laughing; but I noticed the words of my little brother, and, though so young, I said to myself, “How many there are in the world who run from others because they do not see themselves in them.”

It was our fate that the intimacy of the Zayde, for so they called my stepfather, came to the ears of the steward. On looking into the matter he found that half the corn he gave out for the horses was stolen, also that the fuel, aprons, pillions, horse-cloths, and blankets were missing, and that when nothing else was left, the horse-shoes were taken. With all this my mother was helped to bring up the child. We need not wonder at a priest or a friar, when one robs the poor, and the other his female devotees to help a friend such as himself, when the love of a poor stable-lad brings him to this.

All I have related was proved, because they cross-questioned me with threats, and being a child I answered and let out all I knew from fear, down to certain horse-shoes which, by my mother’s order, I sold to a blacksmith. They flogged my unhappy stepfather, and put my mother on the accustomed penance as a punishment. An order was given that she was not to enter the stables of the Comendador, nor to receive the flogged Zayde in her house.

The poor woman complied with the sentence that she might not lose all; and to avoid danger and silence evil tongues she went away into service. She was employed in the open gallery of an inn, and so she contrived to rear the little brother, though suffering from many difficulties. She raised him until he could walk, and me until I was a fine little boy, who went for wine and lights for the guests, and for anything else they wanted.

## How Lazaro took service with a blind man

At that time a blind man came to lodge at the inn, who, seeing that I would do to lead him, asked for me from my mother. She gave me to him, saying that I was the son of a good father, and boasting that he had been killed at the Island of Gelves. She told the blind man that she trusted in God that I would not turn out a worse man than my father, and she begged him to treat me well and look after me, as I was an orphan. He answered that he would do so, and that he received me not as his servant but as his son. Thus it was that I began to serve and to lead my new master. We were in Salamanca for some days, but, as the earnings were not to my master’s liking, he determined to go somewhere else. When we were about to depart, I went to see my mother, and, both weeping, she gave me her blessing and said, “I shall see you no more. Strive to be good, and may God direct your ways. You have been brought up, and are now put with a good master. Farewell!” And so I went away to my master who was waiting for me.

We went out of Salamanca and came to the bridge. There is, at the entrance of it, an animal of stone[^14] which almost has the shape of a bull. The blind man told me to go near this animal, and, being there, he said, “Lazaro, put your ear against this bull, and you will hear a great noise inside.” I did so, like a simpleton, believing it to be as he said. When he felt that my head was against the stone, he raised his hand and gave me a tremendous blow against the devil of a bull, so that I felt the pain for more than three days. Then he said to me, “This will teach you that a blind man’s boy ought to be one point more knowing than the devil himself”; and he laughed heartily at his joke. It seemed to me that, in an instant, I awoke from my simplicity in which I had reposed from childhood. I said to myself, “This man says truly that it behoves me to keep my eyes open, for I am alone and have to think for myself.”

We set out on our road, and in a very few days I showed myself to be sprightly, which pleased the blind man, and he said, “I can give you neither gold nor silver, but I can teach you much in the ways of getting a livelihood.” It was so that, after a few days, he showed me many things, and being blind himself, he enlightened and guided me in the ways of life. I mention these trifles to your Honour to show how much knowledge men must have when they are down, and to keep from falling when they are exalted.

:::paragraphs{style="colophon"}
Set in EB Garamond, Bodoni Moda and IBM Plex Sans Condensed (SIL OFL) · Text: *The Life of Lazarillo de Tormes*, translated by Clements Markham (1908), with his notes; the prologue and the first chapter, abridged (public domain)
:::

[^8]: Cervantes knew his *Lazarillo* well. He copies this quotation and puts it into the mouth of the curate when he was examining the books of Don Quixote.

[^9]: Tejares is a small village on the left bank of the river Tormes, about two miles from Salamanca. It consists of a church dedicated to San Pedro, and about fifty houses on the skirts of a hill.

[^10]: The river Tormes rises in the Sierra de Gredos, a range of hills dividing Estremadura from Old Castille, on the confines of the province of Avila. Its chief sources are a large sheet of water called the “Laguna de Gredos,” and a perennial stream called “Tornella.” Receiving several streams from the Gredos hills, the Tormes flows north, passing by Alba de Tormes, where there is a stone bridge; and then turns north-west, passing Salamanca, where there is another fine stone bridge, and Ledesma. Finally, it falls into the Douro, on the Portuguese frontier. The Tormes turns many flour mills.

[^11]: This expedition against the Moors started from Malaga under the command of Don Garcia de Toledo in 1510, when Lazarillo was seven years old. The fleet first touched at Sicily and then made for the island of Los Gelves, off the African coast, between Tunis and Tripoli, now called Zerbi. With Toledo were Diego de Vera and Count Pedro Navarro. Zerbi was a low sandy island covered with palm-trees, ruled by a Sheikh of its own. The army landed on the 8th of August 1510. But the Spaniards fell into an ambuscade and were defeated, Toledo being among the slain. Four thousand were killed or taken prisoners. The rest escaped to the ships and returned to Sicily. Toledo was a grandson of the first Duke of Alva.

[^12]: Comendadores were knights of the Orders of Santiago, Calatrava, and Alcantara. Each had a title affixed to their knighthood. The Comendador of La Magdalena was a knight of the Order of Alcantara.

[^14]: There was a huge mass of granite rudely carved in the shape of an animal, which had been on the bridge from time immemorial; and which Lazarillo thought was like a bull. Its great weight was considered a danger, and it was removed about thirty years ago. It is now in the vestibule of the cloister of San Domingo at Salamanca, but without a head.
`; // content.<lang>.md, inlined by the Cookbook

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
// Every face the design uses, loaded before the first build with the ones the config names.
const FONTS = {
  'EB Garamond': ['400', '400i', '600', '600i', '700'],
  'Bodoni Moda': ['400i'],
  'IBM Plex Sans Condensed': ['600'],
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
const TITLE = t({ en: 'Footnotes at the foot of the column', es: 'Notas al pie de columna' });
let doc = await buildDocumentWithFonts({ markdown }, config, kitFonts(FONTS));
showPages(doc, { title: TITLE });
offerPdf(() => renderToPdf(doc, { fontProvider: fontsourceProvider }), `${RECIPE}.pdf`);

// #region live: three switches, each a fresh build of the chapter with the other option
const CHOICES = {
  columns: [[2, t({ en: 'Two columns', es: 'Dos columnas' })],
    [1, t({ en: 'One column', es: 'Una columna' })]],
  placement: [['column', t({ en: 'Column foot', es: 'Pie de columna' })],
    ['chapterEnd', t({ en: 'End of chapter', es: 'Final del capítulo' })]],
  numbering: [['chapter', t({ en: 'Per chapter', es: 'Por capítulo' })],
    ['document', t({ en: 'Continuous', es: 'Continua' })]],
};
const bar = document.createElement('form');
bar.id = 'options';
bar.ariaLabel = t({ en: 'Footnote options', es: 'Opciones de las notas' });
for (const [key, choices] of Object.entries(CHOICES)) {
  const group = bar.appendChild(document.createElement('fieldset'));
  for (const [value, text] of choices) {
    const input = Object.assign(document.createElement('input'), { type: 'radio', name: key,
      value: String(value), checked: options[key] === value });
    const item = group.appendChild(document.createElement('label'));
    item.append(input, text);
  }
}
bar.addEventListener('change', (event) => {
  const { name, value } = event.target;
  options[name] = name === 'columns' ? Number(value) : value;
  config.layout = layoutFor(options.columns); // changed in place: the build sees it
  config.footnotes = footnotes();
  doc = buildDocument({ markdown }, config); // the fonts are loaded by now
  showPages(doc, { title: TITLE });
});
document.getElementById('pages').before(bar);
// #endregion

// ─── 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 ───────────────────────────────────────────────────────────────────────
```

## Variantes

### Garder les notes de fin de chapitre sous le texte

Avec `placement: 'chapterEnd'`, les notes se placent par défaut au pied de la dernière colonne ; `chapterEndAlign: 'text'` les compose juste sous le dernier paragraphe.

```diff
   placement: options.placement,
+  chapterEndAlign: 'text',
```

### Supprimer le filet

Sans filet, les notes restent séparées du texte par `spaceAbove` et `spaceBelowRule`.

```diff
-  separator: { width: 0.25, lineWidth: pt(0.5), color: col('oxblood') },
+  separator: { enabled: false },
```

## Erreurs fréquentes

- **Une ouverture réserve la hauteur jusqu’à son élément ancré à la page le plus bas.** Une ouverture en maquette avancée réserve la hauteur de son élément le plus bas, et les éléments ancrés à la page ou au fond perdu sous le titre comptent aussi : un décor au pied de la page repousse donc le texte à la page suivante. Donnez à un tel élément reserve: false (depuis postext 1.5) : il est peint là où il est ancré et ne réserve rien. Les éléments qui suivent le bandeau lui-même (ancrés à son pied, ou de hauteur 'fill') ne fixent jamais sa hauteur.
- **Avertissement de mise en page: Note de bas de page sans définition** (`undefinedFootnote`). Un appel [^id] cite une note qu’aucun paragraphe [^id]: ne définit : le numéro s’imprime au-dessus d’une note vide. Solution: Ajoutez un paragraphe [^id]: avec la note, ou corrigez l’identifiant de l’appel. ([Documentation](https://postext.dev/fr/docs/configuration-notes-references.md#notes-de-bas-de-page))
- **Avertissement de mise en page: Note de bas de page jamais citée** (`unusedFootnote`). Une définition [^id]: n’a pas d’appel dans le texte : la note n’est pas composée. Solution: Citez-la avec [^id] là où elle doit aller, ou supprimez la définition. ([Documentation](https://postext.dev/fr/docs/configuration-notes-references.md#notes-de-bas-de-page))

- Un appel placé dans une légende, une cellule de tableau ou un titre s’imprime tel qu’il est écrit : les notes sont lues dans les paragraphes, les éléments de liste, les citations et les encadrés.
- Une note n’est jamais coupée entre deux colonnes : une note plus haute que sa colonne déborde au-delà du pied. Limitez les notes à quelques lignes, comme le font les éditeurs.

## Crédits

- Recette: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Texte: La vida de Lazarillo de Tormes, Burgos edition of 1554: the prologue and the beginning of the first treatise: Anonymous ([source](https://www.gutenberg.org/ebooks/320)), domaine public
- Texte: The Life of Lazarillo de Tormes, translated by Clements Markham (1908), with his notes: the prologue and the first chapter, abridged: Clements Markham ([source](https://www.gutenberg.org/ebooks/53489)), domaine public
- Texte: The Spanish notes, adapted from Markham's and written for this edition: Ignacio Ferro, CC-BY-4.0
- Caractères: EB Garamond (OFL-1.1), Bodoni Moda (OFL-1.1), IBM Plex Sans Condensed (OFL-1.1)
- Code: MIT · Contenu d’exemple: CC-BY-4.0

## Recettes liées

- [Nº 032 · Un classique annoté avec gloses marginales](https://postext.dev/fr/cookbook/annotated-classic-glosses.md): Le thé chez les fous d’Alice en édition annotée : gloses vertes et rouges dans la marge extérieure, face aux lignes expliquées, appelées par une lettre. · Niveau 3 (Avancé) · Fiction, théâtre et prose littéraire
- [Nº 044 · Édition critique : numéros de vers et notes associées](https://postext.dev/fr/cookbook/critical-edition-line-numbers.md): Le Lycidas de Milton (texte de 1645) : lineNumbers numérote un vers sur cinq dans la colonne latérale, et chaque note s’ouvre sur ce numéro en pastille. · Niveau 3 (Avancé) · Poésie
- [Nº 007 · Un livre à partir de chapitres séparés](https://postext.dev/fr/cookbook/book-from-chapters.md): buildBundle compose cinq fichiers Markdown en un seul livre : chaque chapitre s’ouvre sur un recto, et les numéros de page, de chapitre et de figure se suivent. · Niveau 3 (Avancé) · Manuels, guides et ouvrages de référence