# Uma página de jornal árabe em duas colunas

> Um diário árabe com locale 'ar': a primeira coluna é a da direita, as manchetes ocupam as duas e as notas breves vão em três colunas da direita para a esquerda.

- Versão HTML: https://postext.dev/pt/cookbook/arabic-newspaper-two-columns
- Receita Nº 108 · Página e grade · Nível 2 (Intermediário) · Saídas: Canvas, PDF
- Gêneros: Jornais e boletins
- Requer postext ≥ 1.15.0, postext-pdf ≥ 1.15.0 · testada com 1.19.1, postext-pdf 1.19.1 em 2026-10-06
- Páginas: [١](https://postext.dev/cookbook/arabic-newspaper-two-columns/en/p01.webp?v=1c4479bb), [٢](https://postext.dev/cookbook/arabic-newspaper-two-columns/en/p02.webp?v=1c4479bb)
- PDF: https://postext.dev/cookbook/arabic-newspaper-two-columns/en/arabic-newspaper-two-columns.pdf?v=1c4479bb
- Abrir no Sandbox: https://postext.dev/pt/sandbox#recipe=arabic-newspaper-two-columns&lang=en (.postext: https://postext.dev/cookbook/arabic-newspaper-two-columns/en/arabic-newspaper-two-columns.postext)
- Última atualização: 2026-10-04
- Outros idiomas: [en](https://postext.dev/en/cookbook/arabic-newspaper-two-columns.md), [es](https://postext.dev/es/cookbook/arabic-newspaper-two-columns.md), [ca](https://postext.dev/ca/cookbook/arabic-newspaper-two-columns.md), [zh](https://postext.dev/zh/cookbook/arabic-newspaper-two-columns.md), [ja](https://postext.dev/ja/cookbook/arabic-newspaper-two-columns.md), [ar](https://postext.dev/ar/cookbook/arabic-newspaper-two-columns.md)

## Em poucas palavras

A primeira página e uma página interna de um jornal árabe. A matéria começa na coluna da direita e continua na da esquerda, do jeito que os leitores árabes leem a página.

## O que você vai compor

Duas páginas de *الساحل*, um diário imaginário de uma cidade portuária imaginária, num formato compacto de 246 × 328 mm. A primeira página traz o nome do jornal em Aref Ruqaa de 84 pt, a matéria principal sobre o novo bonde da cidade sob uma manchete na largura da página e um mapa desenhado em código, e uma faixa de três notas breves no pé. A página 2 abre a seção local sob uma retranca azul, com quatro matérias e os horários de oração do dia. Tudo se lê a partir da direita: a primeira coluna de texto, as notas breves, as colunas da tabela, as orelhas do cabeçalho. [A primeira página em inglês](https://postext.dev/pt/cookbook/newspaper-front-page.md) compõe os mesmos elementos da esquerda para a direita.

**Esta receita responde a:**

- Qual coluna vem primeiro numa página árabe, e como componho um jornal em duas colunas?

## A resposta curta

```js
// script.js, linhas 38–48
// locale 'ar' mirrors the page: the body's first column is the right one, the story runs down
// it and on at the top of the left one, and the column rule sits between them as before.
const layout = { layoutType: 'double', gutterWidth: mm(6),
  columnRule: { enabled: true, color: col('rule'), lineWidth: pt(0.5) } };
// A headline over both columns is a page-span box without a frame: the columns under it start
// level, right then left, and a box with placement="bottom" closes the page the same way.
const banner = { id: 'banner', backgroundEnabled: false, span: 'page',
  padding: { top: pt(0), right: pt(0), bottom: pt(0), left: pt(0) },
  titleStyle: { ...kufi(9, 700, 'sea'), gap: mm(1.2) }, // the kicker, from the fence's title
  marginTop: pt(0), marginBottom: pt(LEAD / 2),
  body: { fontFamily: TEXT, fontSize: pt(13), lineHeight: pt(21), textAlign: 'right' } };
```

## Ingredientes

**Ensina**

- [Uma ou duas colunas](https://postext.dev/pt/docs/configuration.md#tipos-de-layout): Uma única coluna ou duas colunas iguais com sua medianiz; duas colunas é o padrão, por isso um romance precisa pedir uma só.
- [Texto da direita para a esquerda](https://postext.dev/pt/docs/arabic-layout.md#direção-e-algoritmo-bidirecional): direction define a direção base do documento: 'auto' (o padrão) a deduz da escrita do locale, de modo que 'ar', 'fa' ou 'he' correm da direita para a esquerda; o algoritmo bidirecional (UAX #9) ordena as palavras latinas e os números dentro de cada linha, e o livro é encadernado pela direita.

**Também usa**

- [Fio entre colunas](https://postext.dev/pt/docs/configuration.md#fio-entre-colunas)
- [Boxes na largura da página](https://postext.dev/pt/docs/configuration.md#o-contêiner-callout)
- [Colunas dentro de um boxe](https://postext.dev/pt/docs/document-format.md#columns)
- [Boxes flutuantes](https://postext.dev/pt/docs/configuration.md#o-contêiner-callout)
- [Aberturas desenhadas](https://postext.dev/pt/docs/configuration.md#largura-e-design-avançado)
- [Estilos de título](https://postext.dev/pt/docs/configuration.md#estilos-de-título)
- [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)
- [Fontes árabes](https://postext.dev/pt/docs/arabic-layout.md#fontes)
- [Árabe como idioma do documento](https://postext.dev/pt/docs/arabic-layout.md#como-começar-um-livro-em-árabe)
- [Algarismos dos números gerados](https://postext.dev/pt/docs/configuration.md#idioma-do-documento)
- [Cabeços e fólios](https://postext.dev/pt/docs/configuration.md#cabeços-e-rodapés)
- [Paleta de cores semântica](https://postext.dev/pt/docs/configuration.md#paleta-de-cores)
- [Boxes](https://postext.dev/pt/docs/configuration.md#estilos-de-boxe)
- [Estilos de parágrafo](https://postext.dev/pt/docs/configuration.md#estilos-de-parágrafo)
- [Exportação para PDF](https://postext.dev/pt/docs/configuration.md#geração-de-pdf)
- [Parágrafos na outra direção](https://postext.dev/pt/docs/arabic-layout.md#direção-do-documento-do-bloco-e-do-trecho)
- [Figuras exatamente aqui](https://postext.dev/pt/docs/document-format.md#inserção-em-bloco-opcional-posicionamento-explícito-em-linha)
- [Faixa de capítulo em largura total](https://postext.dev/pt/docs/configuration.md#largura-e-design-avançado)
- [Cor do papel](https://postext.dev/pt/docs/configuration.md#página)
- [Fontes incorporadas ao PDF](https://postext.dev/pt/docs/configuration.md#por-que-um-provedor-de-fontes)
- [Tipos de recurso personalizados](https://postext.dev/pt/docs/configuration.md#tipos-de-recurso)
- [Figuras e tabelas como recursos](https://postext.dev/pt/docs/document-format.md#recursos)
- [Livros encadernados pela direita](https://postext.dev/pt/docs/configuration.md#encadernação)
- [Cabeços por seção](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), [`calloutStyles`](https://postext.dev/pt/docs/configuration.md#estilos-de-boxe), [`captionStyle`](https://postext.dev/pt/docs/configuration.md#estilo-de-legenda), [`colorPalette`](https://postext.dev/pt/docs/configuration.md#paleta-de-cores), [`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), [`resourceTypes`](https://postext.dev/pt/docs/configuration.md#tipos-de-recurso), [`tableStyle`](https://postext.dev/pt/docs/configuration.md#estilo-de-tabela)

**API**

- [`buildDocument`](https://postext.dev/pt/docs/configuration.md#compilar-um-documento), [`clearMeasurementCache`](https://postext.dev/pt/docs/configuration.md#cache-de-medidas), [`decompressWoff2`](https://postext.dev/pt/docs/configuration.md#provedor-de-fontes-no-navegador-fontsource--woff2), [`registerResourceImage`](https://postext.dev/pt/docs/architecture.md#superfície-da-api), [`renderPageToCanvas`](https://postext.dev/pt/docs/configuration.md#renderizar-uma-página-como-bitmap), [`renderToPdf`](https://postext.dev/pt/docs/configuration.md#geração-de-pdf)

**Tipos**

- Aref Ruqaa (OFL-1.1), Noto Kufi Arabic (OFL-1.1), Noto Naskh Arabic (OFL-1.1)

## Preparo

### 1 · Duas colunas, a primeira à direita

O código é [a resposta curta](https://postext.dev/pt/cookbook/arabic-newspaper-two-columns.md#a-resposta-curta) logo acima. `layoutType: 'double'` e o fio entre colunas são as mesmas configurações de um jornal em inglês; `locale: 'ar'` vira a página, então a matéria preenche primeiro a coluna da direita e continua no alto da coluna da esquerda ([Ordem das páginas e encadernação à direita](https://postext.dev/pt/docs/arabic-layout.md#ordem-das-páginas-e-encadernação-à-direita)). Uma manchete sobre as duas colunas é um boxe na largura da página sem moldura, e as colunas abaixo dela começam niveladas. A faixa de notas breves é um boxe na largura da página que flutua para o pé, com `:::columns{count=3}` dentro, e as suas colunas também correm da direita para a esquerda, assim como a tabela de horários de oração da página 2: uma tabela composta na direção do documento põe a primeira coluna à direita.

### 2 · Um cabeçalho entre duas orelhas

```js
// script.js, linhas 52–68
const ear = (id, side, lines) => lines.map(([key, content, look], i) => text(`${id}-${key}`,
  content, { ...look, align: side }, { ...(i === 0 ? at('container', `top-${side}`, 0, 4)
    : at(`#${id}-${lines[i - 1][0]}`, 'below', 0, 1)), size: { width: mm(48) } }));
const nameplate = { enabled: true, minHeight: mm(46), slot: { elements: [
  text('name', '{titleText}', { fontFamily: NAME, fontSize: pt(84), fontWeight: 700,
    lineHeight: 1.1, color: col('sea'), align: 'center' },
  { ...at('container', 'top', 0, -3), size: { width: 'fill' } }),
  // In the mirrored page, 'right' is the start of the line: issue and date there, price opposite.
  ...ear('start', 'right', [['k', '{attr.issue}', kufi(8, 700, 'sea')],
    ['d', '{publishDate}', kufi(9, 400)]]),
  ...ear('end', 'left', [['k', '{attr.city}', kufi(8, 700, 'sea')],
    ['p', '{attr.price}', kufi(9, 400)]]),
  { kind: 'rule', id: 'thick', thickness: pt(2.5), color: col('ink'),
    placement: { ...at('container', 'top-left', 0, 40), size: { width: 'fill' } } },
  { kind: 'rule', id: 'thin', thickness: pt(0.5), color: col('ink'),
    placement: { ...at('#thick', 'below', 0, 0.8), size: { width: 'fill' } } },
] } };
```

O título de nível 1 da primeira página é o nome do jornal, pintado por um estilo de título. O design dele é desenhado na página espelhada, então `top-right` é o início da linha: o número da edição e a data vão ali, a cidade e o preço na outra ponta ([O que significam esquerda, direita, início e fim](https://postext.dev/pt/docs/arabic-layout.md#o-que-significam-esquerda-direita-início-e-fim)). A ruqʿa é uma letra de título para poucas palavras em corpo grande; não tem kashida, e o texto corrido nunca a usa.

### 3 · Retrancas de seção e linhas de fólio

```js
// script.js, linhas 72–86
const flag = { enabled: true, minHeight: mm(13), slot: { elements: [
  { kind: 'rule', id: 'bar', thickness: pt(3), color: col('ink'),
    placement: { ...at('container', 'top-left', 0, 9), size: { width: 'fill' } } },
  text('flag', '{titleText}', { ...kufi(12, 700, 'paper'), align: 'right',
    box: { backgroundColor: col('sea'), padding: { top: mm(1), right: mm(3), bottom: mm(1.4),
      left: mm(3) } } }, at('#bar', 'above')),
] } };
// The folio line keeps its physical sides: the number at the outer corner of each page.
const folio = (parity, edge, x) => ({ kind: 'text', id: `n-${parity}`, parity,
  content: '{pageNumber}  ·  {title}  ·  {publishDate}', ...kufi(8, 600, 'muted'),
  align: edge, placement: at('page', `top-${edge}`, x, 7) });
const header = { elements: [folio('even', 'right', -SIDE), folio('odd', 'left', SIDE),
  { kind: 'rule', id: 'folio-rule', thickness: pt(0.5), color: col('rule'),
    placement: { ...at('page', 'top-left', SIDE, 11.5),
      size: { width: mm(TRIM.width - 2 * SIDE) } } }] };
```

Uma página interna abre com um título de nível 1 desenhado como retranca sobre um fio grosso. A linha do fólio é um cabeçalho, então mantém os seus lados físicos: a página 2, par, tem o número no canto direito, o externo num jornal que abre pela direita. A primeira página esvazia o cabeçalho no seu estilo de título.

### 4 · Um mapa desenhado em código

```js
// script.js, linhas 250–280
function routeSvg() { // 222 × 44 mm, 1 unit = 1 mm
  const [W, H] = [222, 44];
  const coast = 'M0 36C30 33 52 40 80 35S128 24 152 28S196 37 222 31V44H0Z';
  // Eighteen stations along a line that leaves the port (east, on the right) for the university.
  const line = 'M210 22C186 17 170 13 150 16S112 25 92 20S56 9 34 12S14 19 10 17';
  const stops = Array.from({ length: 18 }, (_, i) => i / 17);
  const pointAt = (t) => { // the line as three cubic pieces, sampled per piece
    const seg = [[210, 22, 186, 17, 170, 13, 150, 16], [150, 16, 130, 19, 112, 25, 92, 20],
      [92, 20, 72, 15, 56, 9, 34, 12], [34, 12, 22, 14, 14, 19, 10, 17]];
    const k = Math.min(3, Math.floor(t * 4));
    const u = t * 4 - k;
    const [x0, y0, x1, y1, x2, y2, x3, y3] = seg[k];
    const b = (a, c, d, e) => (1 - u) ** 3 * a + 3 * (1 - u) ** 2 * u * c + 3 * (1 - u) * u * u * d
      + u ** 3 * e;
    return [b(x0, x1, x2, x3), b(y0, y1, y2, y3)];
  };
  const rings = stops.map((t, i) => {
    const [x, y] = pointAt(t);
    const big = i === 0 || i === 17 || i === 8;
    return `<circle cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="${big ? 2.6 : 1.6}" `
      + `fill="${palette.paper}" stroke="${palette.ink}" stroke-width="${big ? 1 : 0.7}"/>`;
  }).join('');
  let grid = '';
  for (let x = 6; x < W; x += 12) grid += `M${x} 0V${H}`;
  for (let y = 6; y < H; y += 12) grid += `M0 ${y}H${W}`;
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${W * 10}" height="${H * 10}" `
    + `viewBox="0 0 ${W} ${H}"><rect width="${W}" height="${H}" fill="${palette.sand}"/>`
    + `<path d="${grid}" stroke="${palette.paper}" stroke-width="0.6"/>`
    + `<path d="${coast}" fill="${palette.sea}" fill-opacity="0.25"/>`
    + `<path d="${line}" fill="none" stroke="${palette.sea}" stroke-width="2.4"/>${rings}</svg>`;
}
```

O mapa do bonde é um SVG de traçados e círculos nas cores da paleta, sem nenhum texto: as palavras de um desenho sairiam numa fonte do sistema, então os nomes dos lugares ficam na legenda. O tipo de imagem não tem contador nem rótulo, porque jornais não numeram as suas fotos.

## 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/arabic-newspaper-two-columns

### script.js

```js
// ═══ Postext Cookbook · Nº 108 · A two-column Arabic newspaper page ══════════════════
// https://postext.dev/en/cookbook/arabic-newspaper-two-columns
// Code: MIT · Text: original Arabic news copy (CC BY 4.0) · Map: drawn in code
// Fonts: Aref Ruqaa, Noto Kufi Arabic, Noto Naskh Arabic (SIL OFL 1.1) · Needs postext ≥ 1.15.0
import {
  buildDocument, renderPageToCanvas, clearMeasurementCache, registerResourceImage,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'en'; // @lang: the language of the frame; the paper is Arabic in both editions
const RECIPE = 'arabic-newspaper-two-columns';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: newsprint, a cold ink and the sea blue of the paper's name
const palette = {
  ink: '#121416', // text and the heavy rules
  sea: '#0f5f7a', // the accent: the nameplate, section flags, kickers, the tram line
  sand: '#e9e2d2', // the In brief strip and the map's land
  rule: '#9b988f', // hairlines: the column rule, the folio line
  muted: '#5b5852', // bylines, captions' credits, the imprint
  paper: '#f8f5ee', // newsprint, and type reversed out of the flags
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = Object.entries({ ...palette, 'main-color': palette.ink })
  .map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } }));
// #endregion
const [NAME, HEAD, TEXT] = ['Aref Ruqaa', 'Noto Kufi Arabic', 'Noto Naskh Arabic'];
const TRIM = { width: 246, height: 328 }; // mm: a 3 : 4 compact
const SIDE = 12; // mm: newspaper margins, narrow and not mirrored
const LEAD = 16; // pt: the body leading, 1.5 × an 10.7 pt Naskh
const kufi = (size, weight, colour = 'ink') => ({ fontFamily: HEAD, fontSize: pt(size),
  fontWeight: weight, color: col(colour) });
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',
  ...look, placement });

// #region answer: two columns, the first one on the right
// locale 'ar' mirrors the page: the body's first column is the right one, the story runs down
// it and on at the top of the left one, and the column rule sits between them as before.
const layout = { layoutType: 'double', gutterWidth: mm(6),
  columnRule: { enabled: true, color: col('rule'), lineWidth: pt(0.5) } };
// A headline over both columns is a page-span box without a frame: the columns under it start
// level, right then left, and a box with placement="bottom" closes the page the same way.
const banner = { id: 'banner', backgroundEnabled: false, span: 'page',
  padding: { top: pt(0), right: pt(0), bottom: pt(0), left: pt(0) },
  titleStyle: { ...kufi(9, 700, 'sea'), gap: mm(1.2) }, // the kicker, from the fence's title
  marginTop: pt(0), marginBottom: pt(LEAD / 2),
  body: { fontFamily: TEXT, fontSize: pt(13), lineHeight: pt(21), textAlign: 'right' } };
// #endregion

// #region nameplate: the paper's name in Ruqʿa between two ears
const ear = (id, side, lines) => lines.map(([key, content, look], i) => text(`${id}-${key}`,
  content, { ...look, align: side }, { ...(i === 0 ? at('container', `top-${side}`, 0, 4)
    : at(`#${id}-${lines[i - 1][0]}`, 'below', 0, 1)), size: { width: mm(48) } }));
const nameplate = { enabled: true, minHeight: mm(46), slot: { elements: [
  text('name', '{titleText}', { fontFamily: NAME, fontSize: pt(84), fontWeight: 700,
    lineHeight: 1.1, color: col('sea'), align: 'center' },
  { ...at('container', 'top', 0, -3), size: { width: 'fill' } }),
  // In the mirrored page, 'right' is the start of the line: issue and date there, price opposite.
  ...ear('start', 'right', [['k', '{attr.issue}', kufi(8, 700, 'sea')],
    ['d', '{publishDate}', kufi(9, 400)]]),
  ...ear('end', 'left', [['k', '{attr.city}', kufi(8, 700, 'sea')],
    ['p', '{attr.price}', kufi(9, 400)]]),
  { kind: 'rule', id: 'thick', thickness: pt(2.5), color: col('ink'),
    placement: { ...at('container', 'top-left', 0, 40), size: { width: 'fill' } } },
  { kind: 'rule', id: 'thin', thickness: pt(0.5), color: col('ink'),
    placement: { ...at('#thick', 'below', 0, 0.8), size: { width: 'fill' } } },
] } };
// #endregion

// #region inside: an inside page opens with a section flag; folio lines on the sheet
const flag = { enabled: true, minHeight: mm(13), slot: { elements: [
  { kind: 'rule', id: 'bar', thickness: pt(3), color: col('ink'),
    placement: { ...at('container', 'top-left', 0, 9), size: { width: 'fill' } } },
  text('flag', '{titleText}', { ...kufi(12, 700, 'paper'), align: 'right',
    box: { backgroundColor: col('sea'), padding: { top: mm(1), right: mm(3), bottom: mm(1.4),
      left: mm(3) } } }, at('#bar', 'above')),
] } };
// The folio line keeps its physical sides: the number at the outer corner of each page.
const folio = (parity, edge, x) => ({ kind: 'text', id: `n-${parity}`, parity,
  content: '{pageNumber}  ·  {title}  ·  {publishDate}', ...kufi(8, 600, 'muted'),
  align: edge, placement: at('page', `top-${edge}`, x, 7) });
const header = { elements: [folio('even', 'right', -SIDE), folio('odd', 'left', SIDE),
  { kind: 'rule', id: 'folio-rule', thickness: pt(0.5), color: col('rule'),
    placement: { ...at('page', 'top-left', SIDE, 11.5),
      size: { width: mm(TRIM.width - 2 * SIDE) } } }] };
// #endregion

const config = () => ({ // a factory: the engine caches resolved configs per object
  locale: 'ar', // written out, never LANG (gotcha: arabic-locale-tag): rtl, digits ٠–٩
  colorPalette, resourceTypes, layout,
  page: { width: mm(TRIM.width), height: mm(TRIM.height), dpi: 150,
    backgroundColor: col('paper'), margins: { top: mm(16), bottom: mm(14), left: mm(SIDE),
      right: mm(SIDE) } },
  bodyText: { fontFamily: TEXT, fontSize: pt(10.7), lineHeight: pt(LEAD), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    textAlign: 'justify', firstLineIndent: em(1), indentAfterHeading: false },
  headings: { fontFamily: HEAD, fontWeight: 800, color: col('ink'), marginBottom: pt(0),
    levels: [
      // Restated (gotcha: headings-drop-h1-break); 'any': a section opens the next page.
      { level: 1, span: 'page', breakBefore: { enabled: true, parity: 'any' },
        advancedDesign: flag },
      { level: 2, fontSize: pt(12.5), lineHeight: pt(20), marginTop: pt(LEAD / 2) },
      { level: 3, fontSize: pt(11), lineHeight: pt(LEAD), fontWeight: 700, marginTop: pt(LEAD) },
    ] },
  headingStyles: [
    { id: 'front', advancedDesign: nameplate, header: { elements: [] } }, // no folio line
    { id: 'lead', fontSize: pt(31), lineHeight: pt(48), fontWeight: 900, marginBottom: pt(4) },
    { id: 'wide', fontSize: pt(24), lineHeight: pt(38), marginBottom: pt(2) },
  ],
  calloutStyles: [banner,
    { ...banner, id: 'briefs', background: col('sand'), backgroundEnabled: true,
      padding: { top: mm(3), right: mm(4), bottom: mm(3.5), left: mm(4) }, columnGap: mm(6),
      marginTop: pt(LEAD), titleStyle: { ...kufi(10, 800, 'sea'), gap: mm(2) },
      body: { fontFamily: TEXT, fontSize: pt(9.5), lineHeight: pt(14), textAlign: 'right',
        firstLineIndent: pt(0) } }],
  paragraphStyles: [
    { id: 'byline', ...kufi(8, 400, 'muted'), firstLineIndent: pt(0), textAlign: 'right' },
    { id: 'flush', firstLineIndent: pt(0) },
    { id: 'imprint', fontFamily: TEXT, fontSize: pt(8), lineHeight: pt(12), color: col('muted'),
      firstLineIndent: pt(0), textAlign: 'right', marginTop: pt(LEAD) },
    { id: 'imprint-latin', fontFamily: TEXT, fontSize: pt(7.5), lineHeight: pt(10),
      color: col('muted'), firstLineIndent: pt(0), textAlign: 'left' },
  ],
  tableStyle: { rules: 'horizontal', borderColor: col('rule'), borderWidth: pt(0.5),
    headerBackground: col('sea'), headerColor: col('paper'), headerFontFamily: HEAD,
    headerFontSize: pt(9), bodyFontFamily: HEAD, bodyFontSize: pt(11), bodyColor: col('ink'),
    cellPadding: mm(1.4) },
  captionStyle: { fontFamily: TEXT, fontSize: pt(9), color: col('ink'), gap: mm(1.5),
    note: { fontSize: pt(7.5), color: col('muted') } },
  header, footer: { elements: [] },
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "الساحل"
publishDate: "الخميس ١ أكتوبر ٢٠٢٦"
---

# الساحل {style="front" issue="السنة ٤٢ · العدد ١٤٨٠٩" city="رأس المرجان" price="الثمن: ٣ دراهم"}

:::callout{type="banner" title="النقل"}
## الترام يعود إلى رأس المرجان بعد ستين عامًا {style="lead"}

**ركب أكثر من ٤١ ألف شخص الخط الأول في يومه الأول، والبلدية تَعِد بخط ثانٍ قبل نهاية ٢٠٢٨**

::resource{id="route"}
:::

:::callout{type="briefs" span="page" placement="bottom" title="باختصار"}
:::columns{count=3 breaks="2,3"}
**المكتبة تفتح مساءً.** تمدّد مكتبة البلدية ساعات عملها حتى العاشرة ليلًا من الأحد إلى الخميس، ابتداءً من الأسبوع المقبل، تلبيةً لطلب طلاب الثانوية في موسم الامتحانات.

**موسم السردين.** أعلنت نقابة الصيادين أن موسم السردين سيبدأ في ١٥ أكتوبر، أي قبل موعده المعتاد بأسبوع، بعد أن رصدت القوارب أسرابًا كبيرة قرب الرصيف الشمالي.

**إغلاق شارع البحر.** يُغلق شارع البحر أمام السيارات صباح الجمعة من السابعة حتى الحادية عشرة، لإقامة سباق المدينة السنوي الذي يشارك فيه هذا العام ٢٣٠٠ عدّاء.
:::
:::

:::paragraphs{style="byline"}
كتبت: **سلمى بن عيسى**
:::

:::paragraphs{style="flush"}
عاد الترام إلى شوارع رأس المرجان صباح أمس، بعد ستين عامًا على توقّف آخر عربة كانت تصل الميناء بسوق الخضر. وانطلقت العربة الأولى من محطة الميناء في السادسة تمامًا، وعلى متنها سائقة شابة وعشرات من الركاب الذين انتظروا على الرصيف منذ الفجر.
:::

ويمتد الخط الأول ١٤ كيلومترًا، من الميناء في شرق المدينة إلى الجامعة في غربها، ويمرّ بثماني عشرة محطة، منها محطة ساحة الشهداء في وسط المدينة. وتقطع العربة المسافة كلها في ٣٨ دقيقة، أي في نصف الوقت الذي تستغرقه الحافلة في ساعات الذروة.

وقال رئيس البلدية، كمال الحدّاد، في حفل الافتتاح إن المشروع كلّف ٢٫٣ مليار درهم، وإن البلدية ستنشر حسابات المشروع كاملة قبل نهاية السنة. وأضاف: «وعدنا الناس بأن يكون الترام جاهزًا في الخريف، وها هو الخريف».

### أرقام اليوم الأول

بلغ عدد الركاب في اليوم الأول ٤١٢٠٠ راكب، وهو أكثر من ضعف ما قدّرته الشركة المشغّلة. وكانت العربات تمر كل ست دقائق، ثم كل أربع دقائق بعد الظهر حين ازدحمت محطة الجامعة بالطلاب. ولم يُسجَّل أي عطل، باستثناء توقّف قصير عند محطة السوق بسبب سيارة متوقفة على السكة.

وسعر التذكرة الواحدة ٧ دراهم، والاشتراك الشهري ١٢٠ درهمًا، ونصف ذلك للطلاب والمتقاعدين.

### الخط الثاني

لم ينتظر سكان الأحياء الجنوبية طويلًا قبل أن يسألوا عن نصيبهم. فقد تجمّع نحو مئتي شخص أمام مقر البلدية بعد الظهر، يحملون لافتات تطالب بمدّ الخط إلى حيّ النخيل. وردّ رئيس البلدية بأن الخط الثاني، الذي يصل المحطة المركزية بالأحياء الجنوبية، في مرحلة الدراسة، وأن الأشغال قد تبدأ في ربيع ٢٠٢٧.

# محليات

:::callout{type="banner" title="البحر"}
## الصيادون يعيدون بناء الرصيف القديم بأيديهم {style="wide"}
:::

:::paragraphs{style="byline"}
كتب: **يوسف العمراني**
:::

:::paragraphs{style="flush"}
لم ينتظر صيادو الحي القديم وصول ميزانية البلدية. فمنذ ثلاثة أسابيع، يجتمع كل صباح نحو أربعين منهم عند الرصيف الحجري الذي هدمت العاصفة نصفه في الشتاء الماضي، ويعيدون رصّ الحجارة واحدًا واحدًا، بعد أن يعودوا من البحر.
:::

ويعود الرصيف إلى أوائل القرن الماضي، وكان حتى العاصفة يستقبل نحو ستين قاربًا صغيرًا. ومنذ أن انهار جزؤه الخارجي، صار الصيادون يربطون قواربهم في الميناء التجاري، على بعد ثلاثة كيلومترات، ويدفعون رسومًا يومية لم تكن في حسابهم.

وقال عبد الله الشاوي، أكبر الصيادين سنًّا، وقد تجاوز السبعين: «تعلّمت رصّ الحجر من أبي، وهو تعلّمه من أبيه. الحجارة نفسها ما زالت في الماء، تحتاج فقط إلى من يرفعها». وتتكفّل نقابة الصيادين بالإسمنت والآلات، بينما يتبرع أصحاب الشاحنات بنقل الحجارة الكبيرة من المقلع.

وقد زار مهندس من البلدية الورشة الأسبوع الماضي، وأبدى ملاحظات على عمق الأساس عند الطرف الخارجي. ووعد بأن تموّل البلدية الجزء الذي يحتاج إلى غطّاسين وآلات ثقيلة، على أن يُنجز العمل كله قبل موسم السردين.

### المدرسة البحرية تستقبل طلابها

وعلى بعد خطوات من الرصيف، فتحت المدرسة البحرية أبوابها هذا الأسبوع لأول دفعة من طلابها، وعددهم ٣٦ طالبًا وطالبة، يتعلّمون الملاحة وصيانة المحركات وسلامة القوارب. والمدرسة في مبنى الجمارك القديم، الذي رمّمته البلدية خلال السنتين الماضيتين، واحتفظت بنوافذه الخشبية المطلة على البحر.

وقالت مديرة المدرسة، نجاة القاسمي، إن الإقبال فاق ما توقعته، وإن قائمة الانتظار للسنة المقبلة تضم أكثر من مئة اسم. وأضافت أن ثلث الطلاب من أبناء الصيادين، وأن المدرسة ستأخذهم في رحلات تدريبية مع قوارب الحي القديم، «حتى يتعلّموا من البحر ما لا تعلّمه الكتب».

## سوق الكتب القديمة ينتقل إلى ساحة الجمارك

:::paragraphs{style="byline"}
كتبت: **ليلى المنصوري**
:::

:::paragraphs{style="flush"}
بعد ثلاثين سنة على أرصفة شارع الاستقلال، ينتقل باعة الكتب القديمة يوم السبت المقبل إلى ساحة الجمارك، قرب المدرسة البحرية. وقد خصّصت البلدية للسوق ٤٤ كشكًا خشبيًا بسقوف من القماش، تُؤجَّر بخمسين درهمًا في الشهر.
:::

ولم يكن الانتقال محلّ إجماع. فبعض الباعة يخشون أن يفقدوا زبائنهم من طلاب الثانوية الذين كانوا يمرّون بهم في طريقهم إلى المدرسة، ويقولون إن الساحة بعيدة عن الحافلات. غير أن محطة الترام الجديدة على بعد مئتي متر من الساحة طمأنت أكثرهم.

ويقول إدريس البقالي، الذي يبيع الكتب منذ ١٩٨٤، إنه جمع في بيته أكثر من عشرين ألف كتاب لم يجد لها مكانًا على الرصيف: «لأول مرة سيكون عندي سقف ورفوف. سأعرض الكتب التي خبّأتها سنوات، ومنها طبعات قديمة من بولاق لا يعرف قيمتها إلا القليل».

::resource{id="prayer"}

وتنوي جمعية أصدقاء المكتبة تنظيم قراءة شعرية في الساحة كل سبت مساءً، ابتداءً من الأسبوع الثاني، وتدعو الكتّاب الشباب إلى التسجيل لدى أمانة الجمعية.

## حديقة الكورنيش تسهر حتى منتصف الليل

:::paragraphs{style="byline"}
كتب: **مراد السوسي**
:::

:::paragraphs{style="flush"}
تبقى حديقة الكورنيش مفتوحة حتى منتصف الليل طوال شهر أكتوبر، بعد أن ركّبت البلدية ١٢٠ مصباحًا جديدًا على ممرّاتها وعلى الدرج المؤدي إلى الشاطئ. وكانت الحديقة تُغلق أبوابها مع غروب الشمس منذ أن تعطّلت الإنارة القديمة قبل ثلاث سنوات.
:::

وتقول جمعية سكان الواجهة البحرية إن العائلات كانت تطالب بذلك منذ مدة، لأن حرارة النهار في أوائل الخريف تمنع الأطفال من اللعب قبل المساء. وستُقام في الحديقة كل جمعة أمسية موسيقية يحييها طلاب المعهد البلدي، وتُعرض أفلام قصيرة على جدار المسرح القديم مساء كل ثلاثاء.

وإذا نجحت التجربة، تنوي البلدية أن تجعل الفتح الليلي دائمًا من مايو إلى أكتوبر، على أن تراجع في نهاية الشهر تقارير الحراسة والنظافة، وعدد الزوار الذي ستحصيه بوابات الدخول الجديدة.

:::paragraphs{style="imprint"}
الساحل صحيفة متخيَّلة، ورأس المرجان مدينة متخيَّلة. النص مرخّص برخصة المشاع الإبداعي CC BY 4.0.
:::

:::paragraphs{style="imprint-latin" dir=ltr}
An imaginary daily, written in Arabic for the Postext Cookbook. Set in Aref Ruqaa, Noto Kufi Arabic and Noto Naskh Arabic (SIL OFL).
:::
`; // content.<lang>.md: the same Arabic paper in both

// #region art: the tram route on a stretch of coast, stations as rings
function routeSvg() { // 222 × 44 mm, 1 unit = 1 mm
  const [W, H] = [222, 44];
  const coast = 'M0 36C30 33 52 40 80 35S128 24 152 28S196 37 222 31V44H0Z';
  // Eighteen stations along a line that leaves the port (east, on the right) for the university.
  const line = 'M210 22C186 17 170 13 150 16S112 25 92 20S56 9 34 12S14 19 10 17';
  const stops = Array.from({ length: 18 }, (_, i) => i / 17);
  const pointAt = (t) => { // the line as three cubic pieces, sampled per piece
    const seg = [[210, 22, 186, 17, 170, 13, 150, 16], [150, 16, 130, 19, 112, 25, 92, 20],
      [92, 20, 72, 15, 56, 9, 34, 12], [34, 12, 22, 14, 14, 19, 10, 17]];
    const k = Math.min(3, Math.floor(t * 4));
    const u = t * 4 - k;
    const [x0, y0, x1, y1, x2, y2, x3, y3] = seg[k];
    const b = (a, c, d, e) => (1 - u) ** 3 * a + 3 * (1 - u) ** 2 * u * c + 3 * (1 - u) * u * u * d
      + u ** 3 * e;
    return [b(x0, x1, x2, x3), b(y0, y1, y2, y3)];
  };
  const rings = stops.map((t, i) => {
    const [x, y] = pointAt(t);
    const big = i === 0 || i === 17 || i === 8;
    return `<circle cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="${big ? 2.6 : 1.6}" `
      + `fill="${palette.paper}" stroke="${palette.ink}" stroke-width="${big ? 1 : 0.7}"/>`;
  }).join('');
  let grid = '';
  for (let x = 6; x < W; x += 12) grid += `M${x} 0V${H}`;
  for (let y = 6; y < H; y += 12) grid += `M0 ${y}H${W}`;
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${W * 10}" height="${H * 10}" `
    + `viewBox="0 0 ${W} ${H}"><rect width="${W}" height="${H}" fill="${palette.sand}"/>`
    + `<path d="${grid}" stroke="${palette.paper}" stroke-width="0.6"/>`
    + `<path d="${coast}" fill="${palette.sea}" fill-opacity="0.25"/>`
    + `<path d="${line}" fill="none" stroke="${palette.sea}" stroke-width="2.4"/>${rings}</svg>`;
}
// #endregion
// Newspapers do not number their pictures: a type with no caption label and no counter.
const unnumbered = (id, name, captionStyle) => ({ id, name, shortLabel: name, captionPrefix: '',
  numberingTemplate: '', resetOn: 'never', counterFormat: 'decimal', captionStyle });
const resourceTypes = [unnumbered('picture', 'صورة'),
  unnumbered('panel', 'جدول', { position: 'above', fontSize: pt(10) })]; // tables titled above
// The prayer times, a table set right to left like the page: its first column is on the right.
const cell = (content, extra = {}) => ({ content, ...extra });
const PRAYERS = [['الفجر', '٥:٤١'], ['الشروق', '٧:٠٦'], ['الظهر', '١٢:٥٢'], ['العصر', '٤:١٧'],
  ['المغرب', '٦:٣٨'], ['العشاء', '٧:٥٤']];
const prayerTable = { headerRowCount: 1, rows: [
  PRAYERS.map(([name]) => cell(name, { isHeader: true, align: 'center' })),
  PRAYERS.map(([, time]) => cell(time, { align: 'center' }))] };
const resources = [{ id: 'prayer', typeId: 'panel', kind: 'table', createdAt: 0, updatedAt: 0,
  table: { model: prayerTable }, placement: { position: 'bottom', span: 'page' },
  caption: '**مواقيت الصلاة** في رأس المرجان، الخميس ١ أكتوبر' },
{ id: 'route', typeId: 'picture', kind: 'svg', createdAt: 0, updatedAt: 0,
  svg: { fileId: 'route.svg', width: 2220, height: 440 }, placement: { position: 'here' },
  caption: '**مسار الخط الأول:** ثماني عشرة محطة بين الميناء شرقًا والجامعة غربًا.',
  note: 'رسم: الساحل',
  altText: t({ en: 'Map: a blue tram line along a stretch of coast, from the port on the right '
    + 'to the university on the left, with eighteen stations marked as rings.',
  es: 'Mapa: una línea de tranvía azul a lo largo de la costa, del puerto a la derecha a la '
    + 'universidad a la izquierda, con dieciocho estaciones marcadas con anillos.' }) }];

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = { // every face the pages use, loaded before the build (gotcha: fonts-first)
  'Aref Ruqaa': ['700'], // NAME: the nameplate
  'Noto Kufi Arabic': ['400', '600', '700', '800', '900'], // HEAD: headlines, flags, labels
  'Noto Naskh Arabic': ['400', '700'], // TEXT: the stories, captions; bold emphasis
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
await loadFonts(FONTS, markdown);
// Each Arabic face's letters live in a file of their own (gotcha: arabic-fonts-subset).
await loadArabicFonts(FONTS, markdown + JSON.stringify(resources));
await loadSvg('route.svg', routeSvg());
const doc = await buildWithFonts(() => buildDocument({ markdown, resources }, config()), markdown);
showBook(doc, { title: t({ en: 'A two-column Arabic newspaper page',
  es: 'Una página de periódico árabe a dos columnas' }) });
offerPdf(() => renderToPdf(doc, { fontProvider: arabicPdfProvider, resourceBytes: imageBytes }),
  `${RECIPE}.pdf`);

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

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

// ─── Kit · fonts 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 · pdf v2 ── the same in every recipe that exports a PDF
/** The Fontsource files the screen used, as TrueType: the nearest weight the
 *  family ships, upright if it has no italic; latin, then what the face's
 *  letters need (kitSubsetsFor). */
async function fontsourceProvider(family, weight, style, request) {
  const id = fontsourceId(family);
  const meta = await fontsourceMeta(family);
  const weights = meta?.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && meta && !meta.styles.includes('italic') ? 'normal' : style;
  const text = String.fromCodePoint(...(request?.codePoints ?? []));
  const more = kitSubsetsFor(text, meta);
  const files = await Promise.all(['latin', ...more].map(async (subset) => {
    const res = await fetch(`https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-${subset}-${w}-${s}.woff2`);
    if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} ${subset}`);
    return decompressWoff2(new Uint8Array(await res.arrayBuffer()));
  }));
  return files.length === 1 ? files[0] : files;
}

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

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

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

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

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

/** The arabic file of a face. */
function arabicFileUrl(family, weight, style) {
  const id = fontsourceId(family);
  return `https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-arabic-${weight}-${style}.woff2`;
}

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

/** The PDF font provider for recipes with Arabic faces: a family with an
 *  arabic subset gets its arabic file when its pages set Arabic letters
 *  (`request.codePoints`), then its latin file, and its latin-ext file for
 *  the letters beyond latin (transliteration: ā ḥ ʿ). The arabic file comes
 *  first: it also holds the space and the brackets, so a line of Arabic is
 *  shaped as one run and not cut at every space. Any other family goes to
 *  fontsourceProvider (the "pdf" block). */
async function arabicPdfProvider(family, weight, style, request) {
  if (!(await isArabicFamily(family))) return fontsourceProvider(family, weight, style, request);
  const meta = await fontsourceMeta(family);
  const weights = meta.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && !meta.styles.includes('italic') ? 'normal' : style;
  const wanted = [...(request?.codePoints ?? [])];
  const id = fontsourceId(family);
  const urls = [];
  if (!wanted.length || wanted.some(inArabicRange)) urls.push(arabicFileUrl(family, w, s));
  urls.push(`https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-latin-${w}-${s}.woff2`);
  if (meta.subsets.includes('latin-ext') && wanted.some((cp) => /[Ā-˿Ḁ-ỿ]/u.test(String.fromCodePoint(cp)))) {
    urls.push(`https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-latin-ext-${w}-${s}.woff2`);
  }
  return Promise.all(urls.map(async (url) => {
    const res = await fetch(url);
    if (!res.ok) throw new Error(`Fontsource file ${url} (${res.status})`);
    return decompressWoff2(new Uint8Array(await res.arrayBuffer()));
  }));
}

// ─── Kit · book v1 ── books bound on either edge · postext.dev/cookbook
// A book bound on the right (Arabic, Hebrew or Persian text, vertical
// Chinese, or page.binding 'right') opens from what a Latin reader calls
// the back: page 1 lies alone on the left of the spine, then [3 | 2].

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

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

## Variações

### Três colunas nas notas breves, quatro numa página mais larga

A faixa é um boxe com colunas próprias, então pode ter mais que as duas do texto.

```diff
-:::columns{count=3 breaks="2,3"}
+:::columns{count=4 breaks="2,3,4"}
```

### Algarismos europeus para um jornal do Magreb

```diff
-  locale: 'ar', // written out, never LANG (gotcha: arabic-locale-tag): rtl, digits ٠–٩
+  locale: 'ar-MA', // rtl, digits 0–9
```

## Erros comuns

- **Marque um livro árabe como 'ar', não com LANG.** As edições de uma receita são en e es, mas uma amostra árabe é árabe nas duas: `locale: LANG` a comporia da esquerda para a direita, a encadernaria pela esquerda, numeraria as suas páginas 1 2 3 e chamaria as suas figuras de Figure ou Figura. Escreva você mesmo a marcação: 'ar' (algarismos arábico-índicos, a convenção do Machrek), uma região como 'ar-EG' ou 'ar-SA', ou 'ar-MA', 'ar-DZ' ou 'ar-TN' para uma edição magrebina com algarismos europeus. Uma página latina que só cita árabe mantém o seu próprio locale.
- **Fontes árabes precisam do seu arquivo arabic, pelo bloco arabic.** O Fontsource serve Amiri, Noto Naskh Arabic ou Scheherazade New em um arquivo por subconjunto, e as letras árabes estão no arquivo arabic. loadFonts baixa só latin (e latin-ext), então na tela o árabe vem de uma fonte do sistema e é medido errado, e o fontsourceProvider entrega ao PDF esse arquivo latin, que imprime caixas vazias. Inclua o bloco arabic do kit, chame loadArabicFonts(FONTS, markdown) depois de loadFonts, com todos os pesos que as páginas usam em árabe listados em FONTS, e passe a renderToPdf fontProvider: arabicPdfProvider.
- **Qualquer objeto headings desativa a quebra de página do H1.** Por padrão, um H1 salta para uma página ímpar (always-odd), mas passar qualquer objeto headings redefine esse padrão, então os capítulos ficam emendados e span: 'page' não faz nada. Declare de novo headings.levels[0].breakBefore: { enabled: true, parity } em toda configuração.
- **:::columns só funciona dentro de um boxe e nunca se divide.** :::columns é ignorado fora de um boxe, e um boxe que se divide nunca corta dentro de um grupo de colunas. O atributo breaks conta blocos filhos, e um boxe aninhado conta como um.
- **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.

- Os horários de oração estão digitados com algarismos arábico-índicos nas células da tabela: `locale` só muda os números que o motor escreve, então uma edição do Magreb precisa digitá-los de novo.

## Créditos

- Receita: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Texto: Two pages of an imaginary Arabic daily, الساحل, and its city, written in Arabic for the recipe: Postext Cookbook, original
- Tipos: Aref Ruqaa (OFL-1.1), Noto Kufi Arabic (OFL-1.1), Noto Naskh Arabic (OFL-1.1)
- Código: MIT · Conteúdo de exemplo: CC-BY-4.0

## Relacionadas

- [Nº 027 · Primeira página de jornal](https://postext.dev/pt/cookbook/newspaper-front-page.md): Primeira página e página 2 de um semanário local em duas colunas com fio, manchetes na largura da página em boxes e uma faixa de notas em quatro colunas no pé. · Nível 3 (Avançado) · Jornais e boletins
- [Nº 105 · Romance árabe da direita para a esquerda, lombada à direita](https://postext.dev/pt/cookbook/arabic-novel-right-bound.md): A abertura de um romance árabe numa página de 14 × 21 cm: locale 'ar' compõe o texto da direita para a esquerda, encaderna à direita e imprime ١٢ nos fólios. · Nível 2 (Intermediário) · Ficção, teatro e prosa literária
- [Nº 106 · Um relatório bilíngue árabe-inglês](https://postext.dev/pt/cookbook/bilingual-arabic-english-report.md): Relatório anual em árabe com o inglês ao lado: {dir=ltr} em cada bloco inglês, :ltr[…] para nomes latinos nas linhas árabes e uma tabela da esquerda à direita. · Nível 2 (Intermediário) · Relatórios