# Un banc d’essai pour les réglages de la visionneuse Folio

> Un formulaire de tous les réglages de config.folio pilote postext-folio via setAppearance : papier, reliure, couvertures, bureau, lumière, inclinaison changent.

- Version HTML: https://postext.dev/fr/cookbook/folio-settings-bench
- Recette Nº 103 · Sortie et intégration · Niveau 2 (Intermédiaire) · Sorties: Canvas, Contrôles en direct
- Genres: Manuels, guides et ouvrages de référence
- Nécessite postext ≥ 1.26.0 · testée avec 1.31.0 le 2026-10-13
- Pages: [1](https://postext.dev/cookbook/folio-settings-bench/en/p01.webp?v=6550d91b), [2](https://postext.dev/cookbook/folio-settings-bench/en/p02.webp?v=6550d91b), [3](https://postext.dev/cookbook/folio-settings-bench/en/p03.webp?v=6550d91b), [4](https://postext.dev/cookbook/folio-settings-bench/en/p04.webp?v=6550d91b), [5](https://postext.dev/cookbook/folio-settings-bench/en/p05.webp?v=6550d91b), [6](https://postext.dev/cookbook/folio-settings-bench/en/p06.webp?v=6550d91b), [7](https://postext.dev/cookbook/folio-settings-bench/en/p07.webp?v=6550d91b), [8](https://postext.dev/cookbook/folio-settings-bench/en/p08.webp?v=6550d91b), [9](https://postext.dev/cookbook/folio-settings-bench/en/p09.webp?v=6550d91b), [10](https://postext.dev/cookbook/folio-settings-bench/en/p10.webp?v=6550d91b)
- Ouvrir dans le Sandbox: https://postext.dev/fr/sandbox#recipe=folio-settings-bench&lang=en (.postext: https://postext.dev/cookbook/folio-settings-bench/en/folio-settings-bench.postext)
- Dernière mise à jour: 2026-10-11
- Autres langues: [en](https://postext.dev/en/cookbook/folio-settings-bench.md), [es](https://postext.dev/es/cookbook/folio-settings-bench.md), [ca](https://postext.dev/ca/cookbook/folio-settings-bench.md), [pt](https://postext.dev/pt/cookbook/folio-settings-bench.md), [zh](https://postext.dev/zh/cookbook/folio-settings-bench.md), [ja](https://postext.dev/ja/cookbook/folio-settings-bench.md), [ar](https://postext.dev/ar/cookbook/folio-settings-bench.md)

## En bref

Un petit livre de poche montré en 3D à côté d’un panneau de commandes. Changez le papier, la reliure, le bureau ou la lumière et le livre change aussitôt, sans être recomposé.

## Ce que vous allez composer

*Six Knots*, un livre de poche de dix pages au format 110 × 160 mm, ouvert dans Folio à côté d’un panneau qui présente chaque réglage de `config.folio`. Choisissez un papier et les feuillets changent de couleur, de surface et de rigidité ; passez la reliure de broché à cartonné et une couverture rigide pousse autour du bloc ; choisissez la couverture rigide au lieu des couvertures imprimées, une toile ou un cuir, un bureau, une lumière, une inclinaison. Le livre est mis en page une seule fois. Chaque changement va à la visionneuse avec `setAppearance` : aucune ligne ne bouge, aucune page n’est repeinte, et les réglages s’affichent sous le formulaire comme le code à coller dans `config.folio`.

**Cette recette répond à:**

- Comment prévisualiser la reliure, la couverture, le papier et l’éclairage d’un livre avant l’impression ?
- Comment afficher mon document comme un livre en 3D dont le lecteur tourne les pages à la main ?

## La réponse courte

```js
// script.js, lignes 196–220
const book = createFolioFromDocument(document.getElementById('folio'), doc, {
  // The look starts from doc.config.folio; setAppearance replaces it on every change.
  appearance: { textureBaseUrl: 'https://postext.dev/folio/textures' },
  onChange: ({ pages }) => kitStatus(`${doc.pages.length} pages · open at `
    + pages.map((i) => i + 1).join('–')),
});
function update() {
  const folio = folioOf();
  // Only the appearance changes: the pages keep their paintings, nothing is laid out again.
  book.setAppearance({ folio });
  show('grammage-out', `${folio.paper.grammage} g/m²`);
  show('intensity-out', folio.lighting.intensity.toFixed(2));
  show('tilt-out', `${folio.tilt}°`);
  document.getElementById('folio-json').textContent = `folio: ${JSON.stringify(folio, null, 2)}`;
}
form.addEventListener('input', update);
// A stock sets its own weight: picking one moves the weight slider to the stock's.
const WEIGHTS = { uncoated: 90, bookWove: 80, coatedMatte: 115, coatedSilk: 115,
  coatedGloss: 115, bible: 40, newsprint: 48, cardStock: 250 };
form.elements['paper.type'].addEventListener('change', (event) => {
  form.elements['paper.grammage'].value = WEIGHTS[event.target.value];
  update();
});
document.getElementById('reset-view').addEventListener('click', () => book.resetView());
update();
```

## Ingrédients

**Enseigne**

- [Papier, reliure, bureau et lumière (Folio)](https://postext.dev/fr/docs/configuration-fonts-colors-viewers.md#visionneuse-folio-configuration): config.folio indique comment le livre en 3D est fabriqué et éclairé : sorte et grammage du papier, reliure et couverture, la surface sur laquelle il repose et la lumière.
- [Visionneuse de livre en 3D (Folio)](https://postext.dev/fr/docs/configuration-programmatic-usage.md#un-livre-en-3d-postext-folio): postext-folio ouvre un document mis en page comme un livre imprimé posé sur un bureau : des doubles pages selon la règle du recto et des feuillets que le lecteur tourne à la main.

**Utilise aussi**

- [Styles de titre](https://postext.dev/fr/docs/configuration-styles.md#styles-de-titre)
- [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)
- [Styles de paragraphe](https://postext.dev/fr/docs/configuration-styles.md#styles-de-paragraphe)
- [Titres courants selon le rôle de la page](https://postext.dev/fr/docs/configuration-page-layout.md#éléments-de-texte)
- [Palette de couleurs sémantique](https://postext.dev/fr/docs/configuration-fonts-colors-viewers.md#palette-de-couleurs)
- [Marges en miroir](https://postext.dev/fr/docs/configuration-page-layout.md#marges-en-miroir)
- [Pages sur un canvas](https://postext.dev/fr/docs/configuration-programmatic-usage.md#rendre-une-page-en-bitmap)
- [Géométrie de section](https://postext.dev/fr/docs/configuration-styles.md#styles-de-titre)
- [Titres courants par section](https://postext.dev/fr/docs/configuration-styles.md#styles-de-titre)
- [Chapitres non numérotés](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), [`colorPalette`](https://postext.dev/fr/docs/configuration-fonts-colors-viewers.md#palette-de-couleurs), `folio`, [`footer`](https://postext.dev/fr/docs/configuration-page-layout.md#en-têtes-et-pieds-de-page), [`header`](https://postext.dev/fr/docs/configuration-page-layout.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-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**

- [`buildDocumentWithFonts`](https://postext.dev/fr/docs/configuration-programmatic-usage.md#charger-les-polices-avant-la-mise-en-page), [`createFolioFromDocument`](https://postext.dev/fr/docs/configuration-programmatic-usage.md#un-livre-en-3d-postext-folio), [`renderPageToCanvas`](https://postext.dev/fr/docs/configuration-programmatic-usage.md#rendre-une-page-en-bitmap)

**Caractères**

- Source Serif 4 (OFL-1.1), Outfit (OFL-1.1)

## Préparation

### 1 · Nommer les champs d’après la configuration

```js
// script.js, lignes 72–86
const form = document.getElementById('controls');
const hex = (value) => ({ hex: value, model: 'hex' });
function folioOf() { // 'paper.grammage' → { paper: { grammage } }, typed by the input
  const folio = {};
  for (const el of form.elements) {
    if (!el.name || el.type === 'button' || el.tagName === 'OUTPUT') continue;
    const value = el.type === 'checkbox' ? el.checked : el.type === 'range' ? Number(el.value)
      : el.type === 'color' ? hex(el.value) : el.value;
    const [group, key] = el.name.split('.');
    if (key) (folio[group] ??= {})[key] = value;
    else folio[group] = value;
  }
  return folio;
}
const show = (name, value) => { form.elements[name].value = value; };
```

Chaque champ du formulaire porte le nom de son chemin dans `config.folio` (`paper.grammage`, `binding.cover`, `lighting.environment`) : une seule boucle transforme le formulaire en l’objet que prend la visionneuse, avec des nombres pour les curseurs, des booléens pour les cases à cocher et une couleur `{ hex, model }` pour le sélecteur. Ce même objet est la `config.folio` du document quand le pen le construit : le Sandbox ouvre donc le livre tel que le formulaire démarre.

### 2 · Des couvertures que la visionneuse tourne comme des plats

```js
// script.js, lignes 40–61
const field = { kind: 'box', id: 'field', style: { backgroundColor: col('brick') },
  placement: { ...at('bleed', 'top-left'), size: { width: 'fill', height: mm(TRIM_H) } } };
const flush = { numbered: false, span: 'page', footer: { elements: [] },
  margins: { top: mm(0), bottom: mm(0), left: mm(0), right: mm(0) } };
const cover = (id, title, extra = {}) => ({ id, ...flush, ...extra, advancedDesign: {
  enabled: true, minHeight: mm(TRIM_H), slot: { elements: [field, ...title] } } });
const headingStyles = [
  cover('cover', [
    text('title', '{titleText}', { fontFamily: SANS, fontWeight: 700, fontSize: pt(40),
      lineHeight: 0.92, color: col('cream') },
    { ...at('page', 'top-left', INNER, 30), size: { width: mm(80) } }),
    text('strap', '{attr.strap}', { fontFamily: 'Source Serif 4', italic: true,
      fontSize: pt(11), lineHeight: 1.3, color: col('cream') },
    { ...at('#title', 'below', 0, 6), size: { width: mm(72) } }),
    text('author', '{author}', caps(7, col('cream')), at('page', 'bottom-left', INNER, -16)),
  ]),
  cover('back', [
    text('strap', '{attr.strap}', { fontFamily: 'Source Serif 4', italic: true,
      fontSize: pt(11), lineHeight: 1.3, color: col('cream'), align: 'center' },
    { ...at('page', 'center', 0, 0), size: { width: mm(76) } }),
  ], { breakBefore: { enabled: true, parity: 'even' } }), // the back: always a verso
];
```

Avec `binding.cover: 'pages'`, la première page est le premier plat et la dernière le second plat, quand elle tombe sur un verso. Le style de titre de la quatrième de couverture passe à une page paire : le livre se termine toujours sur un verso et les deux couvertures tournent. Mettez le formulaire sur *A case round the pages* et les deux mêmes pages tournent comme des feuillets ordinaires dans une couverture toilée.

### 3 · Rhabiller le livre sur place

Le code est [la réponse courte](https://postext.dev/fr/cookbook/folio-settings-bench.md#la-réponse-courte) plus haut. `setAppearance({ folio })` remplace les réglages du document et redessine la scène : épaisseur et rigidité du papier, couverture rigide, textures du bureau et lumière. Les pages gardent leur peinture : un changement apparaît à l’image suivante. Un papier fixe son propre grammage, c’est pourquoi en choisir un déplace le curseur du grammage ; `resetView()` ramène la caméra après que le lecteur a fait tourner le livre en glissant avec le bouton droit.

## 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/folio-settings-bench

### index.html

```html
<section id="bench">
  <div id="folio" role="region" aria-label="The book in 3D"></div>
  <form id="controls" aria-label="Folio settings">
    <fieldset>
      <legend>Paper</legend>
      <label>Stock <select name="paper.type">
        <option value="uncoated">Uncoated</option><option value="bookWove" selected>Book wove</option>
        <option value="coatedMatte">Coated matte</option><option value="coatedSilk">Coated silk</option>
        <option value="coatedGloss">Coated gloss</option><option value="bible">Bible</option>
        <option value="newsprint">Newsprint</option><option value="cardStock">Card</option>
      </select></label>
      <label>Weight <output name="grammage-out">80 g/m²</output>
        <input type="range" name="paper.grammage" min="30" max="300" step="5" value="80"></label>
      <label>Texture <select name="paper.texture">
        <option value="auto" selected>The stock’s</option><option value="smooth">Smooth</option>
        <option value="vellum">Vellum</option><option value="wove">Wove</option>
        <option value="laid">Laid</option><option value="linen">Linen</option>
        <option value="felt">Felt</option>
      </select></label>
      <label class="check"><input type="checkbox" name="paper.showThrough" checked> Show-through</label>
    </fieldset>
    <fieldset>
      <legend>Binding</legend>
      <label>Type <select name="binding.type">
        <option value="hardcover">Hardcover</option><option value="paperback" selected>Paperback</option>
        <option value="sewn">Sewn softcover</option><option value="layflat">Lay-flat</option>
        <option value="saddleStitch">Saddle stitch</option>
      </select></label>
      <label>Covers <select name="binding.cover">
        <option value="pages" selected>The first and last pages</option>
        <option value="case">A case round the pages</option>
      </select></label>
      <label>Material <select name="binding.coverMaterial">
        <option value="auto" selected>The binding’s</option><option value="cloth">Cloth</option>
        <option value="paper">Paper</option><option value="leather">Leather</option>
      </select></label>
      <label>Colour <input type="color" name="binding.coverColor" value="#9a3b2e"></label>
    </fieldset>
    <fieldset>
      <legend>Desk and light</legend>
      <label>Surface <select name="surface.type">
        <option value="oak" selected>Oak</option><option value="walnut">Walnut</option>
        <option value="linen">Linen</option><option value="felt">Felt</option>
        <option value="leather">Leather</option><option value="marble">Marble</option>
        <option value="plain">Plain</option><option value="none">None</option>
      </select></label>
      <label>Light <select name="lighting.environment">
        <option value="studio">Studio</option><option value="daylight" selected>Daylight</option>
        <option value="lamp">Lamp</option><option value="overcast">Overcast</option>
        <option value="night">Night</option>
      </select></label>
      <label>Intensity <output name="intensity-out">1.0</output>
        <input type="range" name="lighting.intensity" min="0.25" max="2" step="0.05" value="1"></label>
      <label class="check"><input type="checkbox" name="lighting.shadows" checked> Shadows</label>
      <label>Tilt <output name="tilt-out">22°</output>
        <input type="range" name="tilt" min="0" max="40" step="1" value="22"></label>
      <button type="button" id="reset-view">Reset view</button>
    </fieldset>
    <pre id="folio-json" aria-label="The folio settings as code"></pre>
  </form>
</section>
<main id="pages"></main>
```

### style.css

```css
/* The bench: the book on the left, the settings on the right, the flat pages below. */
#bench {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px;
  max-width: 1320px; margin: 0 auto; padding: 16px; box-sizing: border-box;
  color: #c9ccd3; font: 13px/1.4 system-ui, sans-serif;
}
#folio { height: min(80vh, 760px); min-height: 420px; }
#controls { display: grid; gap: 12px; align-content: start; }
#controls fieldset {
  display: grid; gap: 8px; margin: 0; padding: 10px 12px 12px;
  border: 1px solid #2a2e36; border-radius: 6px;
}
#controls legend {
  padding: 0 4px; color: #f0b35a; font-weight: 600; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
}
#controls label { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
#controls label > select, #controls label > input[type="range"] { grid-column: 1 / -1; }
#controls label.check { display: flex; gap: 8px; }
#controls select, #controls button {
  min-height: 32px; padding: 4px 8px; border: 1px solid #3a3f49; border-radius: 4px;
  background: #1a1d23; color: #eceef2; font: inherit;
}
#controls input[type="color"] {
  width: 44px; height: 32px; padding: 0; border: 1px solid #3a3f49; border-radius: 4px;
  background: none;
}
#controls input[type="range"] { accent-color: #f0b35a; }
#controls output { color: #8d9199; font-variant-numeric: tabular-nums; }
#controls button { cursor: pointer; }
#controls button:hover, #controls button:focus-visible { border-color: #f0b35a; }
#folio-json {
  margin: 0; padding: 10px 12px; max-height: 220px; overflow: auto; border-radius: 6px;
  background: #15171c; color: #aeb3bd; font: 11.5px/1.45 ui-monospace, Menlo, monospace;
}
@media (max-width: 860px) {
  #bench { grid-template-columns: minmax(0, 1fr); }
  #folio { height: 70vh; }
}
```

### script.js

```js
// ═══ Postext Cookbook · Nº 103 · A bench for the Folio viewer's settings ═══════════════
// https://postext.dev/en/cookbook/folio-settings-bench
// Code: MIT · Text: original (CC BY 4.0) · Pictures: none
// Fonts: Source Serif 4, Outfit (SIL OFL 1.1) · Needs postext ≥ 1.26.0
//
// A pocket book of knots, laid out once and opened in postext-folio next to a form of every
// folio setting: paper, binding, covers, desk, light and tilt. Each change goes to the viewer
// with setAppearance, so the book is redrawn in place and no page is laid out or painted
// again. The settings as code sit under the form, ready to paste into config.folio.
import { buildDocumentWithFonts, renderPageToCanvas } from 'https://esm.sh/postext';
import { createFolioFromDocument } from 'https://esm.sh/postext-folio';

const LANG = 'en'; // @lang: the language of the sample document ('en' | 'es')
const RECIPE = 'folio-settings-bench';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: brick red for the covers and the knot numbers, a warm ink for the text
const palette = {
  ink: '#24211f',
  brick: '#9a3b2e', // the cover field, kickers and folios
  cream: '#f6efe2', // type on the covers
  muted: '#6f6860',
};
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.brick, model: 'hex' } },
];
// #endregion
const [TRIM_W, TRIM_H, TOP, BOTTOM, INNER, OUTER] = [110, 160, 15, 17, 14, 12]; // mm: a pocket
const LEAD = 12.4; // pt
const SANS = 'Outfit';
const at = (to, edge, x = 0, y = 0) => ({ anchor: { to, edge }, offset: { x: mm(x), y: mm(y) } });
const text = (id, content, look, placement) => ({ kind: 'text', id, content, overflow: 'wrap',
  align: 'left', placement, ...look });
const caps = (size, color) => ({ fontFamily: SANS, fontSize: pt(size), fontWeight: 600,
  letterSpacing: pt(size * 0.16), textTransform: 'uppercase', color });

// #region covers: a full-page colour field on page 1 and on the last page
const field = { kind: 'box', id: 'field', style: { backgroundColor: col('brick') },
  placement: { ...at('bleed', 'top-left'), size: { width: 'fill', height: mm(TRIM_H) } } };
const flush = { numbered: false, span: 'page', footer: { elements: [] },
  margins: { top: mm(0), bottom: mm(0), left: mm(0), right: mm(0) } };
const cover = (id, title, extra = {}) => ({ id, ...flush, ...extra, advancedDesign: {
  enabled: true, minHeight: mm(TRIM_H), slot: { elements: [field, ...title] } } });
const headingStyles = [
  cover('cover', [
    text('title', '{titleText}', { fontFamily: SANS, fontWeight: 700, fontSize: pt(40),
      lineHeight: 0.92, color: col('cream') },
    { ...at('page', 'top-left', INNER, 30), size: { width: mm(80) } }),
    text('strap', '{attr.strap}', { fontFamily: 'Source Serif 4', italic: true,
      fontSize: pt(11), lineHeight: 1.3, color: col('cream') },
    { ...at('#title', 'below', 0, 6), size: { width: mm(72) } }),
    text('author', '{author}', caps(7, col('cream')), at('page', 'bottom-left', INNER, -16)),
  ]),
  cover('back', [
    text('strap', '{attr.strap}', { fontFamily: 'Source Serif 4', italic: true,
      fontSize: pt(11), lineHeight: 1.3, color: col('cream'), align: 'center' },
    { ...at('page', 'center', 0, 0), size: { width: mm(76) } }),
  ], { breakBefore: { enabled: true, parity: 'even' } }), // the back: always a verso
];
// #endregion

const opener = { enabled: true, minHeight: mm(22), slot: { elements: [
  text('kicker', '{attr.kicker}', caps(6.8, col('brick')), at('container', 'top-left', 0, 1)),
  text('title', '{titleText}', { fontFamily: SANS, fontWeight: 600, fontSize: pt(19),
    lineHeight: 1, color: col('ink') },
  { ...at('#kicker', 'below', 0, 2), size: { width: 'fill' } }),
] } };

// #region form: the form's fields (index.html) are named by their path in config.folio
const form = document.getElementById('controls');
const hex = (value) => ({ hex: value, model: 'hex' });
function folioOf() { // 'paper.grammage' → { paper: { grammage } }, typed by the input
  const folio = {};
  for (const el of form.elements) {
    if (!el.name || el.type === 'button' || el.tagName === 'OUTPUT') continue;
    const value = el.type === 'checkbox' ? el.checked : el.type === 'range' ? Number(el.value)
      : el.type === 'color' ? hex(el.value) : el.value;
    const [group, key] = el.name.split('.');
    if (key) (folio[group] ??= {})[key] = value;
    else folio[group] = value;
  }
  return folio;
}
const show = (name, value) => { form.elements[name].value = value; };
// #endregion

const config = () => ({
  locale: 'en-us',
  colorPalette,
  page: { sizePreset: 'custom', width: mm(TRIM_W), height: mm(TRIM_H), dpi: 150,
    margins: { top: mm(TOP), bottom: mm(BOTTOM), left: mm(INNER), right: mm(OUTER),
      mirror: true } },
  layout: { layoutType: 'single' },
  bodyText: { fontFamily: 'Source Serif 4', fontSize: pt(9.3), lineHeight: pt(LEAD),
    color: col('ink'), boldColor: col('ink'), italicColor: col('ink'),
    referenceColor: col('ink'), textAlign: 'justify', firstLineIndent: mm(3.5),
    indentAfterHeading: false, hyphenation: { enabled: true }, optimalLineBreaking: true,
    minWordSpacing: 0.75, maxJustifyTracking: 10, // spaces from 0.75×; then 1 % of tracking
    avoidWidows: true, avoidOrphans: true, avoidRunts: true },
  headings: { fontFamily: SANS, color: col('ink'), fontWeight: 600, levels: [
    // A chapter opens on the next page, recto or verso.
    { level: 1, fontSize: pt(19), breakBefore: { enabled: true, parity: 'any' },
      marginBottom: pt(LEAD / 2), advancedDesign: opener },
  ] },
  headingStyles,
  paragraphStyles: [{ id: 'colophon', fontFamily: SANS, fontSize: pt(6.5), lineHeight: pt(9),
    color: col('muted'), textAlign: 'left', firstLineIndent: pt(0), marginTop: pt(LEAD) }],
  header: { elements: [] },
  folio: folioOf(), // the form's starting settings: the document's own look in the Sandbox
  footer: { elements: [text('folio', '{pageNumber}', { ...caps(6.5, col('brick')),
    align: 'center' }, at('page', 'bottom', 0, -9))] },
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "Six Knots"
subtitle: "A pocket book for the boat and the garden"
author: "Ellen Marsh"
---

# Six Knots {style="cover" strap="A pocket book for the boat and the garden"}

# Before you tie {kicker="Introduction"}

A knot is a way of making a rope hold onto something: another rope, a post, a ring, itself. There are thousands of them, and most of us need six. The six in this book will moor a boat, hang a hammock, tie down a load, join two lines and make a loop that will not slip, and every one of them can be untied again, which is half the point of a good knot.

Learn them with a piece of soft rope about an arm’s length long, and tie each one ten times before you move on. Then tie it with your eyes shut. A knot you have to think about will fail you on a cold, wet evening, when the boat is moving and the rope is stiff.

Each knot has a standing part, the long end that takes the load, and a working end, the short end you tie with. When the instructions say *over* and *under*, they mean the working end passing over or under the standing part.

# The reef knot {kicker="Knot 1 · Joining"}

The reef knot joins two ends of the same rope around a bundle: a parcel, a sail rolled on its boom, a bandage. Left over right and under, then right over left and under. If the two ends lie on the same side of the knot, you have tied it correctly; if they lie on opposite sides, you have a granny knot, which jams or slips.

Never use a reef knot to join two different ropes that will take a load. It is a binding knot, not a bend, and under strain it can capsize into two loops that slide apart.

# The bowline {kicker="Knot 2 · Loops"}

The bowline makes a loop at the end of a rope that will neither slip nor jam. Make a small loop in the standing part, with the working end on top. Bring the end up through the loop, round behind the standing part, and back down through the loop. The old way to remember it: the rabbit comes out of the hole, goes round the tree, and goes back down the hole.

A bowline holds a mooring line on a post, a rope round a person’s chest in a rescue, and the corner of a tarpaulin in a gale. However hard it has been pulled, you can break it open again by pushing the collar forward.

# The clove hitch {kicker="Knot 3 · Hitches"}

The clove hitch ties a rope to a post or a rail in a moment. Take two turns round the post, crossing the second over the first, and tuck the end under the second turn. It is quick to tie and quick to adjust, which makes it the knot for fenders on a boat and for the first turn of a lashing.

It can work loose when the pull comes and goes, so on anything that matters add two half hitches round the standing part, or use a round turn instead.

# The figure-eight {kicker="Knot 4 · Stoppers"}

The figure-eight is a stopper: it sits at the end of a rope and stops it running out through a block, a cleat or a hole. Make a loop, pass the end round behind the standing part and down through the loop, and pull it snug. It looks like the number it is named after.

Climbers tie it doubled, as a loop, and every sailor ties it in the ends of the sheets. Unlike a simple overhand knot, it can always be untied, even after a long day under strain.

# The sheet bend {kicker="Knot 5 · Joining"}

The sheet bend joins two ropes, even ropes of different thickness. Make a bight in the thicker rope. Pass the thinner end up through the bight, round behind both its parts, and under itself. For a wet or slippery line, take the end round twice: that is a double sheet bend, and it will not shake loose.

It is the knot for lengthening a line that turned out too short, and for mending a net, where it is tied thousands of times.

# The round turn {kicker="Knot 6 · Hitches"}

A round turn and two half hitches will hold almost anything to a ring or a post, and it can be untied while the rope is under load. Take the working end twice round the post, then make two half hitches round the standing part, each one the same way.

The round turn takes the strain, and the hitches only keep it in place. That is why it is the safest knot for tying a boat to a ring on the quay at the end of the day, and the last one in this book.

# Looking after rope {kicker="Afterword"}

Rope lasts for years if you treat it well. Rinse salt out of it in fresh water after a season on the boat, and dry it loosely coiled in the shade, never in a tight hank in the sun. Sunlight weakens synthetic fibre faster than any load.

Seal the ends before they fray: whip them with waxed twine, or melt a synthetic end in a flame and roll it smooth between wet fingers. A rope that has been crushed, cut or burned along its length belongs in the garden, tying up beans, and no longer on the boat.

Coil it the same way every time, and it will come off the coil without kinks when you need it in a hurry.

:::paragraphs{style="colophon"}
Set in Source Serif 4 and Outfit (SIL Open Font License) · Text: original, CC BY 4.0.
:::

# Six Knots {style="back" strap="Tie them ten times each, then once more in the dark."}
`; // content.<lang>.md, inlined by the Cookbook

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = { 'Source Serif 4': ['400', '400i', '700'], Outfit: ['400', '600', '700'] };

// ─── 4 · Build & show ───────────────────────────────────────────────────────
const doc = await buildDocumentWithFonts({ markdown }, config(), kitFonts(FONTS));
showPages(doc, { title: 'Six Knots · the Folio settings bench' });
// cover: 'pages' needs an even count (gotcha: folio-cover-pages-even); the back's break
// gives it one.
if (doc.pages.length % 2) console.warn(`${doc.pages.length} pages: the back cover is missing`);


// #region answer: one viewer, restyled in place by setAppearance on every change
const book = createFolioFromDocument(document.getElementById('folio'), doc, {
  // The look starts from doc.config.folio; setAppearance replaces it on every change.
  appearance: { textureBaseUrl: 'https://postext.dev/folio/textures' },
  onChange: ({ pages }) => kitStatus(`${doc.pages.length} pages · open at `
    + pages.map((i) => i + 1).join('–')),
});
function update() {
  const folio = folioOf();
  // Only the appearance changes: the pages keep their paintings, nothing is laid out again.
  book.setAppearance({ folio });
  show('grammage-out', `${folio.paper.grammage} g/m²`);
  show('intensity-out', folio.lighting.intensity.toFixed(2));
  show('tilt-out', `${folio.tilt}°`);
  document.getElementById('folio-json').textContent = `folio: ${JSON.stringify(folio, null, 2)}`;
}
form.addEventListener('input', update);
// A stock sets its own weight: picking one moves the weight slider to the stock's.
const WEIGHTS = { uncoated: 90, bookWove: 80, coatedMatte: 115, coatedSilk: 115,
  coatedGloss: 115, bible: 40, newsprint: 48, cardStock: 250 };
form.elements['paper.type'].addEventListener('change', (event) => {
  form.elements['paper.grammage'].value = WEIGHTS[event.target.value];
  update();
});
document.getElementById('reset-view').addEventListener('click', () => book.resetView());
update();
// #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 ───────────────────────────────────────────────────────────────────────
```

## Variantes

### Partir d’un livre cartonné sous toile

Changez les valeurs par défaut du formulaire dans `index.html` ; le document et le Sandbox les suivent.

```diff
-        <option value="hardcover">Hardcover</option><option value="paperback" selected>Paperback</option>
+        <option value="hardcover" selected>Hardcover</option><option value="paperback">Paperback</option>
```

### Un livre dont l’aspect est dans la configuration

[Un livre sur le bureau](https://postext.dev/fr/cookbook/folio-book-on-a-desk.md) écrit les mêmes réglages une seule fois dans `config.folio`, sans formulaire, et [le nuancier de papiers](https://postext.dev/fr/cookbook/paper-swatch-book.md) pose un papier différent sur chaque feuillet.

## Erreurs fréquentes

- **La visionneuse Folio prend la taille de son conteneur.** createFolioFromDocument ajuste le livre à l’élément que vous lui donnez, avec les boutons et le nombre de pages dans ses marges. Un élément sans hauteur (un div vide dans le flux normal) n’affiche rien : donnez-lui une hauteur en CSS.
- **Cover: 'pages' exige un nombre pair de pages pour le plat verso.** Avec binding.cover réglé sur 'pages', la première page se tourne comme le plat recto, et la dernière comme le plat verso seulement si elle tombe sur un verso. Un nombre impair de pages laisse au livre une couverture avant sans dos : complétez-le jusqu’à un nombre pair ou gardez la reliure cartonnée.

## Crédits

- Recette: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Caractères: Source Serif 4 (OFL-1.1), Outfit (OFL-1.1)
- Code: MIT · Contenu d’exemple: CC-BY-4.0

## Recettes liées

- [Nº 100 · Un livre mis en page posé sur le bureau, en 3D](https://postext.dev/fr/cookbook/folio-book-on-a-desk.md): createFolioFromDocument, du paquet postext-folio, ouvre un chapitre mis en page comme un livre relié toile sur un bureau en noyer, habillé par config.folio. · Niveau 2 (Intermédiaire) · Fiction, théâtre et prose littéraire
- [Nº 101 · Un nuancier, chaque feuillet sur son papier](https://postext.dev/fr/cookbook/paper-swatch-book.md): Chaque feuillet d’un catalogue de papetier est un bloc :::paper ; postext-folio le dessine avec la teinte, le grammage, la surface et la rigidité de son papier. · Niveau 2 (Intermédiaire) · Catalogues
- [Nº 040 · Polices de marque : mise en page, PDF et paquet](https://postext.dev/fr/cookbook/brand-fonts-identity-manual.md): La charte d’un métro fictif composée dans les fichiers de police de la marque, téléchargés une fois et repris par la mise en page, le PDF et un paquet .postext. · Niveau 3 (Avancé) · Manuels, guides et ouvrages de référence