# Um zine grampeado com capa de papel cartão

> Dois blocos :::paper põem um cartão salmão na folha externa de um zine de oito páginas, e o postext-folio o mostra grampeado em canoa sobre papel jornal.

- Versão HTML: https://postext.dev/pt/cookbook/saddle-stitched-card-cover
- Receita Nº 102 · Saída e integração · Nível 2 (Intermediário) · Saídas: Canvas, Controles ao vivo
- Gêneros: Revistas e fanzines
- Requer postext ≥ 1.13.4 · testada com 1.19.1 em 2026-10-06
- Páginas: [1](https://postext.dev/cookbook/saddle-stitched-card-cover/en/p01.webp?v=325e882e), [2](https://postext.dev/cookbook/saddle-stitched-card-cover/en/p02.webp?v=325e882e), [3](https://postext.dev/cookbook/saddle-stitched-card-cover/en/p03.webp?v=325e882e), [4](https://postext.dev/cookbook/saddle-stitched-card-cover/en/p04.webp?v=325e882e), [5](https://postext.dev/cookbook/saddle-stitched-card-cover/en/p05.webp?v=325e882e), [6](https://postext.dev/cookbook/saddle-stitched-card-cover/en/p06.webp?v=325e882e), [7](https://postext.dev/cookbook/saddle-stitched-card-cover/en/p07.webp?v=325e882e), [8](https://postext.dev/cookbook/saddle-stitched-card-cover/en/p08.webp?v=325e882e)
- Abrir no Sandbox: https://postext.dev/pt/sandbox#recipe=saddle-stitched-card-cover&lang=en (.postext: https://postext.dev/cookbook/saddle-stitched-card-cover/en/saddle-stitched-card-cover.postext)
- Última atualização: 2026-10-04
- Outros idiomas: [en](https://postext.dev/en/cookbook/saddle-stitched-card-cover.md), [es](https://postext.dev/es/cookbook/saddle-stitched-card-cover.md), [ca](https://postext.dev/ca/cookbook/saddle-stitched-card-cover.md), [zh](https://postext.dev/zh/cookbook/saddle-stitched-card-cover.md), [ja](https://postext.dev/ja/cookbook/saddle-stitched-card-cover.md), [ar](https://postext.dev/ar/cookbook/saddle-stitched-card-cover.md)

## Em poucas palavras

Uma revistinha dobrada sobre um rio, com uma capa grossa e colorida e papel jornal fino por dentro. No visualizador 3D ela fica fechada na mesa e abre como a de verdade.

## O que você vai compor

O número 3 de *Low Tide*, um zine gratuito sobre um estuário: oito páginas de 140 × 200 mm, duas folhas dobradas e grampeadas pela dobra. A folha externa, páginas 1–2 e 7–8, é um cartão salmão; a interna, páginas 3–6, é papel jornal barato. A capa é impressa num único azul de risografia sobre o cartão nu, sem campo de cor próprio, por isso nas páginas planas logo abaixo ela aparece sobre branco, e no Folio fica fechada na mesa, na cor do cartão, até você virá-la. Os dois papéis são dois blocos no Markdown, e o acabamento, três ajustes em `config.folio`.

**Esta receita responde a:**

- Como faço para imprimir uma capa, um encarte ou um caderno de pranchas num papel diferente do resto do livro?
- Como visualizo a encadernação, a capa, o papel e a iluminação de um livro antes de mandá-lo para a gráfica?

## A resposta curta

```js
// script.js, linhas 235–246
const stage = document.createElement('section');
stage.id = 'folio';
stage.ariaLabel = 'The zine in 3D';
stage.style.cssText = 'height: min(78vh, 720px); margin: 0 auto; max-width: 1280px';
document.getElementById('pages').before(stage);
// Covers from the pages need an even count: page 8 must fall on a verso to be the back.
if (doc.pages.length % 2) console.warn(`${doc.pages.length} pages: the back cover is missing`);
createFolioFromDocument(stage, doc, {
  appearance: { textureBaseUrl: 'https://postext.dev/folio/textures' },
  onChange: ({ pages }) => kitStatus(pages.map((i) => `p. ${i + 1} on `
    + (doc.pages[i].paper ? 'card' : 'newsprint')).join(' · ')),
});
```

## Ingredientes

**Ensina**

- [Outro papel para uma sequência de páginas](https://postext.dev/pt/docs/document-format.md#paper): Um contêiner :::paper imprime as páginas que contém em um papel próprio: um caderno de pranchas em couché brilho, uma capa em cartão, algumas folhas coloridas.
- [Papel, encadernação, mesa e luz (Folio)](https://postext.dev/pt/docs/configuration.md#visualizador-folio-configuração): config.folio diz como o livro em 3D é feito e iluminado: o tipo de papel e a gramatura, a encadernação e as capas, a superfície embaixo dele e a luz.

**Também usa**

- [Visualizador de livro em 3D (Folio)](https://postext.dev/pt/docs/configuration.md#um-livro-em-3d-postext-folio)
- [Estilos de título](https://postext.dev/pt/docs/configuration.md#estilos-de-título)
- [Aberturas desenhadas](https://postext.dev/pt/docs/configuration.md#largura-e-design-avançado)
- [Atributos de título](https://postext.dev/pt/docs/document-format.md#atributos-de-título)
- [Textos, fios e caixas nos designs de página](https://postext.dev/pt/docs/configuration.md#cabeços-e-rodapés)
- [Estilos de parágrafo](https://postext.dev/pt/docs/configuration.md#estilos-de-parágrafo)
- [Cabeços por tipo de página](https://postext.dev/pt/docs/configuration.md#elementos-de-texto)
- [Paleta de cores semântica](https://postext.dev/pt/docs/configuration.md#paleta-de-cores)
- [Margens espelhadas](https://postext.dev/pt/docs/configuration.md#margens-espelhadas)
- [Páginas em um canvas](https://postext.dev/pt/docs/configuration.md#renderizar-uma-página-como-bitmap)
- [Geometria por seção](https://postext.dev/pt/docs/configuration.md#estilos-de-título)
- [Cabeços por seção](https://postext.dev/pt/docs/configuration.md#estilos-de-título)
- [Capítulos sem número](https://postext.dev/pt/docs/configuration.md#estilos-de-título)

**A configuração em resumo**

- [`bodyText`](https://postext.dev/pt/docs/configuration.md#texto-do-corpo), [`colorPalette`](https://postext.dev/pt/docs/configuration.md#paleta-de-cores), `folio`, [`footer`](https://postext.dev/pt/docs/configuration.md#cabeços-e-rodapés), [`header`](https://postext.dev/pt/docs/configuration.md#cabeços-e-rodapés), [`headingStyles`](https://postext.dev/pt/docs/configuration.md#estilos-de-título), [`headings`](https://postext.dev/pt/docs/configuration.md#títulos), [`layout`](https://postext.dev/pt/docs/configuration.md#diagramação), [`locale`](https://postext.dev/pt/docs/configuration.md#hifenização), [`page`](https://postext.dev/pt/docs/configuration.md#página), [`paragraphStyles`](https://postext.dev/pt/docs/configuration.md#estilos-de-parágrafo)

**API**

- [`buildDocument`](https://postext.dev/pt/docs/configuration.md#compilar-um-documento), [`clearMeasurementCache`](https://postext.dev/pt/docs/configuration.md#cache-de-medidas), [`createFolioFromDocument`](https://postext.dev/pt/docs/configuration.md#um-livro-em-3d-postext-folio), [`renderPageToCanvas`](https://postext.dev/pt/docs/configuration.md#renderizar-uma-página-como-bitmap)

**Tipos**

- Newsreader (OFL-1.1), Bricolage Grotesque (OFL-1.1)

## Preparo

### 1 · Cerque a folha externa

```js
// script.js, linhas 137–220
// :::paper{type=cardStock grammage=250 shade=#f2c9b4}   pages 1–2: the front of the sheet
// # Low Tide {style="cover" …}   # In this issue {…}
// :::
// # The dunlin come back …   pages 3–6, outside any fence: folio.paper, the newsprint
// :::paper{type=cardStock grammage=250 shade=#f2c9b4}   pages 7–8: the back of the sheet
// # Join us {…}   # Low Tide {style="back" …}
// :::
const markdown = String.raw`---
title: "Low Tide"
subtitle: "A zine about the estuary"
author: "The Pill Estuary Group"
publishDate: "Issue 3 · Winter 2026"
---

:::paper{type=cardStock grammage=250 shade=#f2c9b4}

# Low Tide {style="cover" issue="Issue 3 · Winter 2026" strap="Mud, birds, boats and the people who watch them"}

# In this issue {style="feature" kicker="Welcome"}

Low Tide is made twice a year by the people who walk the river path at Pill. It is printed on the cheapest paper the printer has, folded by hand at the sailing club, and left in the pub, the post office and the bird hide. Take one. Leave it for somebody else when you have read it.

This winter we follow the dunlin that come back to the mud every October, talk to the last man in the village who still builds wooden boats, and print a tide table for the months when the light goes early. The cover is a heavier card than the pages inside it, so it survives a pocket and a little rain.

:::paragraphs{style="credits"}
**Edited by** Joan Avery and Sam Okonjo · **Drawings** Priya Lal · **Printed** in an edition of 400 copies, two sheets folded and stapled.
:::

:::

# The dunlin come back {style="feature" kicker="Birds"}

They arrive in the second week of October, a few dozen at first and then, within days, a thousand or more, feeding along the tideline in a moving grey band. Dunlin are small, about the size of a starling, with a long bill that droops at the tip. In winter they lose the black belly of their breeding plumage and turn the colour of the mud they feed on, which is why most people who walk the path never notice them until they lift.

When they lift, everybody notices. A flock of dunlin in the air turns as one bird: grey as it banks away from you, white as it turns back and shows its underside. On a clear afternoon at the top of the tide, when the mud is covered and the birds have nowhere left to feed, the flock rises off the saltmarsh and turns over the water for minutes at a time, flashing like a shoal of fish.

They come from the Arctic: from the tundra of northern Russia and Scandinavia, where they breed in the short summer and leave as soon as the young can fly. A dunlin ringed on the mud below the church in 2019 was caught again the following summer on the Taymyr Peninsula, five thousand kilometres away, and back on the same stretch of mud the October after.

Joan has counted them every Sunday morning for eleven winters. Her highest count was 4,200, in January 2021, after a week of frost on the moors drove birds down from the reservoirs. Her lowest was 380. She does not know why the numbers swing so much from year to year, and nor, she says, does anybody else.

## How to see them

Come two hours before high water and stand on the slipway by the sailing club. As the tide pushes in, the birds are driven up the mud towards you, closer and closer, until they give up and fly. Bring binoculars, and keep dogs on a lead below the hide: a bird that is flushed off the mud in winter spends energy it cannot afford.

# The last boatbuilder {style="feature" kicker="People"}

Dennis Harcombe built his first boat at fourteen, in his father's shed on Marine Parade, and his last one at seventy-eight. He reckons there were forty in between, give or take, most of them clinker-built dinghies of larch on oak, the kind every family on the river once kept at the bottom of the garden.

“The trick of it,” he says, “is that you never fight the wood. You look at a plank and you see which way it wants to bend, and you let it.” He still steams planks in a length of drainpipe over a camping stove, though these days only to repair other people's boats.

His shed is the last on the river where you can buy a pair of oars made to measure. He makes them from ash, shaves the looms by hand and charges what he charged in 1990, because, he says, the price was fair then and the oars have not got any better.

When he talks about the river he talks about the mud first: where it shifts, where the channel has moved since he was a boy, where a boat can sit out a tide and where it will be swallowed to the thwarts. He has watched the estuary change for seventy years and does not think it is finished.

# Tide table {style="feature" kicker="December to February"}

High water at Pill, in local time. Add about twenty minutes for the tide to reach the slipway at the sailing club. Spring tides, the biggest of the month, are marked in bold: on those days the mud below the hide is covered completely.

:::paragraphs{style="tides"}
**Sun 6 Dec** 07:42 and 20:05 · **Sat 12 Dec** 12:18 · **Sun 20 Dec** 06:55 and 19:20

**Sun 3 Jan** 06:31 and 18:54 · **Sat 9 Jan** 11:47 · **Sun 17 Jan** 06:10 and 18:36

**Sun 31 Jan** 05:58 and 18:22 · **Sat 6 Feb** 10:59 · **Sun 14 Feb** 05:37 and 18:01
:::

Times are for a still day. A strong westerly holds the water up and brings high tide a little early; a long dry spell on the moors does the opposite. If you are walking out on the mud, go on a falling tide and come back with an hour to spare.

:::paper{type=cardStock grammage=250 shade=#f2c9b4}

# Join us {style="back-matter" kicker="The group"}

We walk the river path on the first Sunday of every month, meeting at the sailing club at ten. Nobody needs to know anything about birds, boats or tides; most of us didn't when we started. Bring boots.

The next issue comes out in June. If you have something to say about the estuary, a drawing, a memory or a count of anything at all, leave it in the box behind the bar at the Duke of Cornwall, or write to us at the sailing club.

:::paragraphs{style="credits"}
Set in Newsreader and Bricolage Grotesque (SIL Open Font License) · Text: original, CC BY 4.0 · The Pill Estuary Group and the people in this issue are fictional.
:::

# Low Tide {style="back" strap="Free · take one, leave one"}

:::
`; // content.<lang>.md, inlined by the Cookbook
```

Um livreto grampeado em canoa é uma pilha de folhas dobradas, então a folha de capa leva as duas primeiras e as duas últimas páginas. Um bloco cerca as páginas 1–2, outro as 7–8, e as páginas do meio ficam fora dos dois, no papel do próprio livro. Cada bloco começa e termina numa página nova, que aqui é justamente a página de que a capa e as boas-vindas precisam.

### 2 · Papel jornal, grampo canoa, capas tiradas das páginas

```js
// script.js, linhas 40–49
const folio = {
  tilt: 20,
  // The book's paper: every page outside a :::paper fence, the inner sheet here.
  paper: { type: 'newsprint', grammage: 52 },
  // cover: 'pages' turns page 1 as the front and page 8 (a verso) as the back; on a saddle
  // stitch the cover is a sheet like the others, only heavier (gotcha: folio-cover-pages-even).
  binding: { type: 'saddleStitch', cover: 'pages' },
  surface: { type: 'plain', color: col('ink') },
  lighting: { environment: 'overcast', intensity: 1.1 },
};
```

`folio.paper` é o papel jornal de toda página fora de um bloco. `saddleStitch` dobra as folhas em volta dos grampos, sem lombada plana, e `cover: 'pages'` faz as páginas 1 e 8 virarem como capas. No grampo canoa a capa vira como as outras folhas, só que mais rígida, e uma folha de capa que indica o seu próprio papel (o cartão) é desenhada nesse papel.

### 3 · Uma capa a uma cor

```js
// script.js, linhas 53–86
// Eleven tide lines of a seeded length: blue rules across the foot of the cover.
let seed = 0x71de; // Mulberry32: the same lines on every run
const random = () => {
  seed = (seed + 0x6d2b79f5) | 0;
  let x = Math.imul(seed ^ (seed >>> 15), 1 | seed);
  x = (x + Math.imul(x ^ (x >>> 7), 61 | x)) ^ x;
  return ((x ^ (x >>> 14)) >>> 0) / 4294967296;
};
const tideLines = Array.from({ length: 11 }, (_, i) => ({ kind: 'rule', id: `tide-${i}`,
  direction: 'horizontal', thickness: pt(2.2 + i * 0.5), color: col('blue'),
  placement: { ...at('page', 'top-left', 10 + random() * 40, 128 + i * 5.2),
    size: { width: mm(50 + random() * 70) } } }));
const flush = { span: 'page', margins: { top: mm(0), bottom: mm(0), left: mm(0), right: mm(0) },
  footer: { elements: [] } }; // no folio on either cover (the style lasts one page)
const cover = { ...flush, id: 'cover', numbered: false, advancedDesign: { enabled: true,
  minHeight: mm(TRIM_H), slot: { elements: [
    text('issue', '{attr.issue}', caps(7.5), at('page', 'top-left', INNER, 16)),
    text('title', '{titleText}', { fontFamily: SANS, fontWeight: 800, fontSize: pt(70),
      lineHeight: 0.86, letterSpacing: pt(-2), color: col('blue') },
    { ...at('#issue', 'below', -1, 8), size: { width: mm(TRIM_W - INNER - OUTER) } }),
    text('strap', '{attr.strap}', { fontFamily: 'Newsreader', italic: true, fontSize: pt(13),
      lineHeight: 1.25, color: col('ink') },
    { ...at('#title', 'below', 1, 6), size: { width: mm(100) } }),
    ...tideLines,
  ] } } };
const back = { ...flush, id: 'back', numbered: false,
  breakBefore: { enabled: true, parity: 'even' }, advancedDesign: { enabled: true,
    minHeight: mm(TRIM_H), slot: { elements: [
      text('title', '{titleText}', { fontFamily: SANS, fontWeight: 800, fontSize: pt(26),
        letterSpacing: pt(-0.5), color: col('blue'), align: 'center' },
      { ...at('page', 'center', 0, -6), size: { width: mm(100) } }),
      text('strap', '{attr.strap}', { ...caps(7, col('ink')), align: 'center' },
        { ...at('#title', 'below', 0, 3), size: { width: mm(100) } }),
    ] } } };
```

A capa é um estilo de título com margens zero e um design de página inteira: a linha da edição, o título em Bricolage Grotesque de 70 pt, o subtítulo em Newsreader itálico e onze linhas de maré cujos comprimentos saem de um gerador com semente, de modo que toda execução desenha as mesmas. Nada pinta o fundo da página: quem dá a cor é o cartão.

### 4 · Uma abertura para cada matéria

```js
// script.js, linhas 90–100
const feature = (id) => ({ id, numbered: false, breakBefore: { enabled: true, parity: 'any' },
  marginBottom: pt(LEAD), advancedDesign: { enabled: true, minHeight: mm(30), slot: {
    elements: [
      text('kicker', '{attr.kicker}', caps(7.5), at('container', 'top-left', 0, 1)),
      text('title', '{titleText}', { fontFamily: SANS, fontWeight: 800, fontSize: pt(25),
        lineHeight: 0.98, letterSpacing: pt(-0.4), color: col('ink') },
      { ...at('#kicker', 'below', 0, 2.5), size: { width: 'fill' } }),
      { kind: 'rule', id: 'rule', direction: 'horizontal', thickness: pt(2.5), color: col('blue'),
        placement: { ...at('#title', 'below', 0, 4), size: { width: mm(14) } } },
    ] } } });
const headingStyles = [cover, back, feature('feature'), feature('back-matter')];
```

Cada matéria é um título de nível 1 no estilo `feature`: página nova, um chapéu tirado dos atributos, o título e um fio azul curto. Passar as cinco matérias por um só estilo mantém o miolo do zine em duas famílias e uma cor de destaque.

### 5 · Abra-o grampeado

O código é [a resposta curta](https://postext.dev/pt/cookbook/saddle-stitched-card-cover.md#a-resposta-curta) lá em cima. `createFolioFromDocument` lê o acabamento e as capas de `doc.config.folio`, e o papel de cada folha de `page.paper`. O pen avisa quando o número de páginas é ímpar, porque a página 8 só pode ser a quarta capa se cair numa página par.

## A receita completa

Um único arquivo, composto a partir da pasta da receita com o texto de exemplo e o kit comum das Receitas já incluídos; ele monta a própria página. Para executá-lo, coloque-o em um `<script type="module">` de uma página vazia ou cole-o no painel JS de um pen novo do CodePen (como módulo). Ele importa o postext do esm.sh, então não há nada para instalar nem compilar.

- Pasta da receita: https://github.com/drnachio/postext/tree/main/cookbook/saddle-stitched-card-cover

### script.js

```js
// ═══ Postext Cookbook · Nº 102 · A stapled zine with a card cover sheet ═══════════════
// https://postext.dev/en/cookbook/saddle-stitched-card-cover
// Code: MIT · Text: original (CC BY 4.0) · Pictures: drawn in code
// Fonts: Newsreader, Bricolage Grotesque (SIL OFL 1.1) · Needs postext ≥ 1.13.4
//
// Eight pages, two sheets folded and stapled through the fold. The outer sheet (pages 1–2 and
// 7–8) is salmon card, the inner sheet newsprint: two :::paper fences put the card on the
// cover pages, and postext-folio draws the book saddle-stitched, closed until you turn the
// cover. The flat pages below print on white: only the 3D book knows about paper.
import { buildDocument, renderPageToCanvas, clearMeasurementCache } 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 = 'saddle-stitched-card-cover';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: two inks of a risograph, and the greys of the newsprint text
const palette = {
  ink: '#1f2124', // the text
  blue: '#0b6fb3', // the riso blue: titles, the tide lines, kickers
  muted: '#5d6066', // credits and folios
  rule: '#b9bcc0',
};
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.blue, model: 'hex' } },
];
// #endregion
const [TRIM_W, TRIM_H, TOP, BOTTOM, INNER, OUTER] = [140, 200, 20, 22, 17, 15]; // mm
const LEAD = 13.6; // pt
const SANS = 'Bricolage Grotesque';
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 = col('blue')) => ({ fontFamily: SANS, fontSize: pt(size),
  fontWeight: 700, letterSpacing: pt(size * 0.18), textTransform: 'uppercase', color });

// #region folio: newsprint inside, stapled through the fold, covers taken from the pages
const folio = {
  tilt: 20,
  // The book's paper: every page outside a :::paper fence, the inner sheet here.
  paper: { type: 'newsprint', grammage: 52 },
  // cover: 'pages' turns page 1 as the front and page 8 (a verso) as the back; on a saddle
  // stitch the cover is a sheet like the others, only heavier (gotcha: folio-cover-pages-even).
  binding: { type: 'saddleStitch', cover: 'pages' },
  surface: { type: 'plain', color: col('ink') },
  lighting: { environment: 'overcast', intensity: 1.1 },
};
// #endregion

// #region covers: big type and tide lines on the page; the card colour comes from the paper
// Eleven tide lines of a seeded length: blue rules across the foot of the cover.
let seed = 0x71de; // Mulberry32: the same lines on every run
const random = () => {
  seed = (seed + 0x6d2b79f5) | 0;
  let x = Math.imul(seed ^ (seed >>> 15), 1 | seed);
  x = (x + Math.imul(x ^ (x >>> 7), 61 | x)) ^ x;
  return ((x ^ (x >>> 14)) >>> 0) / 4294967296;
};
const tideLines = Array.from({ length: 11 }, (_, i) => ({ kind: 'rule', id: `tide-${i}`,
  direction: 'horizontal', thickness: pt(2.2 + i * 0.5), color: col('blue'),
  placement: { ...at('page', 'top-left', 10 + random() * 40, 128 + i * 5.2),
    size: { width: mm(50 + random() * 70) } } }));
const flush = { span: 'page', margins: { top: mm(0), bottom: mm(0), left: mm(0), right: mm(0) },
  footer: { elements: [] } }; // no folio on either cover (the style lasts one page)
const cover = { ...flush, id: 'cover', numbered: false, advancedDesign: { enabled: true,
  minHeight: mm(TRIM_H), slot: { elements: [
    text('issue', '{attr.issue}', caps(7.5), at('page', 'top-left', INNER, 16)),
    text('title', '{titleText}', { fontFamily: SANS, fontWeight: 800, fontSize: pt(70),
      lineHeight: 0.86, letterSpacing: pt(-2), color: col('blue') },
    { ...at('#issue', 'below', -1, 8), size: { width: mm(TRIM_W - INNER - OUTER) } }),
    text('strap', '{attr.strap}', { fontFamily: 'Newsreader', italic: true, fontSize: pt(13),
      lineHeight: 1.25, color: col('ink') },
    { ...at('#title', 'below', 1, 6), size: { width: mm(100) } }),
    ...tideLines,
  ] } } };
const back = { ...flush, id: 'back', numbered: false,
  breakBefore: { enabled: true, parity: 'even' }, advancedDesign: { enabled: true,
    minHeight: mm(TRIM_H), slot: { elements: [
      text('title', '{titleText}', { fontFamily: SANS, fontWeight: 800, fontSize: pt(26),
        letterSpacing: pt(-0.5), color: col('blue'), align: 'center' },
      { ...at('page', 'center', 0, -6), size: { width: mm(100) } }),
      text('strap', '{attr.strap}', { ...caps(7, col('ink')), align: 'center' },
        { ...at('#title', 'below', 0, 3), size: { width: mm(100) } }),
    ] } } };
// #endregion

// #region features: every piece opens a page with a kicker and a title in the riso blue
const feature = (id) => ({ id, numbered: false, breakBefore: { enabled: true, parity: 'any' },
  marginBottom: pt(LEAD), advancedDesign: { enabled: true, minHeight: mm(30), slot: {
    elements: [
      text('kicker', '{attr.kicker}', caps(7.5), at('container', 'top-left', 0, 1)),
      text('title', '{titleText}', { fontFamily: SANS, fontWeight: 800, fontSize: pt(25),
        lineHeight: 0.98, letterSpacing: pt(-0.4), color: col('ink') },
      { ...at('#kicker', 'below', 0, 2.5), size: { width: 'fill' } }),
      { kind: 'rule', id: 'rule', direction: 'horizontal', thickness: pt(2.5), color: col('blue'),
        placement: { ...at('#title', 'below', 0, 4), size: { width: mm(14) } } },
    ] } } });
const headingStyles = [cover, back, feature('feature'), feature('back-matter')];
// #endregion

const config = () => ({ // a factory: the engine caches resolved configs per object
  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: 'Newsreader', fontSize: pt(10), lineHeight: pt(LEAD),
    color: col('ink'), boldColor: col('ink'), italicColor: col('ink'),
    referenceColor: col('ink'), textAlign: 'justify', firstLineIndent: mm(4),
    indentAfterHeading: false, hyphenation: { enabled: true }, optimalLineBreaking: true,
    avoidWidows: true, avoidOrphans: true, avoidRunts: true },
  headings: { fontFamily: SANS, color: col('ink'), fontWeight: 800, levels: [
    // Restated: any headings object drops the H1 break (gotcha: headings-drop-h1-break).
    { level: 1, fontSize: pt(25), breakBefore: { enabled: true, parity: 'any' } },
    { level: 2, fontSize: pt(10), lineHeight: pt(LEAD), fontWeight: 700, color: col('blue'),
      marginTop: pt(LEAD), marginBottom: pt(0) },
  ] },
  headingStyles,
  paragraphStyles: [
    { id: 'credits', fontFamily: SANS, fontSize: pt(7.4), lineHeight: pt(10.4),
      color: col('muted'), boldColor: col('blue'), textAlign: 'left', firstLineIndent: pt(0),
      marginTop: pt(LEAD) },
    { id: 'tides', fontFamily: SANS, fontSize: pt(8.6), lineHeight: pt(LEAD),
      boldColor: col('blue'), textAlign: 'left', firstLineIndent: pt(0) },
  ],
  header: { elements: [] },
  footer: { elements: [text('folio', '{pageNumber}   {title} · {publishDate}', { ...caps(6.5,
    col('muted')), align: 'center' }, at('page', 'bottom', 0, -11))] },
  folio,
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
// #region cover-sheet: the outer sheet's four pages in card, the inner sheet on newsprint
// :::paper{type=cardStock grammage=250 shade=#f2c9b4}   pages 1–2: the front of the sheet
// # Low Tide {style="cover" …}   # In this issue {…}
// :::
// # The dunlin come back …   pages 3–6, outside any fence: folio.paper, the newsprint
// :::paper{type=cardStock grammage=250 shade=#f2c9b4}   pages 7–8: the back of the sheet
// # Join us {…}   # Low Tide {style="back" …}
// :::
const markdown = String.raw`---
title: "Low Tide"
subtitle: "A zine about the estuary"
author: "The Pill Estuary Group"
publishDate: "Issue 3 · Winter 2026"
---

:::paper{type=cardStock grammage=250 shade=#f2c9b4}

# Low Tide {style="cover" issue="Issue 3 · Winter 2026" strap="Mud, birds, boats and the people who watch them"}

# In this issue {style="feature" kicker="Welcome"}

Low Tide is made twice a year by the people who walk the river path at Pill. It is printed on the cheapest paper the printer has, folded by hand at the sailing club, and left in the pub, the post office and the bird hide. Take one. Leave it for somebody else when you have read it.

This winter we follow the dunlin that come back to the mud every October, talk to the last man in the village who still builds wooden boats, and print a tide table for the months when the light goes early. The cover is a heavier card than the pages inside it, so it survives a pocket and a little rain.

:::paragraphs{style="credits"}
**Edited by** Joan Avery and Sam Okonjo · **Drawings** Priya Lal · **Printed** in an edition of 400 copies, two sheets folded and stapled.
:::

:::

# The dunlin come back {style="feature" kicker="Birds"}

They arrive in the second week of October, a few dozen at first and then, within days, a thousand or more, feeding along the tideline in a moving grey band. Dunlin are small, about the size of a starling, with a long bill that droops at the tip. In winter they lose the black belly of their breeding plumage and turn the colour of the mud they feed on, which is why most people who walk the path never notice them until they lift.

When they lift, everybody notices. A flock of dunlin in the air turns as one bird: grey as it banks away from you, white as it turns back and shows its underside. On a clear afternoon at the top of the tide, when the mud is covered and the birds have nowhere left to feed, the flock rises off the saltmarsh and turns over the water for minutes at a time, flashing like a shoal of fish.

They come from the Arctic: from the tundra of northern Russia and Scandinavia, where they breed in the short summer and leave as soon as the young can fly. A dunlin ringed on the mud below the church in 2019 was caught again the following summer on the Taymyr Peninsula, five thousand kilometres away, and back on the same stretch of mud the October after.

Joan has counted them every Sunday morning for eleven winters. Her highest count was 4,200, in January 2021, after a week of frost on the moors drove birds down from the reservoirs. Her lowest was 380. She does not know why the numbers swing so much from year to year, and nor, she says, does anybody else.

## How to see them

Come two hours before high water and stand on the slipway by the sailing club. As the tide pushes in, the birds are driven up the mud towards you, closer and closer, until they give up and fly. Bring binoculars, and keep dogs on a lead below the hide: a bird that is flushed off the mud in winter spends energy it cannot afford.

# The last boatbuilder {style="feature" kicker="People"}

Dennis Harcombe built his first boat at fourteen, in his father's shed on Marine Parade, and his last one at seventy-eight. He reckons there were forty in between, give or take, most of them clinker-built dinghies of larch on oak, the kind every family on the river once kept at the bottom of the garden.

“The trick of it,” he says, “is that you never fight the wood. You look at a plank and you see which way it wants to bend, and you let it.” He still steams planks in a length of drainpipe over a camping stove, though these days only to repair other people's boats.

His shed is the last on the river where you can buy a pair of oars made to measure. He makes them from ash, shaves the looms by hand and charges what he charged in 1990, because, he says, the price was fair then and the oars have not got any better.

When he talks about the river he talks about the mud first: where it shifts, where the channel has moved since he was a boy, where a boat can sit out a tide and where it will be swallowed to the thwarts. He has watched the estuary change for seventy years and does not think it is finished.

# Tide table {style="feature" kicker="December to February"}

High water at Pill, in local time. Add about twenty minutes for the tide to reach the slipway at the sailing club. Spring tides, the biggest of the month, are marked in bold: on those days the mud below the hide is covered completely.

:::paragraphs{style="tides"}
**Sun 6 Dec** 07:42 and 20:05 · **Sat 12 Dec** 12:18 · **Sun 20 Dec** 06:55 and 19:20

**Sun 3 Jan** 06:31 and 18:54 · **Sat 9 Jan** 11:47 · **Sun 17 Jan** 06:10 and 18:36

**Sun 31 Jan** 05:58 and 18:22 · **Sat 6 Feb** 10:59 · **Sun 14 Feb** 05:37 and 18:01
:::

Times are for a still day. A strong westerly holds the water up and brings high tide a little early; a long dry spell on the moors does the opposite. If you are walking out on the mud, go on a falling tide and come back with an hour to spare.

:::paper{type=cardStock grammage=250 shade=#f2c9b4}

# Join us {style="back-matter" kicker="The group"}

We walk the river path on the first Sunday of every month, meeting at the sailing club at ten. Nobody needs to know anything about birds, boats or tides; most of us didn't when we started. Bring boots.

The next issue comes out in June. If you have something to say about the estuary, a drawing, a memory or a count of anything at all, leave it in the box behind the bar at the Duke of Cornwall, or write to us at the sailing club.

:::paragraphs{style="credits"}
Set in Newsreader and Bricolage Grotesque (SIL Open Font License) · Text: original, CC BY 4.0 · The Pill Estuary Group and the people in this issue are fictional.
:::

# Low Tide {style="back" strap="Free · take one, leave one"}

:::
`; // content.<lang>.md, inlined by the Cookbook
// #endregion

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = {
  Newsreader: ['400', '400i', '700'],
  'Bricolage Grotesque': ['400', '700', '800'],
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
await loadFonts(FONTS, markdown);
const doc = await buildWithFonts(() => buildDocument({ markdown }, config()), markdown);
showPages(doc, { title: 'Low Tide · a stapled zine in Folio' });

// #region answer: the zine as a stapled booklet, closed on the desk until the cover turns
const stage = document.createElement('section');
stage.id = 'folio';
stage.ariaLabel = 'The zine in 3D';
stage.style.cssText = 'height: min(78vh, 720px); margin: 0 auto; max-width: 1280px';
document.getElementById('pages').before(stage);
// Covers from the pages need an even count: page 8 must fall on a verso to be the back.
if (doc.pages.length % 2) console.warn(`${doc.pages.length} pages: the back cover is missing`);
createFolioFromDocument(stage, doc, {
  appearance: { textureBaseUrl: 'https://postext.dev/folio/textures' },
  onChange: ({ pages }) => kitStatus(pages.map((i) => `p. ${i + 1} on `
    + (doc.pages[i].paper ? 'card' : 'newsprint')).join(' · ')),
});
// #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 v2 ── the same in every recipe · postext.dev/cookbook
// Postext measures with the loaded faces and caches the widths: load every face
// before the first build, from Fontsource, the files the PDF embeds too.

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

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

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

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

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

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

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

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

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

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

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

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

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

## Variações

### Uma capa mais pesada e branca

Mude os dois blocos e a folha de capa vira um cartão branco de 300 g; as páginas internas continuam em papel jornal.

```diff
-:::paper{type=cardStock grammage=250 shade=#f2c9b4}
+:::paper{type=cardStock grammage=300 shade=#fbfaf6}
```

### Um livreto simples

Deixe os blocos de fora e a capa é uma folha do mesmo papel jornal das páginas, um pouco mais pesada. [O mostruário de papéis](https://postext.dev/pt/cookbook/paper-swatch-book.md) vai no sentido contrário e dá a cada folha o seu próprio papel.

## Erros comuns

- **Cover: 'pages' precisa de um número par de páginas para a capa traseira.** Com binding.cover em 'pages', a primeira página vira como capa da frente, e a última vira como capa traseira só quando cai em uma página par. Com um número ímpar de páginas, o livro fica com capa da frente e sem capa traseira: complete até um número par ou mantenha a capa dura.
- **Um trecho em outro papel começa e termina em página nova, e a folha usa o papel da sua frente.** O texto dentro de :::paper começa em página nova, e o texto que vem depois também. Uma folha tem duas páginas e um só papel, o da sua frente, então um trecho que começa em uma página par imprime essa página no papel da folha que ela compartilha. Coloque uma quebra de página onde um trecho deve começar em página ímpar.
- **O visualizador Folio assume o tamanho do seu contêiner.** createFolioFromDocument encaixa o livro no elemento que você passa, com os botões e o contador de páginas nas margens. Um elemento sem altura (um div vazio no fluxo normal) não mostra nada: defina uma altura para ele em CSS.
- **Carregue todas as fontes antes do layout.** O motor de layout mede o texto com as fontes que o navegador carregou e guarda as larguras em cache, então uma fonte que chega depois da primeira composição deixa quebras de linha erradas e um PDF que não corresponde mais à tela. Carregue antes todos os pesos e estilos e chame clearMeasurementCache() antes de recompor quando alguma chegar atrasada.
- **A configuração fica em cache pela identidade: crie um objeto novo.** O motor guarda em cache as configurações resolvidas pela identidade do objeto, então alterar uma configuração no próprio objeto e compor de novo reaproveita o resultado antigo. Crie um objeto novo a cada composição; por isso a configuração de uma receita é uma função, config().

## Créditos

- Receita: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Imagens: The tide lines on the cover, drawn in code: Ignacio Ferro, CC-BY-4.0
- Tipos: Newsreader (OFL-1.1), Bricolage Grotesque (OFL-1.1)
- Código: MIT · Conteúdo de exemplo: CC-BY-4.0

## Relacionadas

- [Nº 100 · Um livro diagramado sobre a mesa, em 3D](https://postext.dev/pt/cookbook/folio-book-on-a-desk.md): createFolioFromDocument, do pacote postext-folio, abre um capítulo diagramado como um livro em tecido sobre uma mesa de nogueira, conforme config.folio. · Nível 2 (Intermediário) · Ficção, teatro e prosa literária
- [Nº 051 · Zine riso em duas cores: a arte numa cor especial](https://postext.dev/pt/cookbook/riso-zine-single-ink.md): Um zine de quatro páginas para risografia de dois tambores: os desenhos coloridos saem em tons de rosa, recoloridos pelo pen no canvas e por renderToPdf no PDF. · Nível 3 (Avançado) · Revistas e fanzines
- [Nº 011 · Um só original, edições impressa e de tela](https://postext.dev/pt/cookbook/print-and-screen-editions.md): As duas edições saem de uma configuração: htmlViewer.overrides guarda o design escuro de tela e applyHtmlViewerOverrides o mescla antes de cada composição HTML. · Nível 3 (Avançado) · Revistas e fanzines