# Magazine feature on a three-column grid

> layoutType 'multiple' cuts the page into three columns; placement.columns sets photos and a floated pull quote across two of them, or across all three.

- HTML version: https://postext.dev/en/cookbook/magazine-three-column-feature
- Recipe Nº 135 · Figures & images · Level 3 (Advanced) · Outputs: Canvas
- Genres: Magazines & zines
- Requires postext ≥ 1.18.0 · tested with 1.18.0 on 2026-10-06
- Pages: [84](https://postext.dev/cookbook/magazine-three-column-feature/en/p01.webp?v=015ee4ae), [85](https://postext.dev/cookbook/magazine-three-column-feature/en/p02.webp?v=015ee4ae), [86](https://postext.dev/cookbook/magazine-three-column-feature/en/p03.webp?v=015ee4ae), [87](https://postext.dev/cookbook/magazine-three-column-feature/en/p04.webp?v=015ee4ae), [88](https://postext.dev/cookbook/magazine-three-column-feature/en/p05.webp?v=015ee4ae), [89](https://postext.dev/cookbook/magazine-three-column-feature/en/p06.webp?v=015ee4ae)
- Open in Sandbox: https://postext.dev/en/sandbox#recipe=magazine-three-column-feature&lang=en (.postext: https://postext.dev/cookbook/magazine-three-column-feature/en/magazine-three-column-feature.postext)
- Last updated: 2026-10-06
- Other languages: [es](https://postext.dev/es/cookbook/magazine-three-column-feature.md), [ca](https://postext.dev/ca/cookbook/magazine-three-column-feature.md), [zh](https://postext.dev/zh/cookbook/magazine-three-column-feature.md), [ja](https://postext.dev/ja/cookbook/magazine-three-column-feature.md), [ar](https://postext.dev/ar/cookbook/magazine-three-column-feature.md)

## In short

A six-page travel story from a monthly magazine, set in three narrow columns. It shows how to place photos and a large quotation across two columns or the whole page, and a box of practical tips in one.

## What you'll build

Six pages from the November issue of *Meridian*, a travel monthly, on a 225 × 297 mm page. The feature opens on a spread: one photograph of salt pans at sunrise runs across both pages, with the headline reversed out of the water on the left and the lead, its drop cap, the standfirst and the byline under the picture on the right. The story then runs in three justified columns, 61.7 mm each. Photographs take two columns, the whole width or one column; a pull quote sits across two columns between the paragraphs; a tinted sidebar with a map of the island opens the closing page. A small blue square ends the text.

**This recipe answers:**

- Can Postext set a magazine page in three columns, with photos across two of them?
- How do I control where a figure goes: top of page, across both columns, exactly here, or in the margin?
- How do I float a box to the top or bottom of the page while the text keeps flowing?
- How do I add an author line, a standfirst or a lead with a drop cap to an opener?

## The short answer

Three equal columns, and floats that take one, two or all three of them.

```js
// script.js, lines 44–72
const GUTTER = 5; // mm between the columns
const WIDTH = TRIM.width - MARGIN.inner - MARGIN.outer; // the text block, 195 mm
const COLUMN = (WIDTH - 2 * GUTTER) / 3; // 61.7 mm: about 40 characters of 9.6 pt text
const layout = { layoutType: 'multiple', columnCount: 3, gutterWidth: mm(GUTTER) };
// A float takes `columns` adjacent columns and the gutters between them: the head (or foot)
// of the first run of columns that are still empty, on its page or the next. As many columns
// as the page has is a page-wide float, like span: 'page'.
const across = {
  raker: { position: 'top', columns: 2 }, // 128.3 mm wide, at the head of two columns
  pans: { position: 'top', span: 'page' }, // 195 mm, the whole text block
  flor: { position: 'bottom' }, // 61.7 mm: one column, the default
  sieve: { position: 'top', columns: 2 }, // cited in the first column: heads the other two
  quay: { position: 'top', columns: 2 }, // two columns again, on the closing page
};
// A floated box takes `columns` the same way: the style sets it, a fence may override it
// with :::callout{type="pull" columns="3"}. A box set in the flow ('here') keeps to its column.
const pull = { id: 'pull', placement: 'top', columns: 2, backgroundEnabled: false,
  stripe: { enabled: true, side: 'top', width: pt(2.5), color: col('sea') }, // one device
  padding: { top: mm(3), right: pt(0), bottom: mm(1), left: pt(0) },
  body: { fontFamily: 'Fraunces', fontSize: pt(19), lineHeight: pt(2 * LEAD - 3),
    italic: true, textAlign: 'left', hyphenation: false, color: col('sea'),
    firstLineIndent: pt(0) } };
const visit = { id: 'visit', placement: 'top', // one column, at the head of the next free one
  background: col('tint'), padding: { top: mm(4), right: mm(4), bottom: mm(4), left: mm(4) },
  titleStyle: { ...label, fontWeight: 700, fontSize: pt(8.5), letterSpacing: pt(1.4),
    color: col('sea'), gap: mm(2) },
  body: { fontFamily: 'Barlow Condensed', fontWeight: 500, fontSize: pt(9.6),
    lineHeight: pt(12.4), textAlign: 'left', hyphenation: false, boldColor: col('sea'),
    paragraphSpacing: true, firstLineIndent: pt(0) } };
```

## Ingredients

**Teaches**

- [Three or more columns](https://postext.dev/en/docs/configuration.md#layout-types): layoutType 'multiple' cuts the body into columnCount equal columns, 3 to 8, for newspapers and magazines; rules, balancing, footnotes and page-wide floats work across all of them.
- [Floats across several columns](https://postext.dev/en/docs/document-format.md#placement): placement.columns sets a figure or table across k adjacent columns, and a callout style's columns (or the fence's columns attribute) does the same for a floated box: a picture across two of a newspaper's five columns.

**Also uses**

- [Floated boxes](https://postext.dev/en/docs/configuration.md#the-callout-container)
- [Callout boxes](https://postext.dev/en/docs/configuration.md#callout-styles)
- [Figure placement](https://postext.dev/en/docs/document-format.md#placement)
- [Designed openers](https://postext.dev/en/docs/configuration.md#span-and-advanced-design)
- [Pictures in page designs](https://postext.dev/en/docs/configuration.md#image-elements)
- [Drop caps in openers](https://postext.dev/en/docs/configuration.md#text-elements)
- [Heading attributes](https://postext.dev/en/docs/document-format.md#heading-attributes)
- [Heading styles](https://postext.dev/en/docs/configuration.md#heading-styles)
- [Running heads and folios](https://postext.dev/en/docs/configuration.md#headers--footers)
- [Heads by page role](https://postext.dev/en/docs/configuration.md#text-elements)
- [Caption style](https://postext.dev/en/docs/configuration.md#caption-style)
- [Source and credit lines](https://postext.dev/en/docs/configuration.md#caption-style)
- [Inline chips](https://postext.dev/en/docs/configuration.md#chip-styles)
- [Custom resource types](https://postext.dev/en/docs/configuration.md#resource-types)
- [Figures and tables as resources](https://postext.dev/en/docs/document-format.md#resources)
- [Semantic colour palette](https://postext.dev/en/docs/configuration.md#color-palette)
- [Mirrored margins](https://postext.dev/en/docs/configuration.md#mirrored-margins)
- [Figures exactly here](https://postext.dev/en/docs/document-format.md#block-embed-optional-explicit-inline-placement)
- [Full-width chapter band](https://postext.dev/en/docs/configuration.md#span-and-advanced-design)
- [Paragraph styles](https://postext.dev/en/docs/configuration.md#paragraph-styles)

**Config at a glance**

- [`bodyText`](https://postext.dev/en/docs/configuration.md#body-text), [`calloutStyles`](https://postext.dev/en/docs/configuration.md#callout-styles), [`captionStyle`](https://postext.dev/en/docs/configuration.md#caption-style), [`chipStyles`](https://postext.dev/en/docs/configuration.md#chip-styles), [`colorPalette`](https://postext.dev/en/docs/configuration.md#color-palette), [`footer`](https://postext.dev/en/docs/configuration.md#headers--footers), [`header`](https://postext.dev/en/docs/configuration.md#headers--footers), [`headingStyles`](https://postext.dev/en/docs/configuration.md#heading-styles), [`headings`](https://postext.dev/en/docs/configuration.md#headings), [`layout`](https://postext.dev/en/docs/configuration.md#layout), [`locale`](https://postext.dev/en/docs/configuration.md#hyphenation), [`page`](https://postext.dev/en/docs/configuration.md#page), [`paragraphStyles`](https://postext.dev/en/docs/configuration.md#paragraph-styles), [`resourceTypes`](https://postext.dev/en/docs/configuration.md#resource-types)

**APIs**

- [`buildDocument`](https://postext.dev/en/docs/configuration.md#building-a-document), [`clearMeasurementCache`](https://postext.dev/en/docs/configuration.md#measurement-cache), [`registerResourceImage`](https://postext.dev/en/docs/architecture.md#api-surface), [`renderPageToCanvas`](https://postext.dev/en/docs/configuration.md#rendering-a-page-to-a-bitmap)

**Typefaces**

- Source Serif 4 (OFL-1.1), Fraunces (OFL-1.1), Barlow Condensed (OFL-1.1)

## Method

### 1 · Cut the page into three columns, and let floats take one, two or three

The code is [the short answer](#the-short-answer) above. `layoutType: 'multiple'` with `columnCount: 3` divides the 195 mm text block into three equal columns, so with a 5 mm gutter each one is 61.7 mm wide, about 40 characters of 9.6 pt Source Serif. A picture's `placement.columns` takes that many adjacent columns and the gutters between them: the raking photograph is 128.3 mm wide, and the pans, with `span: 'page'`, the full 195 mm. The pull quote's style does the same for a box, with `columns: 2` on a `placement: 'top'` style, so it floats to the head of two free columns and the text runs on around it. A three-column grid suits a magazine feature with many pictures, because each picture can take one, two or three columns. Long text with few pictures reads better in two wider columns.

### 2 · Open on a spread, one photograph across two pages

```js
// script.js, lines 76–113
const PHOTO = 165; // mm: how far down the recto the right half of the photograph bleeds
// The verso is its own heading style: the left half of the picture fills the page, and the
// kicker and headline are reversed out of the dark water at its foot. The picture reserves
// nothing, so nothing is pushed off the page; the recto's heading opens the next page.
const spread = { id: 'spread', span: 'page', advancedDesign: { enabled: true, slot: { elements: [
  { kind: 'image', id: 'photo', resourceId: 'spread-left', reserve: false,
    placement: { ...at('bleed', 'top-left'), size: { width: 'fill', height: 'fill' } } },
  { kind: 'text', id: 'kicker', content: '{attr.kicker}', ...label, fontSize: pt(10),
    letterSpacing: pt(2), color: col('paper'), // on a sea-blue tab: the water is too bright
    box: { backgroundColor: col('sea'), padding: { top: mm(1.2), right: mm(2.4),
      bottom: mm(1.2), left: mm(2.4) } },
    placement: at('page', 'top-left', 20, 188) },
  { kind: 'text', id: 'headline', content: '{titleText}', fontFamily: 'Fraunces',
    fontWeight: 600, fontSize: pt(66), lineHeight: 0.96, // a multiple of the size
    color: col('paper'), align: 'left', overflow: 'wrap', // gotcha: overflow-ellipsis-default
    placement: at('#kicker', 'below', 0, 3, 150) },
] } } };
// The recto: the right half of the picture, cut to PHOTO mm, then the lead with its drop cap
// in the first column and the standfirst (the heading's own text) across the other two.
const air = { padding: { bottom: mm(6) } }; // empty padding counts: the columns start lower
const deck = { id: 'deck', span: 'page', advancedDesign: { enabled: true, slot: { elements: [
  { kind: 'image', id: 'photo', resourceId: 'spread-right', // cropped to 225 × 165 mm
    placement: { ...at('bleed', 'top-left'), size: { width: 'fill', height: mm(PHOTO) } } },
  { kind: 'text', id: 'credit', content: '{attr.credit}', ...label, fontWeight: 500,
    fontSize: pt(6.8), letterSpacing: pt(0.5), color: col('muted'), align: 'right',
    placement: at('container', 'top-right', 0, PHOTO - MARGIN.top + 2) },
  { kind: 'text', id: 'lead', content: '{attr.lead}', fontFamily: 'Source Serif 4',
    fontSize: pt(9.6), lineHeight: LEAD / 9.6, color: col('ink'), align: 'justify',
    hyphenate: true, box: air, placement: at('container', 'top-left', 0, PHOTO - 10, COLUMN),
    dropCap: { lines: 4, fontFamily: 'Fraunces', fontWeight: 600, color: col('sea'),
      gap: mm(1.6) } },
  { kind: 'text', id: 'standfirst', content: '{titleText}', fontFamily: 'Fraunces', italic: true,
    fontSize: pt(16.5), lineHeight: 1.24, color: col('ink'), align: 'left', overflow: 'wrap',
    placement: at('container', 'top-left', COLUMN + GUTTER, PHOTO - 11, 2 * COLUMN + GUTTER) },
  { kind: 'text', id: 'byline', content: '{attr.byline}', ...label, fontSize: pt(8.5),
    letterSpacing: pt(1.5), color: col('sea'), box: air,
    placement: at('#standfirst', 'below', 0, 4) },
] } } };
```

Each half of the photograph belongs to a heading style with `span: 'page'`, and a page-span heading always opens a new page, so the headline's page and the standfirst's page follow each other. The left half fills the verso and reserves nothing (`reserve: false`), so the headline can sit over the water at the foot. The right half is cut to 165 mm, and the lead, the standfirst and the byline hang from the container under it. The lead is a design text with a four-line `dropCap`, one column wide; its empty bottom padding counts towards the opener's height, so the columns start 6 mm under it. `continuation.pageIndexOffset: 83` makes page 84 a verso, so the two halves face each other.

### 3 · Declare the photographs, and cite each where it should land

```js
// script.js, lines 170–202
// No figure numbers: the pictures get a type with an empty caption prefix and template.
const photoType = { id: 'photo', name: 'Photograph', shortLabel: 'photo', captionPrefix: '',
  numberingTemplate: '', resetOn: 'never', counterFormat: 'decimal' };
const CREDIT = 'Photograph generated with diffusion models';
// Pixels at the page's 150 dpi (gotcha: bitmap-print-size): each shrinks to its frame.
const photo = (id, [w, h], altText, caption) => ({ id, typeId: 'photo',
  kind: 'bitmap', createdAt: 0, updatedAt: 0, altText,
  bitmap: { fileId: `${id}-${w}.jpg`, format: 'jpeg', width: w, height: h },
  note: CREDIT, ...(caption && { caption, placement: across[id] }) });
const resources = [ // the two halves of the spread are drawn by the headings, never cited
  photo('spread-left', [1200, 1584], 'Salt pans at sunrise, the sky mirrored in still brine.'),
  photo('spread-right', [1200, 880], 'A salt raker at work below a row of white salt heaps.'),
  photo('raker', [1500, 1125], 'A wooden rake pushing a ridge of wet salt crystals.',
    'Raking the crystallisers at dawn. The salt rolls up in a ridge; a rake that digs in '
    + 'tears the clay floor and greys the harvest.'),
  photo('pans', [1840, 1150], 'Rectangular salt pans in pink, ochre and grey by the sea.',
    'The Alvarra flats from the lighthouse hill. The pink basins are nearly ready: an alga '
    + 'colours the brine once it holds more than 200 grams of salt a litre.'),
  photo('flor', [1200, 1488], 'An older woman in a straw hat holding a basket of salt.',
    'Amélia Sousa with an afternoon’s flor de sal, about four kilos from two pans.'),
  photo('sieve', [1500, 1125], 'Hands skimming a crust of salt crystals with a round sieve.',
    'Skimming the flower: the sieve works the downwind edge of the pan, where the breeze has '
    + 'drifted the crust.'),
  photo('quay', [960, 1200], 'Sacks of salt on a harbour quay beside a blue boat at dusk.',
    'Porto Velho, the last week of September: fifty-kilo sacks wait for the mainland boat.'),
  { id: 'map', typeId: 'photo', kind: 'svg', createdAt: 0, updatedAt: 0, // drawn below
    svg: { fileId: 'map.svg', width: MAP.width * 10, height: MAP.height * 10 },
    placement: { position: 'here' }, // in the sidebar, under its title
    caption: 'The Alvarra pans (pink) lie on the eastern flats, 6 km from Porto Velho (the '
      + 'squares) by the coast road. The lighthouse hill is the triangle; the ferry, dashed.',
    altText: 'A map of a long, low island with salt pans at its eastern end and a harbour '
      + 'town at the west.' },
];
```

A float goes to the first free head (or foot) of its columns after the line that cites it, so the `::resource` lines decide the pages. The sieve photograph is cited at the top of the fifth page's first column, and the second and third columns are still empty there, so it heads them on the same page. The harbour photograph is cited late on that page and heads two columns of the next. Photographs of one type never overtake each other, so their citations stay in story order. Bitmaps are measured at the page's 150 dpi: 1500 px make 254 mm and shrink to the 128.3 mm of two columns.

### 4 · Running heads and folios off the opening spread

```js
// script.js, lines 117–133
const head = { ...label, fontSize: pt(7.5), letterSpacing: pt(1.3), color: col('muted') };
const folio = { fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: pt(9.5),
  color: col('ink') };
const pin = (edge, x, y) => ({ anchor: { to: 'page', edge }, offset: { x: mm(x), y: mm(y) } });
const sides = [['even', 'left', 1], ['odd', 'right', -1]]; // 1: the outer edge is on the left
// The label is 2 pt smaller, so it sits 0.68 mm lower in its box: one shared baseline.
const DROP = (0.8 * 1.2 * 2 * 25.4) / 72;
const header = { elements: sides.flatMap(([parity, edge, s]) => [
  { kind: 'text', id: `folio-${parity}`, content: '{pageNumber}', ...folio, align: edge,
    placement: pin(`top-${edge}`, s * MARGIN.outer, 12) },
  { kind: 'text', id: `head-${parity}`, ...head, align: edge,
    content: s > 0 ? '{title} · {subtitle}' : '{chapterTitle}',
    placement: pin(`top-${edge}`, s * (MARGIN.outer + 9), 12 + DROP) },
].map((element) => ({ ...element, parity, pages: 'body' }))) }; // none on the spread
const footer = { elements: [{ kind: 'text', id: 'drop-folio', content: '{pageNumber}', ...folio,
  align: 'right', parity: 'odd', pages: 'opener', // the recto of the spread: a folio at the foot
  placement: pin('bottom-right', -MARGIN.outer, -12) }] };
```

Header elements paint over the page and reserve no room, so the folio and the label are anchored to the page in the top margin. `pages: 'body'` keeps them off both pages of the spread, which are opener pages because each starts with a page-span heading. The recto of the spread gets its folio at the foot instead, through `pages: 'opener'` and `parity: 'odd'`; the verso, all photograph, carries none.

### 5 · Draw the sidebar's map in code

```js
// script.js, lines 306–351
function mulberry32(seed) {
  return () => {
    seed = (seed + 0x6d2b79f5) | 0;
    let r = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    r = (r + Math.imul(r ^ (r >>> 7), 61 | r)) ^ r;
    return ((r ^ (r >>> 14)) >>> 0) / 4294967296;
  };
}
function islandMap() { // in mm: a long, low island lying south-west to north-east
  const rand = mulberry32(135);
  const f = (id, a = 1) => `fill="${palette[id]}"${a < 1 ? ` fill-opacity="${a}"` : ''}`;
  const [cx, cy, rx, ry, turn] = [28, 27, 23, 9.5, -0.5]; // centre, half-axes, radians
  const place = (u, v) => [cx + u * Math.cos(turn) - v * Math.sin(turn),
    cy + u * Math.sin(turn) + v * Math.cos(turn)]; // island frame to map
  const coast = Array.from({ length: 48 }, (_, i) => {
    const a = (i / 48) * 2 * Math.PI;
    const k = 0.9 + rand() * 0.16; // a ragged shore
    return place(rx * k * Math.cos(a), ry * k * Math.sin(a)).map((n) => n.toFixed(2)).join(' ');
  });
  const pans = []; // a grid of basins on the eastern flats, inside the shore
  for (let u = 6; u < 19; u += 2.4) {
    for (let v = -5; v < 5; v += 1.9) {
      if ((u / rx) ** 2 + (v / ry) ** 2 > 0.62) continue;
      const [x, y] = place(u, v);
      pans.push(`<rect x="${(x - 1).toFixed(2)}" y="${(y - 0.7).toFixed(2)}" width="2" `
        + `height="1.4" transform="rotate(${(turn * 180) / Math.PI} ${x.toFixed(2)} `
        + `${y.toFixed(2)})" ${f(rand() < 0.7 ? 'salt' : 'rule')}/>`);
    }
  }
  const [tx, ty] = place(-18, 3); // Porto Velho, on the south-west shore
  const town = [[0, 0], [1.3, 0.2], [0.4, 1.2], [1.7, 1.3], [-0.9, 0.9]].map(([dx, dy]) =>
    `<rect x="${(tx + dx).toFixed(2)}" y="${(ty + dy).toFixed(2)}" width="0.9" height="0.9" `
    + `${f('ink')}/>`).join('');
  const [lx, ly] = place(2, -6.5); // the lighthouse hill, on the north shore
  const ferry = `M${tx} ${ty + 1.5}C${tx - 6} ${ty + 6} 6 46 1.5 48`; // to the mainland, south-west
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${MAP.width * 10}" `
    + `height="${MAP.height * 10}" viewBox="0 0 ${MAP.width} ${MAP.height}">`
    + `<rect width="${MAP.width}" height="${MAP.height}" ${f('sea', 0.16)}/>`
    + `<path d="M${coast.join('L')}Z" ${f('paper')} stroke="${palette.muted}" `
    + 'stroke-width="0.25"/>' + pans.join('') + town
    + `<path d="M${lx - 1.4} ${ly + 1.1}L${lx} ${ly - 1.3}L${lx + 1.4} ${ly + 1.1}Z" ${f('ink')}/>`
    + `<path d="${ferry}" fill="none" stroke="${palette.ink}" stroke-width="0.3" `
    + 'stroke-dasharray="1 0.8"/>'
    + `<path d="M0.4 46.4L1.5 48L2.9 47Z" ${f('ink')}/>` // the arrowhead, a path (no marker)
    + '</svg>';
}
```

The map is an SVG resource with `placement: 'here'`, cited inside the sidebar's fence, so it sits under the box title at the box's measure. It has no lettering: text inside an SVG cannot use the page's web fonts, so the caption names the shapes instead. The arrowhead on the ferry route is a path, because a `<marker>` would not survive a PDF export.

## The whole recipe

One file, composed from the recipe's folder with the sample text and the Cookbook's shared kit inlined; it builds its own page. To run it, put it in a `<script type="module">` on an empty page, or paste it into the JS panel of a new CodePen (as a module). It imports postext from esm.sh, so there is nothing to install or build.

- Source folder: https://github.com/drnachio/postext/tree/main/cookbook/magazine-three-column-feature

### script.js

```js
// ═══ Postext Cookbook · Nº 135 · Magazine feature on a three-column grid ═════════
// https://postext.dev/en/cookbook/magazine-three-column-feature
// Code: MIT · Text: original (CC BY 4.0) · Photographs: generated with diffusion models
// Fonts: Source Serif 4, Fraunces, Barlow Condensed (SIL OFL 1.1) · Needs postext ≥ 1.18.0
// A travel feature from a monthly magazine, pages 84–89 of the issue. The story opens on a
// spread, a photograph bled across both pages, then runs on in three columns: pictures across
// two of them, one across the page and one in a single column, a pull quote floated across
// two columns, a sidebar in one, running heads, folios and an end mark.
import {
  buildDocument, renderPageToCanvas, clearMeasurementCache, registerResourceImage,
} from 'https://esm.sh/postext';

const LANG = 'en'; // @lang: the language of the sample document ('en' | 'es')
const RECIPE = 'magazine-three-column-feature';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: an Atlantic blue for the one accent, a salt tint for the sidebar
const palette = {
  ink: '#1c2024', // text: a blue-black
  sea: '#1d5470', // the accent: kickers, crossheads, the quote, the drop cap
  tint: '#edf1f2', // the sidebar's ground
  rule: '#c5ced3', // the map's resting pans
  muted: '#5c656d', // running heads, credits, the colophon
  paper: '#ffffff', // the page, and the headline reversed out of the photograph
  salt: '#dfa79c', // the pans on the sidebar's map, the pink of ripe brine
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = [
  ...Object.entries(palette).map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } })),
  // The engine's defaults link to 'main-color': point it at the accent, so nothing prints blue.
  { id: 'main-color', name: 'sea (defaults)', value: { hex: palette.sea, model: 'hex' } },
];
// #endregion
const TRIM = { width: 225, height: 297 }; // a magazine trim, in mm
const MARGIN = { top: 22, bottom: 20, inner: 16, outer: 14 }; // mirrored
const LEAD = 14; // body leading in pt: the baseline grid
const MAP = { width: 54, height: 50 }; // mm: the sidebar's map, as wide as its measure
const label = { fontFamily: 'Barlow Condensed', fontWeight: 600, textTransform: 'uppercase',
  align: 'left' }; // design text is centred by default
const at = (to, edge, x = 0, y = 0, width) => ({ anchor: { to, edge },
  offset: { x: mm(x), y: mm(y) }, ...(width && { size: { width: mm(width) } }) });

// #region answer: three equal columns, and floats that take one, two or all three of them
const GUTTER = 5; // mm between the columns
const WIDTH = TRIM.width - MARGIN.inner - MARGIN.outer; // the text block, 195 mm
const COLUMN = (WIDTH - 2 * GUTTER) / 3; // 61.7 mm: about 40 characters of 9.6 pt text
const layout = { layoutType: 'multiple', columnCount: 3, gutterWidth: mm(GUTTER) };
// A float takes `columns` adjacent columns and the gutters between them: the head (or foot)
// of the first run of columns that are still empty, on its page or the next. As many columns
// as the page has is a page-wide float, like span: 'page'.
const across = {
  raker: { position: 'top', columns: 2 }, // 128.3 mm wide, at the head of two columns
  pans: { position: 'top', span: 'page' }, // 195 mm, the whole text block
  flor: { position: 'bottom' }, // 61.7 mm: one column, the default
  sieve: { position: 'top', columns: 2 }, // cited in the first column: heads the other two
  quay: { position: 'top', columns: 2 }, // two columns again, on the closing page
};
// A floated box takes `columns` the same way: the style sets it, a fence may override it
// with :::callout{type="pull" columns="3"}. A box set in the flow ('here') keeps to its column.
const pull = { id: 'pull', placement: 'top', columns: 2, backgroundEnabled: false,
  stripe: { enabled: true, side: 'top', width: pt(2.5), color: col('sea') }, // one device
  padding: { top: mm(3), right: pt(0), bottom: mm(1), left: pt(0) },
  body: { fontFamily: 'Fraunces', fontSize: pt(19), lineHeight: pt(2 * LEAD - 3),
    italic: true, textAlign: 'left', hyphenation: false, color: col('sea'),
    firstLineIndent: pt(0) } };
const visit = { id: 'visit', placement: 'top', // one column, at the head of the next free one
  background: col('tint'), padding: { top: mm(4), right: mm(4), bottom: mm(4), left: mm(4) },
  titleStyle: { ...label, fontWeight: 700, fontSize: pt(8.5), letterSpacing: pt(1.4),
    color: col('sea'), gap: mm(2) },
  body: { fontFamily: 'Barlow Condensed', fontWeight: 500, fontSize: pt(9.6),
    lineHeight: pt(12.4), textAlign: 'left', hyphenation: false, boldColor: col('sea'),
    paragraphSpacing: true, firstLineIndent: pt(0) } };
// #endregion

// #region spread: one photograph across the opening spread, the headline on the verso
const PHOTO = 165; // mm: how far down the recto the right half of the photograph bleeds
// The verso is its own heading style: the left half of the picture fills the page, and the
// kicker and headline are reversed out of the dark water at its foot. The picture reserves
// nothing, so nothing is pushed off the page; the recto's heading opens the next page.
const spread = { id: 'spread', span: 'page', advancedDesign: { enabled: true, slot: { elements: [
  { kind: 'image', id: 'photo', resourceId: 'spread-left', reserve: false,
    placement: { ...at('bleed', 'top-left'), size: { width: 'fill', height: 'fill' } } },
  { kind: 'text', id: 'kicker', content: '{attr.kicker}', ...label, fontSize: pt(10),
    letterSpacing: pt(2), color: col('paper'), // on a sea-blue tab: the water is too bright
    box: { backgroundColor: col('sea'), padding: { top: mm(1.2), right: mm(2.4),
      bottom: mm(1.2), left: mm(2.4) } },
    placement: at('page', 'top-left', 20, 188) },
  { kind: 'text', id: 'headline', content: '{titleText}', fontFamily: 'Fraunces',
    fontWeight: 600, fontSize: pt(66), lineHeight: 0.96, // a multiple of the size
    color: col('paper'), align: 'left', overflow: 'wrap', // gotcha: overflow-ellipsis-default
    placement: at('#kicker', 'below', 0, 3, 150) },
] } } };
// The recto: the right half of the picture, cut to PHOTO mm, then the lead with its drop cap
// in the first column and the standfirst (the heading's own text) across the other two.
const air = { padding: { bottom: mm(6) } }; // empty padding counts: the columns start lower
const deck = { id: 'deck', span: 'page', advancedDesign: { enabled: true, slot: { elements: [
  { kind: 'image', id: 'photo', resourceId: 'spread-right', // cropped to 225 × 165 mm
    placement: { ...at('bleed', 'top-left'), size: { width: 'fill', height: mm(PHOTO) } } },
  { kind: 'text', id: 'credit', content: '{attr.credit}', ...label, fontWeight: 500,
    fontSize: pt(6.8), letterSpacing: pt(0.5), color: col('muted'), align: 'right',
    placement: at('container', 'top-right', 0, PHOTO - MARGIN.top + 2) },
  { kind: 'text', id: 'lead', content: '{attr.lead}', fontFamily: 'Source Serif 4',
    fontSize: pt(9.6), lineHeight: LEAD / 9.6, color: col('ink'), align: 'justify',
    hyphenate: true, box: air, placement: at('container', 'top-left', 0, PHOTO - 10, COLUMN),
    dropCap: { lines: 4, fontFamily: 'Fraunces', fontWeight: 600, color: col('sea'),
      gap: mm(1.6) } },
  { kind: 'text', id: 'standfirst', content: '{titleText}', fontFamily: 'Fraunces', italic: true,
    fontSize: pt(16.5), lineHeight: 1.24, color: col('ink'), align: 'left', overflow: 'wrap',
    placement: at('container', 'top-left', COLUMN + GUTTER, PHOTO - 11, 2 * COLUMN + GUTTER) },
  { kind: 'text', id: 'byline', content: '{attr.byline}', ...label, fontSize: pt(8.5),
    letterSpacing: pt(1.5), color: col('sea'), box: air,
    placement: at('#standfirst', 'below', 0, 4) },
] } } };
// #endregion

// #region heads: the magazine and the issue on the verso, the story on the recto
const head = { ...label, fontSize: pt(7.5), letterSpacing: pt(1.3), color: col('muted') };
const folio = { fontFamily: 'Barlow Condensed', fontWeight: 700, fontSize: pt(9.5),
  color: col('ink') };
const pin = (edge, x, y) => ({ anchor: { to: 'page', edge }, offset: { x: mm(x), y: mm(y) } });
const sides = [['even', 'left', 1], ['odd', 'right', -1]]; // 1: the outer edge is on the left
// The label is 2 pt smaller, so it sits 0.68 mm lower in its box: one shared baseline.
const DROP = (0.8 * 1.2 * 2 * 25.4) / 72;
const header = { elements: sides.flatMap(([parity, edge, s]) => [
  { kind: 'text', id: `folio-${parity}`, content: '{pageNumber}', ...folio, align: edge,
    placement: pin(`top-${edge}`, s * MARGIN.outer, 12) },
  { kind: 'text', id: `head-${parity}`, ...head, align: edge,
    content: s > 0 ? '{title} · {subtitle}' : '{chapterTitle}',
    placement: pin(`top-${edge}`, s * (MARGIN.outer + 9), 12 + DROP) },
].map((element) => ({ ...element, parity, pages: 'body' }))) }; // none on the spread
const footer = { elements: [{ kind: 'text', id: 'drop-folio', content: '{pageNumber}', ...folio,
  align: 'right', parity: 'odd', pages: 'opener', // the recto of the spread: a folio at the foot
  placement: pin('bottom-right', -MARGIN.outer, -12) }] };
// #endregion

const config = () => ({ // a factory: the engine caches resolved configs per object
  locale: 'en-us', // an exact hyphenation code (gotcha: hyphenation-locales)
  colorPalette, resourceTypes: [photoType],
  page: { width: mm(TRIM.width), height: mm(TRIM.height), dpi: 150,
    margins: { top: mm(MARGIN.top), bottom: mm(MARGIN.bottom), left: mm(MARGIN.inner),
      right: mm(MARGIN.outer), mirror: true } }, // left is the inner side
  layout,
  bodyText: { fontFamily: 'Source Serif 4', fontSize: pt(9.6), lineHeight: pt(LEAD),
    color: col('ink'), boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    textAlign: 'justify', firstLineIndent: mm(3), indentAfterHeading: false,
    // A 40-character measure: a line no break can set within twice the normal space takes up
    // to 0.015 em of tracking for the rest instead of spreading its spaces wider still.
    minWordSpacing: 0.7, maxJustifyTracking: 15 },
  headings: { fontFamily: 'Fraunces', fontWeight: 600, color: col('sea'), levels: [
    // Restated (gotcha: headings-drop-h1-break): the spread opens on the next page.
    { level: 1, span: 'page', breakBefore: { enabled: true, parity: 'any' } },
    { level: 2, fontSize: pt(12.5), lineHeight: pt(LEAD),
      marginTop: pt(LEAD), marginBottom: pt(0) }, // crossheads, one grid line above
  ] },
  headingStyles: [spread, deck],
  calloutStyles: [pull, visit],
  chipStyles: [{ id: 'end', background: col('sea'), borderWidth: pt(0), borderRadius: pt(0),
    fontSize: em(0.6), paddingX: em(0.5), paddingY: em(0), gap: em(0.6) }], // a square
  captionStyle: { fontFamily: 'Barlow Condensed', fontWeight: 500, fontSize: pt(8.6),
    lineHeight: pt(10.6), color: col('ink'), gap: mm(2),
    note: { fontSize: pt(7), color: col('muted'), gap: mm(0.5) } },
  paragraphStyles: [{ id: 'colophon', fontFamily: 'Barlow Condensed', fontWeight: 500,
    fontSize: pt(7.4), lineHeight: pt(9.6), color: col('muted'), textAlign: 'left',
    firstLineIndent: pt(0), marginTop: pt(LEAD) }],
  header, footer,
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
// #region resources: the photographs, declared once by their real pixels
// No figure numbers: the pictures get a type with an empty caption prefix and template.
const photoType = { id: 'photo', name: 'Photograph', shortLabel: 'photo', captionPrefix: '',
  numberingTemplate: '', resetOn: 'never', counterFormat: 'decimal' };
const CREDIT = 'Photograph generated with diffusion models';
// Pixels at the page's 150 dpi (gotcha: bitmap-print-size): each shrinks to its frame.
const photo = (id, [w, h], altText, caption) => ({ id, typeId: 'photo',
  kind: 'bitmap', createdAt: 0, updatedAt: 0, altText,
  bitmap: { fileId: `${id}-${w}.jpg`, format: 'jpeg', width: w, height: h },
  note: CREDIT, ...(caption && { caption, placement: across[id] }) });
const resources = [ // the two halves of the spread are drawn by the headings, never cited
  photo('spread-left', [1200, 1584], 'Salt pans at sunrise, the sky mirrored in still brine.'),
  photo('spread-right', [1200, 880], 'A salt raker at work below a row of white salt heaps.'),
  photo('raker', [1500, 1125], 'A wooden rake pushing a ridge of wet salt crystals.',
    'Raking the crystallisers at dawn. The salt rolls up in a ridge; a rake that digs in '
    + 'tears the clay floor and greys the harvest.'),
  photo('pans', [1840, 1150], 'Rectangular salt pans in pink, ochre and grey by the sea.',
    'The Alvarra flats from the lighthouse hill. The pink basins are nearly ready: an alga '
    + 'colours the brine once it holds more than 200 grams of salt a litre.'),
  photo('flor', [1200, 1488], 'An older woman in a straw hat holding a basket of salt.',
    'Amélia Sousa with an afternoon’s flor de sal, about four kilos from two pans.'),
  photo('sieve', [1500, 1125], 'Hands skimming a crust of salt crystals with a round sieve.',
    'Skimming the flower: the sieve works the downwind edge of the pan, where the breeze has '
    + 'drifted the crust.'),
  photo('quay', [960, 1200], 'Sacks of salt on a harbour quay beside a blue boat at dusk.',
    'Porto Velho, the last week of September: fifty-kilo sacks wait for the mainland boat.'),
  { id: 'map', typeId: 'photo', kind: 'svg', createdAt: 0, updatedAt: 0, // drawn below
    svg: { fileId: 'map.svg', width: MAP.width * 10, height: MAP.height * 10 },
    placement: { position: 'here' }, // in the sidebar, under its title
    caption: 'The Alvarra pans (pink) lie on the eastern flats, 6 km from Porto Velho (the '
      + 'squares) by the coast road. The lighthouse hill is the triangle; the ferry, dashed.',
    altText: 'A map of a long, low island with salt pans at its eastern end and a harbour '
      + 'town at the west.' },
];
// #endregion

const markdown = String.raw`---
title: "Meridian"
subtitle: "November 2026"
---

# The Salt Rakers of Marisal {style="spread" kicker="Islands · The Atlantic"}

## On a flat island at the edge of the Atlantic, nine families still make salt by hand, with sun, wind and a wooden rake. Their season lasts eleven weeks, and every year it starts a little later {style="deck" byline="Words by Marta Quintal" credit="Sunrise on the Alvarra pans · Photographs generated with diffusion models" lead="At five in the morning the brine in the Alvarra pans is the colour of pewter, and João Brás is already standing in it up to his ankles. He works the way his father taught him, walking backwards down the pan and drawing the rake towards him in long, even strokes, so that the salt rolls up into a ridge without tearing the clay floor beneath it."}

Brás is fifty-eight. He has raked these pans every summer since he was eleven, except for two years of military service and one summer, in 1994, when he broke his wrist falling from the roof of the salt store. The pan he is working this morning measures nine metres by twenty-two, and by half past seven he will have drawn about four hundred kilos of salt into a white ridge along its edge. Then the sun will be too high, and the salt too bright to look at.

Marisal is fourteen kilometres long and nowhere higher than a two-storey house. It has no river and almost no trees, and the wind from the north-east blows on two days out of three between June and September. For most of its history the island had nothing to sell except what the sea and that wind could make together. The first salt works were dug on the eastern flats in the 1680s. At their peak, in the years before the Second World War, more than six hundred pans were worked on the island, by some 140 families.

The decline came quickly. In the 1960s a plant on the mainland began to make salt by boiling brine under vacuum, cheaply and all year round, and the canneries that had bought Marisal’s salt for two centuries switched to it within a decade. Young men left for the merchant fleet and the building sites of the north. The pans they left behind silted up in a few winters, and their clay walls slumped into the brine like sandcastles after a tide.

## Water, sun and wind

The method has not changed in three centuries. At high tide, sea water flows through a sluice into a large reservoir, the *viveiro*, where it settles for a few days and drops its sand. From there it is let down, a few centimetres at a time, through a chain of ever shallower basins. In each one the sun and the wind take a little more of the water, and the brine grows heavier. The basins are laid out so that the water never has to be lifted: the whole works falls about forty centimetres from the sluice to the last pan, and gravity does the rest. Sea water holds about 35 grams of salt in every litre. By the time it reaches the last basins, the crystallisers, it holds more than 250, and salt begins to form on the surface like frost on a window.

The whole passage takes about three weeks. The salt makers measure it with a glass hydrometer that floats higher as the brine thickens, but most of them can judge it without one. “You can see it in the colour,” says Brás. “It goes pink first, then a sort of grey. When it shines like oil, the salt is coming.” The pink comes from a single-celled alga that thrives in water too salty for anything else. It is harmless, and it gives the pans their colours when you see them from the lighthouse hill.

::resource{id="raker"}

The skill lies in the water level. Too deep, and the salt forms slowly, in small grains; too shallow, and it crusts over with the clay. A salt maker opens and closes the little wooden gates between his basins several times a day, by hand or with the side of his foot. Brás has 46 gates on his eleven pans, and he can tell you the height of the water behind each one without looking.

At noon the rakers go home to sleep, and the flats belong to the wind. Brás eats with his wife under the vine at the back of the house: grilled mackerel, bread, a tomato cut in half and rubbed with the coarse grey salt from the bottom of the heap, the salt nobody buys. In the evening he walks back down to the pans to check the gates, and on still nights he sometimes stays until dark, sitting on the wall of the reservoir and listening to the brine tick as the crystals form.

## Eleven weeks

The harvest runs from early July to the middle of September, when the first autumn rain usually arrives. It used to begin in June. Over the past twenty years the records of the salt makers’ cooperative show the first raking moving back by about nine days, because late spring storms now fill the basins with rainwater just when they should be concentrating. A single heavy shower in August can dissolve a week’s salt in an hour. The rakers watch the forecast on their phones, and on uncertain evenings they draw the salt into heaps and cover them with plastic sheets held down by stones.

::resource{id="pans"}

The work is heavy and short. Raking starts before dawn, while the salt is cool and the light is low enough to show the ridges. By nine the crystallisers glare white and the air above them shimmers. Each pan is raked every three or four days. The wet salt is shovelled into wooden wheelbarrows and pushed along the clay walkways to the heaps at the end of each row, where it drains and dries for two weeks before it goes into the store.

The store at the end of the flats was built in 1911, a long whitewashed shed with no windows and a floor of beaten earth. Inside it smells of seaweed and tar, and by the end of September the heaps rise to the roof beams. Nothing made of metal is kept there: in a year the salt eats a nail down to a rust stain in the wood.

:::callout{type="pull"}
The sea gives you the water. The sun and the wind do the work. All we do is stop it running away.
:::

A good pan gives about 60 tonnes of coarse salt in a season. Sold in bulk to the canning factory on the mainland, it brings the salt maker around 90 euros a tonne, less than the diesel it takes to ship it. By the late 1990s fewer than twenty families were still working pans, and most of the eastern flats had been left to the herons.

## The flower of the salt

What saved the pans was not the coarse salt. On hot, still afternoons a thin crust forms on the surface of the crystallisers, made of flat, brittle crystals that float on the brine like ice on a pond. This is the *flor de sal*, the flower of the salt. It is skimmed off by hand with a wide, fine-meshed sieve on a long handle, a few millimetres at a time, before the evening wind breaks it up and sinks it. The skimmer works along the downwind edge of the pan, where the breeze has pushed the crust into a drift, and lifts it in shallow passes that barely touch the water. Lift too deep and the sieve brings up brine and clay with the crystals; too slowly, and the crust folds and sinks before it reaches the mesh.

A pan gives only one or two per cent of its harvest as flower, and it has to be gathered on every day that it appears.

On Marisal it was always women’s work, and for generations it was not sold at all. Families kept it for the table and gave it as a present at weddings. Amélia Sousa, who is seventy-four, has skimmed the pans behind her house every summer since 1962. “My mother called it the salt for visitors,” she says. “The coarse salt was for the fish. The flower was kept for the days when the priest came to eat with us.”

Chefs on the mainland describe the flower in the language of wine. The crystals are hollow pyramids a few millimetres across, and they break between the teeth instead of dissolving on the tongue. It tastes less sharply of salt than the coarse grain, because it holds a little more of the sea’s magnesium and calcium, and it is never cooked with: a pinch goes on at the table, over a fried egg or a slice of tomato.

::resource{id="sieve"}

::resource{id="flor"}

In 2011 nine families formed a cooperative, the Salineiros de Alvarra, and began to sell the flower in small tins under their own name. A 250-gram tin sells for six euros on the island and for three times that in city delicatessens. The flower now brings in more than the rest of the harvest put together. It has paid for a new sluice, a shared drying shed and the repair of 38 abandoned pans, and this year, for the first time since 1971, the cooperative turned buyers away in August.

## The herons’ share

Not everyone welcomed the restoration. By 2010 the abandoned pans on the eastern flats had become one of the largest resting places for wading birds on the island’s side of the ocean: black-winged stilts, avocets, little egrets and, every autumn, a few hundred flamingos on their way south. The birdwatchers who came to count them were the first visitors Marisal had had in years, and they were not pleased to see the walls rebuilt.

The answer was a map. The cooperative and the island’s naturalists’ society agreed to leave twenty-two of the old pans flooded all year as a refuge, to keep the working pans free of plastic and lime, and to stop raking near the nesting walls between April and June. The birds seem content with the arrangement. Stilts now nest on the working walls as well, and the rakers step round their eggs. Each September the society’s volunteers count the birds from the lighthouse hill, as they have since 1998. Last year they recorded 41 species on the flats in a single morning, among them a spoonbill ringed as a chick on the far side of the ocean.

## Nine families

The cooperative has eleven members under forty. One of them is Rita Brás, João’s niece, who studied marine biology on the mainland and came back in 2019 to work four pans her grandfather had abandoned in 1987. It took her two winters to rebuild their clay walls and floors, treading the wet clay flat with her bare feet as the old salt makers did. She logs the salinity of every basin three times a day and shares the figures with a university group that studies salt marshes. “My uncle thinks I am measuring what he already knows,” she says. “He is right. But when he stops, someone will have to know it from the numbers instead.”

Rita’s pans are the smallest on the flats, and the most watched. She has fitted one of them with a floating thermometer and a camera on a pole, and every evening she posts its picture for the cooperative’s customers, who can watch the crust form on brine they will eat a year later. Orders from the mainland doubled in the first summer she did it. The older members were doubtful at first. Now they come round after supper to look at the screen with her and argue about the colour of the water.

::resource{id="quay"}

:::callout{type="visit" title="Visiting Marisal"}
::resource{id="map"}

**Getting there** The ferry from the mainland takes 2 hours 40 minutes and sails daily from June to September, three times a week in winter.

**Getting round** Bicycles for hire at the ferry quay, €12 a day. The pans are six kilometres from Porto Velho by the coast road, which is flat all the way.

**When to go** The harvest runs from July to mid-September. The cooperative shows visitors round the pans on weekday mornings at eight; book a day ahead.

**Where to stay** Three guesthouses in Porto Velho, from €65 a night. Bring a hat: there is no shade on the flats.

**Where to eat** Casa do Moinho, on the harbour, grills the morning’s mackerel and serves it with the coarse grey salt. Lunch for two, about €38.

**What to bring home** Flor de sal in 250 g tins, €6 at the cooperative’s shed by the sluice.
:::

The old salt makers are not sentimental about their trade. Brás will tell you that his back hurts from June to October and that he would not wish the work on his sons, who drive taxis in the island’s one town. He also says that he has never had a better morning than the first raking of a good year, when the salt comes up under the rake in a single unbroken roll and the whole pan smells of the sea.

On the last Saturday of the season the cooperative weighs the year’s harvest on the old platform scale in the salt store, sack by sack, with a notebook and a pencil. Last year it came to 1,860 tonnes of coarse salt and a little under eleven tonnes of flower, the best year since the cooperative began. The figure is chalked on the door of the store, where it stays until the rain washes it off, some time in October.

At the end of September the salt goes down to the quay at Porto Velho in linen sacks of fifty kilos each, and the last boat of the season carries it to the mainland. The pans are flooded with sea water for the winter, to protect the clay from the rain and the frost. By November, when the rakers start mending their gates, the flats look like a lake again, and the herons are back on the walls, waiting. :chip[⁠]{style="end"}

:::paragraphs{style="colophon"}
Marisal, the Alvarra pans and everyone in this feature are fictional · Set in Source Serif 4, Fraunces and Barlow Condensed (SIL Open Font License) · Text: CC BY 4.0 · Photographs generated with diffusion models
:::
`; // content.<lang>.md, inlined by the Cookbook

// #region art: the sidebar's map of Marisal, drawn in code with a seeded PRNG
function mulberry32(seed) {
  return () => {
    seed = (seed + 0x6d2b79f5) | 0;
    let r = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    r = (r + Math.imul(r ^ (r >>> 7), 61 | r)) ^ r;
    return ((r ^ (r >>> 14)) >>> 0) / 4294967296;
  };
}
function islandMap() { // in mm: a long, low island lying south-west to north-east
  const rand = mulberry32(135);
  const f = (id, a = 1) => `fill="${palette[id]}"${a < 1 ? ` fill-opacity="${a}"` : ''}`;
  const [cx, cy, rx, ry, turn] = [28, 27, 23, 9.5, -0.5]; // centre, half-axes, radians
  const place = (u, v) => [cx + u * Math.cos(turn) - v * Math.sin(turn),
    cy + u * Math.sin(turn) + v * Math.cos(turn)]; // island frame to map
  const coast = Array.from({ length: 48 }, (_, i) => {
    const a = (i / 48) * 2 * Math.PI;
    const k = 0.9 + rand() * 0.16; // a ragged shore
    return place(rx * k * Math.cos(a), ry * k * Math.sin(a)).map((n) => n.toFixed(2)).join(' ');
  });
  const pans = []; // a grid of basins on the eastern flats, inside the shore
  for (let u = 6; u < 19; u += 2.4) {
    for (let v = -5; v < 5; v += 1.9) {
      if ((u / rx) ** 2 + (v / ry) ** 2 > 0.62) continue;
      const [x, y] = place(u, v);
      pans.push(`<rect x="${(x - 1).toFixed(2)}" y="${(y - 0.7).toFixed(2)}" width="2" `
        + `height="1.4" transform="rotate(${(turn * 180) / Math.PI} ${x.toFixed(2)} `
        + `${y.toFixed(2)})" ${f(rand() < 0.7 ? 'salt' : 'rule')}/>`);
    }
  }
  const [tx, ty] = place(-18, 3); // Porto Velho, on the south-west shore
  const town = [[0, 0], [1.3, 0.2], [0.4, 1.2], [1.7, 1.3], [-0.9, 0.9]].map(([dx, dy]) =>
    `<rect x="${(tx + dx).toFixed(2)}" y="${(ty + dy).toFixed(2)}" width="0.9" height="0.9" `
    + `${f('ink')}/>`).join('');
  const [lx, ly] = place(2, -6.5); // the lighthouse hill, on the north shore
  const ferry = `M${tx} ${ty + 1.5}C${tx - 6} ${ty + 6} 6 46 1.5 48`; // to the mainland, south-west
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${MAP.width * 10}" `
    + `height="${MAP.height * 10}" viewBox="0 0 ${MAP.width} ${MAP.height}">`
    + `<rect width="${MAP.width}" height="${MAP.height}" ${f('sea', 0.16)}/>`
    + `<path d="M${coast.join('L')}Z" ${f('paper')} stroke="${palette.muted}" `
    + 'stroke-width="0.25"/>' + pans.join('') + town
    + `<path d="M${lx - 1.4} ${ly + 1.1}L${lx} ${ly - 1.3}L${lx + 1.4} ${ly + 1.1}Z" ${f('ink')}/>`
    + `<path d="${ferry}" fill="none" stroke="${palette.ink}" stroke-width="0.3" `
    + 'stroke-dasharray="1 0.8"/>'
    + `<path d="M0.4 46.4L1.5 48L2.9 47Z" ${f('ink')}/>` // the arrowhead, a path (no marker)
    + '</svg>';
}
// #endregion

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = { // text, display and label faces, loaded before the build (gotcha: fonts-first)
  'Source Serif 4': ['400', '400i', '600'], Fraunces: ['400i', '600'],
  'Barlow Condensed': ['500', '600', '700'] };

// ─── 4 · Build & show ───────────────────────────────────────────────────────
await loadFonts(FONTS, markdown);
await Promise.all([...resources.filter((r) => r.bitmap).map(({ bitmap }) =>
  loadImage(bitmap.fileId, asset(bitmap.fileId))), loadSvg('map.svg', islandMap())]);
// Pages 84–89 of the issue: page 84 is a verso, so the opener lies open as a spread.
const continuation = { pageIndexOffset: 83, pageNumbering: { startAt: 84 } };
const doc = await buildWithFonts(
  () => buildDocument({ markdown, resources, continuation }, config()), markdown);
showPages(doc, { title: 'Magazine feature on a three-column grid' });

// ─── 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 v1 ── the same in every recipe · postext.dev/cookbook ────────
// Postext measures text with the faces the browser has loaded, and caches the
// widths, so every face must be ready before the first build. Faces come from
// Fontsource: the same static files the PDF embeds, so screen and PDF agree.

/** faces = { 'Family Name': ['400', '400i', '700'] }. `text` is the sample:
 *  letters beyond Latin-1 (č, ł, ő…) also load the latin-ext files. 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',
  };
  const subsets = /[Ā-˿Ḁ-ỿ]/.test(text) ? ['latin', 'latin-ext'] : ['latin'];
  const jobs = [];
  let added = 0;
  for (const [family, specs] of Object.entries(faces)) {
    const id = fontsourceId(family);
    const meta = optional ? await fontsourceMeta(family) : null;
    for (const spec of new Set(specs)) {
      const weight = parseInt(spec, 10);
      const style = spec.endsWith('i') ? 'italic' : 'normal';
      if (hasFace(family, weight, style)) continue;
      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` (a buildDocument or buildBundle call) and checks the faces
 *  the pages use. A regular face missing from FONTS is loaded with a warning;
 *  bold and italic variants are loaded when the family ships them. Then the
 *  measurement caches are cleared and the build runs 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; its
 *  bold, italic and bold-italic variants are listed whether or not used. */
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' };
}

/** True when a loaded FontFace covers exactly this family, weight and style
 *  (document.fonts.check() is also true 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;
}

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

/** The weights and styles a family ships ({ weights: [400, 700], styles: ['normal', 'italic'] }), 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 ───────
/** Shows the pages as facing spreads on a dark desk: the first page is a
 *  recto on its own, then verso | recto pairs, as in a bound book. Pages
 *  are painted when they scroll near the screen. */
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 · images v1 ── recipes with pictures · postext.dev/cookbook ──────────
/** Registers a photo or PNG for the canvas and keeps its bytes for the PDF.
 *  fetch → ImageBitmap never taints the canvas (a plain cross-origin <img> would). */
async function loadImage(fileId, url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Image not found (${res.status}): ${url}`);
  const bytes = new Uint8Array(await res.arrayBuffer());
  registerResourceImage(fileId, await createImageBitmap(new Blob([bytes])));
  (loadImage.bytes ??= new Map()).set(fileId, bytes);
}

/** Registers SVG markup (drawn in code, or fetched) as a vector image. */
async function loadSvg(fileId, svg) {
  const img = new Image();
  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
  await img.decode();
  registerResourceImage(fileId, img);
  (loadImage.bytes ??= new Map()).set(fileId, new TextEncoder().encode(svg));
}

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

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

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

## Variations

### Put the pull quote across all three columns

A floated box takes the fence's `columns` attribute over its style's, so one quote can run the full width.

```diff
- :::callout{type="pull"}
+ :::callout{type="pull" columns="3"}
```

### Set the story in two columns

For a feature with fewer pictures and longer paragraphs, see [Magazine feature: photo opener to end mark](https://postext.dev/en/cookbook/magazine-feature-opener.md), on a `double` layout.

## Pitfalls

- **A 'top' float never lands on its citing page.** A float never goes above its own reference, so a page-wide 'top' float cited on page N opens page N+1. Cite it earlier, or use position 'auto' or 'bottom', which can take the foot of the citing page.
- **An opener's images never count towards the height it reserves.** In postext 1.4.1 an advanced-design heading measures the height it reserves without its images: its texts, rules and boxes count, even when anchored to the page, but an image, such as a picture bled across the head of the page, reserves nothing, so the text can start on top of it. Set minHeight to where the text should begin.
- **A page-span heading always opens a new page.** A heading whose level or style sets span: 'page' is laid out as an opener at the head of a page, whether or not it has a breakBefore. Placed after other text, or after another opener on the same page, it moves to the next page and leaves the rest of the current one empty. A banner headline across both columns (or both tiers of a vertical page) under a masthead goes into the opener's own design, next to the masthead, or into a :::callout{span="page"} box as a heading without span, as newspaper-front-page sets its banners.
- **Page 1 is a recto: plan pages with physical numbers.** Page 1 is a right-hand page and page 2 the first verso, so plan spreads with physical page numbers: an opener on an even page faces the odd page after it.
- **Bitmaps are laid out in px at the document dpi: declare print size.** A bitmap resource is sized from the width and height it declares, in pixels at the document's dpi, not from the file. Declare the print-size pixels (about 300 dpi at the printed width) so the figure lands at the right size and stays sharp.
- **A whitespace-only chip prints its markup.** A chip whose text is only spaces, no-break spaces included, prints :chip[ ] literally. For a blank answer chip put a word joiner (U+2060) inside it.
- **Any headings object switches off the H1 page break.** By default an H1 breaks to a recto (always-odd), but passing any headings object resets that default, so chapters run on and span: 'page' does nothing. Restate headings.levels[0].breakBefore: { enabled: true, parity } in every config.
- **A design text's lineHeight is a multiple, never a dimension.** In a design slot, a text element's lineHeight multiplies its font size (lineHeight: 1.05). In postext 1.4.1 a dimension such as pt(15) is not rejected: the opener's height measures as NaN, the room it reserves, minHeight included, is dropped without a warning and the text runs under the title.
- **Design text overflow defaults to 'ellipsis-end'.** A design text element that does not fit its width ends in an ellipsis by default. Set overflow: 'wrap' for titles that should break onto more lines.
- **Only 8 locales hyphenate, by exact code.** Hyphenation ships for en-us, es, fr, de, it, pt, ca and nl, matched exactly: 'es-ES' or any other language silently falls back to American English.
- **Load every face before layout.** Layout measures text with the faces the browser has loaded and caches the widths, so a face that arrives after the first build leaves wrong line breaks and a PDF that no longer matches the screen. Load every weight and style first, and call clearMeasurementCache() before rebuilding when one arrives late.

- A photograph across two columns heads two columns that are still empty. Cited in the second column, it finds no such pair on its page, since only the third column is left, and waits for the next page.
- The story is fitted to end level on the sixth page under the harbour photograph. After an edit, check that the last page still fills: a few lines fewer and the photograph moves to a page of its own.
- With 40-character lines, a justified paragraph has few break points. `maxJustifyTracking: 15` lets a line that cannot be set within twice the normal space take up to 0.015 em of tracking instead. Fix a one-word last line by editing the copy, as the pages here were.

## Credits

- Recipe: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Images: Sunrise on the salt pans (the opening spread, in two halves): Generated With Diffusion Models, CC-BY-4.0
- Images: Sunrise on the salt pans, the recto's half: Generated With Diffusion Models, CC-BY-4.0
- Images: A rake drawing up wet salt: Generated With Diffusion Models, CC-BY-4.0
- Images: The salt flats from above: Generated With Diffusion Models, CC-BY-4.0
- Images: A salt maker with a basket of flor de sal: Generated With Diffusion Models, CC-BY-4.0
- Images: Skimming flor de sal with a sieve: Generated With Diffusion Models, CC-BY-4.0
- Images: Salt sacks on a harbour quay at dusk: Generated With Diffusion Models, CC-BY-4.0
- Images: The sidebar's map of Marisal, drawn in code: Ignacio Ferro, MIT
- Type: Source Serif 4 (OFL-1.1), Fraunces (OFL-1.1), Barlow Condensed (OFL-1.1)
- Code: MIT · Sample content: CC-BY-4.0

## Related

- [Nº 004 · Magazine feature: photo opener to end mark](https://postext.dev/en/cookbook/magazine-feature-opener.md): One advancedDesign opener sets a bleed photo and the heading's kicker, headline, standfirst and byline; two floated boxes and a chip end mark follow. · Level 3 (Advanced) · Magazines & zines
- [Nº 068 · Photo essay with full-bleed plates](https://postext.dev/en/cookbook/photo-essay-full-bleed.md): Plates as heading styles built from a list, each filling its page to the trim; the storm plate runs across the gutter of a spread in two halves. · Level 2 (Intermediate) · Photobooks
- [Nº 009 · Figures that float to where you cite them](https://postext.dev/en/cookbook/figures-float-where-cited.md): A two-column chapter with seven numbered figures: six float from their first :ref to the first slot their placement allows; one sits where ::resource puts it. · Level 3 (Advanced) · Textbooks