# Una qasida da dīwān, ogni verso in due emistichi

> Un solo blocco :::verse compone i quarantasei bayt di al-Mutanabbī in due colonne di emistichi, ogni metà allungata con le kashida fino a una sola larghezza.

- Versione HTML: https://postext.dev/it/cookbook/qasida-diwan-page
- Ricetta Nº 110 · Caratteri e testo · Livello 2 (Intermedio) · Output: Canvas, PDF
- Generi: Poesia
- Richiede postext ≥ 1.28.0, postext-pdf ≥ 1.28.0 · provata con 1.31.0, postext-pdf 1.31.0 il 2026-10-13
- Pagine: [١](https://postext.dev/cookbook/qasida-diwan-page/en/p01.webp?v=beeae2e3), [٢](https://postext.dev/cookbook/qasida-diwan-page/en/p02.webp?v=beeae2e3), [٣](https://postext.dev/cookbook/qasida-diwan-page/en/p03.webp?v=beeae2e3), [٤](https://postext.dev/cookbook/qasida-diwan-page/en/p04.webp?v=beeae2e3)
- PDF: https://postext.dev/cookbook/qasida-diwan-page/en/qasida-diwan-page.pdf?v=beeae2e3
- Apri nella Sandbox: https://postext.dev/it/sandbox#recipe=qasida-diwan-page&lang=en (.postext: https://postext.dev/cookbook/qasida-diwan-page/en/qasida-diwan-page.postext)
- Ultimo aggiornamento: 2026-10-11
- Altre lingue: [en](https://postext.dev/en/cookbook/qasida-diwan-page.md), [es](https://postext.dev/es/cookbook/qasida-diwan-page.md), [ca](https://postext.dev/ca/cookbook/qasida-diwan-page.md), [de](https://postext.dev/de/cookbook/qasida-diwan-page.md), [fr](https://postext.dev/fr/cookbook/qasida-diwan-page.md), [pt](https://postext.dev/pt/cookbook/qasida-diwan-page.md), [zh](https://postext.dev/zh/cookbook/qasida-diwan-page.md), [ja](https://postext.dev/ja/cookbook/qasida-diwan-page.md), [ar](https://postext.dev/ar/cookbook/qasida-diwan-page.md)

## In breve

Una poesia araba classica stampata come la stampano i vecchi libri di poesia: ogni verso diviso in due metà affiancate, entrambe allungate alla stessa larghezza perché le loro estremità si allineino lungo la pagina.

## Che cosa comporrai

Quattro pagine di un dīwān, le poesie raccolte di al-Mutanabbī, come le componevano un secolo fa i tipografi del Cairo: un occhiello con ديوان in Ruqʿa rossa, poi la qaṣīda che recitò davanti a Sayf al-Dawla nel 954, sotto una testata filettata di rosso. Ognuno dei quarantasei bayt è un verso di due emistichi, lo ṣadr a destra e lo ʿajuz a sinistra, entrambi allungati con le kashida fino a una sola larghezza, così le rime in ‑mu scendono lungo il bordo sinistro in linea retta. Il libro è rilegato a destra e i folio contano in cifre indo-arabe. Solo la nota sul testo, alla fine, cambia con l’edizione. [Le poesie Tang di fronte ai versi inglesi](https://postext.dev/it/cookbook/tang-poems-facing-english.md) compone la poesia cinese classica sulla sua griglia.

**Questa ricetta risponde a:**

- Come compongo la poesia araba classica con ogni bayt in due emistichi?

## La risposta breve

```js
// script.js, righe 33–46
// In the Markdown, a :::verse block takes one bayt a line, the ṣadr and the ʿajuz parted
// by ||:
//   :::verse{style="bayt"}
//   عَلى قَدْرِ أهْلِ العَزْم تأتي العَزائِمُ || وَتأتي علَى قَدْرِ الكِرامِ المَكارمُ
//   :::
// The ṣadr goes on the right, the ʿajuz on the left, both stretched to the width of the
// widest half with a gap of 2 em between them. The style gives the poem its face and a
// leading deep enough for the harakat: 1.9 × the size.
const bayt = { id: 'bayt', fontFamily: NASKH, fontSize: pt(14), lineHeight: pt(26.6),
  color: col('ink'), marginTop: pt(LEAD / 2), marginBottom: pt(LEAD) };
// Justified lines lengthen their words with kashidas (tatweel) before they open the
// spaces wide: 'auto' is the default in an Arabic document, written out here to say so.
// A hemistich may stretch a word twice as far as a line of prose does: 1.2 em.
const bodyKashida = { kashida: 'auto', kashidaPatterns: 'naskh', kashidaMaxLength: 0.6 };
```

## Ingredienti

**Insegna**

- [Versi arabi (bayt in due emistichi)](https://postext.dev/it/docs/document-format.md#verse): :::verse compone una poesia con un bayt per riga, il ṣadr dal lato d’inizio e l’ʿajuz dal lato di fine, ogni emistichio giustificato su una larghezza comune con kashide e spazi perché le lettere della rima si allineino; un bayt troppo largo viene sfalsato, mai diviso tra le pagine, e la riga che lo introduce resta con esso.
- [Giustificazione con la kashida](https://postext.dev/it/docs/justification.md#la-kashida-nel-testo-arabo): Una riga araba giustificata assorbe il suo margine negli spazi tra le parole e nelle kashide, tatwil interi inseriti tra due lettere legate nei punti che le regole del naskh giudicano migliori (mai dopo ا د ر و, mai dentro lām-alif), invece di spaziare le lettere; attiva per impostazione predefinita nei libri in scrittura araba, disattivata nei caratteri ruqʿa.
- [Testo da destra a sinistra](https://postext.dev/it/docs/arabic-layout.md#direzione-e-algoritmo-bidirezionale): direction imposta la direzione di base del documento: 'auto' (il valore predefinito) la ricava dalla scrittura di locale, quindi 'ar', 'fa' o 'he' vanno da destra a sinistra; l’algoritmo bidirezionale (UAX #9) ordina le parole latine e i numeri dentro ogni riga, e il libro si rilega a destra.

**Usa anche**

- [Font arabi](https://postext.dev/it/docs/arabic-layout.md#font)
- [L’arabo come lingua del documento](https://postext.dev/it/docs/arabic-layout.md#iniziare-un-libro-arabo)
- [Libri rilegati a destra](https://postext.dev/it/docs/configuration-page-layout.md#rilegatura)
- [Cifre dei numeri generati](https://postext.dev/it/docs/configuration-text.md#lingua-del-documento)
- [Aperture progettate](https://postext.dev/it/docs/configuration-text.md#estensione-e-progetto-grafico-avanzato)
- [Attributi dei titoli](https://postext.dev/it/docs/document-format.md#attributi-dei-titoli)
- [Stili di titolo](https://postext.dev/it/docs/configuration-styles.md#stili-dei-titoli)
- [Copertine, frontespizi e colophon](https://postext.dev/it/docs/configuration-styles.md#stili-dei-titoli)
- [Testatine e folio](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina)
- [Testatine secondo il ruolo della pagina](https://postext.dev/it/docs/configuration-page-layout.md#elementi-di-testo)
- [Colore della carta](https://postext.dev/it/docs/configuration-page-layout.md#pagina)
- [Stili di paragrafo](https://postext.dev/it/docs/configuration-styles.md#stili-di-paragrafo)
- [Paragrafi nell’altra direzione](https://postext.dev/it/docs/arabic-layout.md#direzione-del-documento-del-blocco-e-in-linea)
- [Tavolozza di colori semantica](https://postext.dev/it/docs/configuration-fonts-colors-viewers.md#tavolozza-dei-colori)
- [Esportazione in PDF](https://postext.dev/it/docs/configuration-programmatic-usage.md#generare-pdf)
- [Font incorporati nel PDF](https://postext.dev/it/docs/configuration-programmatic-usage.md#perché-un-provider-di-font)
- [Testatine per sezione](https://postext.dev/it/docs/configuration-styles.md#stili-dei-titoli)

**La configurazione in breve**

- [`bodyText`](https://postext.dev/it/docs/configuration-text.md#testo-corrente), [`colorPalette`](https://postext.dev/it/docs/configuration-fonts-colors-viewers.md#tavolozza-dei-colori), [`footer`](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina), [`header`](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina), [`headingStyles`](https://postext.dev/it/docs/configuration-styles.md#stili-dei-titoli), [`headings`](https://postext.dev/it/docs/configuration-text.md#titoli), [`layout`](https://postext.dev/it/docs/configuration-page-layout.md#impaginazione), [`locale`](https://postext.dev/it/docs/configuration-text.md#sillabazione), [`page`](https://postext.dev/it/docs/configuration-page-layout.md#pagina), [`paragraphStyles`](https://postext.dev/it/docs/configuration-styles.md#stili-di-paragrafo)

**API**

- [`buildDocument`](https://postext.dev/it/docs/configuration-programmatic-usage.md#costruire-un-documento), [`decompressWoff2`](https://postext.dev/it/docs/configuration-programmatic-usage.md#provider-di-font-per-il-browser-fontsource--woff2), [`renderPageToCanvas`](https://postext.dev/it/docs/configuration-programmatic-usage.md#rendere-una-pagina-come-bitmap), [`renderToPdf`](https://postext.dev/it/docs/configuration-programmatic-usage.md#generare-pdf), [`withLoadedFonts`](https://postext.dev/it/docs/configuration-programmatic-usage.md#caricare-i-font-prima-dellimpaginazione)

**Caratteri**

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

## Preparazione

### 1 · Un bayt per riga, le due metà a una sola larghezza

Il codice è nella [risposta breve](https://postext.dev/it/cookbook/qasida-diwan-page.md#la-risposta-breve) qui sopra. Dentro `:::verse` ogni riga è un bayt, e `||` separa i due emistichi, così il Markdown si legge come il testo di Wikisource da cui proviene ([:::verse](https://postext.dev/it/docs/document-format.md#verse)). La poesia misura ogni emistichio, prende la metà più larga come larghezza di entrambe le colonne (fino a metà della giustezza meno lo spazio intermedio) e riempie ogni metà fino a quella larghezza, prima con le kashida e poi con gli spazi tra parole ([Poesia classica](https://postext.dev/it/docs/arabic-layout.md#versi-classici)). Lo stile `bayt` è composto a 14 pt con un passo di 26,6 pt, 1,9 × il corpo, così le shadda e le kasra di righe vicine non si toccano ([Segni vocalici](https://postext.dev/it/docs/arabic-layout.md#segni-vocalici)). Il formato è 17 × 24 cm: a 14 × 21 cm un terzo dei bayt non stava nella sua metà della giustezza di 104 mm e ripiegava su una disposizione sfalsata, ṣadr e ʿajuz su righe proprie.

![Opening page ٢: على قدر أهل العزم.](https://postext.dev/cookbook/qasida-diwan-page/en/p02.webp?v=beeae2e3)

*Pagina 2: ogni emistichio allungato alla larghezza del più largo. Una metà corta prende più kashida, così ogni rima finisce sullo stesso bordo sinistro.*

### 2 · Una fascia di testata in Ruqʿa

```js
// script.js, righe 50–68
const rule = (id, y, thickness) => ({ kind: 'rule', id, direction: 'horizontal',
  thickness: pt(thickness), color: col('rubric'),
  placement: { anchor: { to: 'container', edge: 'top' }, offset: { y: mm(y) },
    size: { width: 'fill' } } });
const opener = {
  enabled: true, minHeight: mm(46),
  slot: { elements: [
    { kind: 'box', id: 'band', reserve: false, style: { backgroundColor: col('tint') },
      placement: { anchor: { to: 'container', edge: 'top' }, offset: { y: mm(4) },
        size: { width: 'fill', height: mm(26) } } },
    rule('band-top', 4, 1.5), rule('band-foot', 30, 0.5),
    { kind: 'text', id: 'title', content: '{titleText}', fontFamily: RUQAA, fontWeight: 700,
      fontSize: pt(34), lineHeight: 1.1, align: 'center', color: col('rubric'),
      placement: { anchor: { to: 'container', edge: 'top' }, offset: { y: mm(7.5) } } },
    { kind: 'text', id: 'metre', content: '{attr.metre}', fontFamily: KUFI, fontWeight: 500,
      fontSize: pt(9), align: 'center', color: col('muted'),
      placement: { anchor: { to: 'container', edge: 'top' }, offset: { y: mm(35) } } },
  ] },
};
```

Il titolo di livello 1 si disegna con la sua grafica: un riquadro colorato filettato di rosso sopra e sotto, il titolo centrato su di esso in Aref Ruqaa, e sotto il metro da un attributo del titolo, `{metre="من البحر الطويل"}`. I caratteri da titolo in Ruqʿa non prendono kashida, quindi il titolo mantiene la sua larghezza naturale ([Giustificazione e kashida](https://postext.dev/it/docs/arabic-layout.md#giustificazione-e-kashida)).

### 3 · Testatine sui lati del foglio

```js
// script.js, righe 95–109
// Running heads stay on the sheet's sides: in a book bound on the right the verso (even)
// is the right-hand page, so its outer edge, where the folio goes, is the right one.
const head = (id, content, parity, edge, x, extra = {}) => ({ kind: 'text', id, content,
  parity, pages: 'body', fontFamily: KUFI, fontWeight: 500, fontSize: pt(8.5),
  color: col('muted'), placement: { anchor: { to: 'page', edge }, offset: { x: mm(x), y: mm(12) } },
  ...extra });
const header = { elements: [
  head('verso-folio', '{pageNumber}', 'even', 'top-right', -OUTER, { color: col('ink') }),
  head('verso-book', '{title}', 'even', 'top-right', -(OUTER + 10)),
  head('recto-rhyme', '{subtitle}', 'odd', 'top-left', OUTER + 10),
  head('recto-folio', '{pageNumber}', 'odd', 'top-left', OUTER, { color: col('ink') }),
] };
const footer = { elements: [head('drop-folio', '{pageNumber}', 'all', 'bottom', 0, {
  pages: 'opener', color: col('ink'),
  placement: { anchor: { to: 'page', edge: 'bottom' }, offset: { y: mm(-12) } } })] };
```

Il testo corre da destra a sinistra, e per lui sinistra e destra significano inizio e fine. Le testatine restano fisiche. In un libro rilegato a destra il verso, una pagina pari, sta a destra nella doppia pagina, quindi il suo folio va in alto a destra e quello del recto in alto a sinistra: entrambi stanno sul margine esterno ([Ordine delle pagine e rilegatura a destra](https://postext.dev/it/docs/arabic-layout.md#ordine-delle-pagine-e-rilegatura-a-destra)). Il solo tag `locale: 'ar'` imposta la direzione, la rilegatura e le cifre indo-arabe.

### 4 · Un occhiello senza nulla nel flusso

```js
// script.js, righe 72–91
const at = (y) => ({ anchor: { to: 'page', edge: 'top' }, offset: { y: mm(y) } });
const line = (id, content, y, style) => ({ kind: 'text', id, content, align: 'center',
  overflow: 'wrap', color: col('ink'), placement: at(y), ...style });
const titlePage = {
  id: 'title', span: 'page', runningChapter: false,
  breakBefore: { enabled: true, parity: 'any' },
  header: { elements: [] }, footer: { elements: [] },
  advancedDesign: { enabled: true, slot: { elements: [
    line('diwan', 'ديوان', 52, { fontFamily: RUQAA, fontWeight: 700, fontSize: pt(64),
      lineHeight: 1.2, color: col('rubric') }),
    line('poet', '{titleText}', 84, { fontFamily: NASKH, fontWeight: 700, fontSize: pt(20) }),
    { kind: 'rule', id: 'rule', direction: 'horizontal', thickness: pt(0.75),
      color: col('rubric'), placement: { anchor: { to: 'page', edge: 'top' },
        offset: { y: mm(100) }, size: { width: mm(24) } } },
    line('rhyme', '{attr.rhyme}', 106, { fontFamily: KUFI, fontWeight: 500, fontSize: pt(11),
      color: col('rubric') }),
    line('latin', '{attr.latin}', 150, { fontFamily: NASKH, fontSize: pt(9.5),
      color: col('muted'), italic: true }),
  ] } },
};
```

L’occhiello è uno stile di titolo con `span: 'page'` e intestazione e piè di pagina propri, vuoti. Il testo del titolo è il nome del poeta, quindi la parola ديوان è testo della grafica, composto a 64 pt sopra di esso, e la riga latina sotto la rima viene dall’attributo `latin`, che ogni edizione scrive nella propria lingua.

## La ricetta completa

Un unico file, composto a partire dalla cartella della ricetta con il testo di esempio e il kit comune del Ricettario già inclusi; costruisce la propria pagina. Per eseguirlo, mettilo in uno `<script type="module">` di una pagina vuota, oppure incollalo nel pannello JS di un nuovo pen di CodePen (come modulo). Importa postext da esm.sh: non c’è niente da installare né da compilare.

- Cartella della ricetta: https://github.com/drnachio/postext/tree/main/cookbook/qasida-diwan-page

### script.js

```js
// ═══ Postext Cookbook · Nº 110 · A qasida on a diwan page, in two hemistichs ═══════════
// https://postext.dev/en/cookbook/qasida-diwan-page
// Code: MIT · Text: al-Mutanabbī, Dīwān, ar.wikisource (PD) · Pictures: none
// Fonts: Amiri, Aref Ruqaa, Noto Kufi Arabic (SIL OFL 1.1) · Needs postext ≥ 1.28.0
import { buildDocument, withLoadedFonts, renderPageToCanvas } from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'en'; // @lang: the language of the sample document ('en' | 'es')
const RECIPE = 'qasida-diwan-page';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// Black text and red rubrics on a warm paper, as a Cairo diwan of the 1900s prints them.
const palette = {
  ink: '#1f1a16', // text: a warm near-black
  rubric: '#9a2b1f', // the accent: titles, the metre, the headpiece rules
  tint: '#f1e6cf', // the headpiece band
  rule: '#b8a27c', // hairlines
  muted: '#6b6156', // running heads and the note on the text
  paper: '#fbf7ee', // a cream paper
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = [
  ...Object.entries(palette).map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } })),
  { id: 'main-color', name: 'rubric (defaults)', value: { hex: palette.rubric, model: 'hex' } },
];
const NASKH = 'Amiri'; // the text: a Bulaq Naskh
const RUQAA = 'Aref Ruqaa'; // display: the titles
const KUFI = 'Noto Kufi Arabic'; // labels: metre, running heads, folios
const [SIZE, LEAD] = [13, 21]; // pt: the prose, at 1.6 × for a lightly vocalised headnote
const [OUTER, TOP] = [18, 23]; // mm: a 17 × 24 cm diwan

// #region answer: one bayt a line, both hemistichs stretched to one width
// In the Markdown, a :::verse block takes one bayt a line, the ṣadr and the ʿajuz parted
// by ||:
//   :::verse{style="bayt"}
//   عَلى قَدْرِ أهْلِ العَزْم تأتي العَزائِمُ || وَتأتي علَى قَدْرِ الكِرامِ المَكارمُ
//   :::
// The ṣadr goes on the right, the ʿajuz on the left, both stretched to the width of the
// widest half with a gap of 2 em between them. The style gives the poem its face and a
// leading deep enough for the harakat: 1.9 × the size.
const bayt = { id: 'bayt', fontFamily: NASKH, fontSize: pt(14), lineHeight: pt(26.6),
  color: col('ink'), marginTop: pt(LEAD / 2), marginBottom: pt(LEAD) };
// Justified lines lengthen their words with kashidas (tatweel) before they open the
// spaces wide: 'auto' is the default in an Arabic document, written out here to say so.
// A hemistich may stretch a word twice as far as a line of prose does: 1.2 em.
const bodyKashida = { kashida: 'auto', kashidaPatterns: 'naskh', kashidaMaxLength: 0.6 };
// #endregion

// #region opener: a headpiece band with the title in Ruqʿa and the metre under it
const rule = (id, y, thickness) => ({ kind: 'rule', id, direction: 'horizontal',
  thickness: pt(thickness), color: col('rubric'),
  placement: { anchor: { to: 'container', edge: 'top' }, offset: { y: mm(y) },
    size: { width: 'fill' } } });
const opener = {
  enabled: true, minHeight: mm(46),
  slot: { elements: [
    { kind: 'box', id: 'band', reserve: false, style: { backgroundColor: col('tint') },
      placement: { anchor: { to: 'container', edge: 'top' }, offset: { y: mm(4) },
        size: { width: 'fill', height: mm(26) } } },
    rule('band-top', 4, 1.5), rule('band-foot', 30, 0.5),
    { kind: 'text', id: 'title', content: '{titleText}', fontFamily: RUQAA, fontWeight: 700,
      fontSize: pt(34), lineHeight: 1.1, align: 'center', color: col('rubric'),
      placement: { anchor: { to: 'container', edge: 'top' }, offset: { y: mm(7.5) } } },
    { kind: 'text', id: 'metre', content: '{attr.metre}', fontFamily: KUFI, fontWeight: 500,
      fontSize: pt(9), align: 'center', color: col('muted'),
      placement: { anchor: { to: 'container', edge: 'top' }, offset: { y: mm(35) } } },
  ] },
};
// #endregion

// #region title: the diwan's half-title, centred on the page
const at = (y) => ({ anchor: { to: 'page', edge: 'top' }, offset: { y: mm(y) } });
const line = (id, content, y, style) => ({ kind: 'text', id, content, align: 'center',
  overflow: 'wrap', color: col('ink'), placement: at(y), ...style });
const titlePage = {
  id: 'title', span: 'page', runningChapter: false,
  breakBefore: { enabled: true, parity: 'any' },
  header: { elements: [] }, footer: { elements: [] },
  advancedDesign: { enabled: true, slot: { elements: [
    line('diwan', 'ديوان', 52, { fontFamily: RUQAA, fontWeight: 700, fontSize: pt(64),
      lineHeight: 1.2, color: col('rubric') }),
    line('poet', '{titleText}', 84, { fontFamily: NASKH, fontWeight: 700, fontSize: pt(20) }),
    { kind: 'rule', id: 'rule', direction: 'horizontal', thickness: pt(0.75),
      color: col('rubric'), placement: { anchor: { to: 'page', edge: 'top' },
        offset: { y: mm(100) }, size: { width: mm(24) } } },
    line('rhyme', '{attr.rhyme}', 106, { fontFamily: KUFI, fontWeight: 500, fontSize: pt(11),
      color: col('rubric') }),
    line('latin', '{attr.latin}', 150, { fontFamily: NASKH, fontSize: pt(9.5),
      color: col('muted'), italic: true }),
  ] } },
};
// #endregion

// #region heads: the book on the verso, the rhyme on the recto, folios outside
// Running heads stay on the sheet's sides: in a book bound on the right the verso (even)
// is the right-hand page, so its outer edge, where the folio goes, is the right one.
const head = (id, content, parity, edge, x, extra = {}) => ({ kind: 'text', id, content,
  parity, pages: 'body', fontFamily: KUFI, fontWeight: 500, fontSize: pt(8.5),
  color: col('muted'), placement: { anchor: { to: 'page', edge }, offset: { x: mm(x), y: mm(12) } },
  ...extra });
const header = { elements: [
  head('verso-folio', '{pageNumber}', 'even', 'top-right', -OUTER, { color: col('ink') }),
  head('verso-book', '{title}', 'even', 'top-right', -(OUTER + 10)),
  head('recto-rhyme', '{subtitle}', 'odd', 'top-left', OUTER + 10),
  head('recto-folio', '{pageNumber}', 'odd', 'top-left', OUTER, { color: col('ink') }),
] };
const footer = { elements: [head('drop-folio', '{pageNumber}', 'all', 'bottom', 0, {
  pages: 'opener', color: col('ink'),
  placement: { anchor: { to: 'page', edge: 'bottom' }, offset: { y: mm(-12) } } })] };
// #endregion

const config = () => ({
  locale: 'ar', // right to left, bound on the right, digits ٠–٩ (gotcha: arabic-locale-tag)
  colorPalette,
  page: { width: mm(170), height: mm(240), dpi: 150, backgroundColor: col('paper'),
    margins: { top: mm(TOP), bottom: mm(22), left: mm(21), right: mm(OUTER), mirror: true } },
  layout: { layoutType: 'single' },
  bodyText: { fontFamily: NASKH, fontSize: pt(SIZE), lineHeight: pt(LEAD), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    textAlign: 'justify', firstLineIndent: em(1.5), indentAfterHeading: false,
    optimalLineBreaking: true, avoidWidows: true, avoidOrphans: true, ...bodyKashida },
  // Each poem opens a page, on either side of the spine.
  headings: { fontFamily: RUQAA, fontWeight: 700, color: col('rubric'),
    levels: [{ level: 1, fontSize: pt(34), breakBefore: { enabled: true, parity: 'any' },
      advancedDesign: opener }] },
  headingStyles: [titlePage],
  paragraphStyles: [bayt,
    { id: 'note', fontFamily: NASKH, fontSize: pt(9.5), lineHeight: pt(14), color: col('muted'),
      boldColor: col('ink'), italicColor: col('muted'), textAlign: 'justify',
      firstLineIndent: pt(0), marginTop: pt(LEAD), hyphenation: { enabled: true, locale: LANG } },
    { id: 'colophon', fontFamily: NASKH, fontSize: pt(8), lineHeight: pt(11),
      color: col('muted'), textAlign: 'left', firstLineIndent: pt(0), marginTop: pt(7) },
  ],
  header, footer,
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "ديوان المتنبي"
subtitle: "قافية الميم"
---

# أبي الطيّب المتنبّي {style="title" rhyme="قافية الميم" latin="The Dīwān of al-Mutanabbī · poems rhyming in mīm"}

# على قدر أهل العزم {metre="من البحر الطويل"}

وقال يمدح سيفَ الدولة ويذكر بناءه قلعةَ الحَدَث الحمراء على ثغر الروم، وقد هزم الدُّمُسْتُق تحت أسوارها، سنة ثلاث وأربعين وثلاثمئة:

:::verse{style="bayt"}
عَلى قَدْرِ أهْلِ العَزْم تأتي العَزائِمُ || وَتأتي علَى قَدْرِ الكِرامِ المَكارمُ
وَتَعْظُمُ في عَينِ الصّغيرِ صغارُها || وَتَصْغُرُ في عَين العَظيمِ العَظائِمُ
يُكَلّفُ سيفُ الدّوْلَةِ الجيشَ هَمّهُ || وَقد عَجِزَتْ عنهُ الجيوشُ الخضارمُ
وَيَطلُبُ عندَ النّاسِ ما عندَ نفسِه || وَذلكَ ما لا تَدّعيهِ الضّرَاغِمُ
يُفَدّي أتَمُّ الطّيرِ عُمْراً سِلاحَهُ || نُسُورُ الفَلا أحداثُها وَالقَشاعِمُ
وَما ضَرّها خَلْقٌ بغَيرِ مَخالِبٍ || وَقَدْ خُلِقَتْ أسيافُهُ وَالقَوائِمُ
هَلِ الحَدَثُ الحَمراءُ تَعرِفُ لوْنَها || وَتَعْلَمُ أيُّ السّاقِيَيْنِ الغَمَائِمُ
سَقَتْها الغَمَامُ الغُرُّ قَبْلَ نُزُولِهِ || فَلَمّا دَنَا مِنها سَقَتها الجَماجِمُ
بَنَاهَا فأعْلى وَالقَنَا يَقْرَعُ القَنَا || وَمَوْجُ المَنَايَا حَوْلَها مُتَلاطِمُ
وَكانَ بهَا مثْلُ الجُنُونِ فأصْبَحَتْ || وَمِنْ جُثَثِ القَتْلى عَلَيْها تَمائِمُ
طَريدَةُ دَهْرٍ ساقَها فَرَدَدْتَهَا || على الدّينِ بالخَطّيّ وَالدّهْرُ رَاغِمُ
تُفيتُ اللّيالي كُلَّ شيءٍ أخَذْتَهُ || وَهُنّ لِمَا يأخُذْنَ منكَ غَوَارِمُ
إذا كانَ ما تَنْوِيهِ فِعْلاً مُضارِعاً || مَضَى قبلَ أنْ تُلقى علَيهِ الجَوازِمُ
وكيفَ تُرَجّي الرّومُ والرّوسُ هدمَها || وَذا الطّعْنُ آساسٌ لهَا وَدَعائِمُ
وَقَد حاكَمُوهَا وَالمَنَايَا حَوَاكِمٌ || فَما ماتَ مَظلُومٌ وَلا عاشَ ظالِمُ
أتَوْكَ يَجُرّونَ الحَديدَ كَأنّمَا || سَرَوْا بِجِيَادٍ ما لَهُنّ قَوَائِمُ
إذا بَرَقُوا لم تُعْرَفِ البِيضُ منهُمُ || ثِيابُهُمُ من مِثْلِها وَالعَمَائِمُ
خميسٌ بشرْقِ الأرْضِ وَالغرْبِ زَحْفُهُ || وَفي أُذُنِ الجَوْزَاءِ منهُ زَمَازِمُ
تَجَمّعَ فيهِ كلُّ لِسْنٍ وَأُمّةٍ || فَمَا يُفْهِمُ الحُدّاثَ إلاّ الترَاجِمُ
فَلِلّهِ وَقْتٌ ذَوّبَ الغِشَّ نَارُهُ || فَلَمْ يَبْقَ إلاّ صَارِمٌ أوْ ضُبارِمُ
تَقَطّعَ ما لا يَقْطَعُ الدّرْعَ وَالقَنَا || وَفَرّ منَ الفُرْسانِ مَنْ لا يُصادِمُ
وَقَفْتَ وَما في المَوْتِ شكٌّ لوَاقِفٍ || كأنّكَ في جَفنِ الرّدَى وهْوَ نائِمُ
تَمُرّ بكَ الأبطالُ كَلْمَى هَزيمَةً || وَوَجْهُكَ وَضّاحٌ وَثَغْرُكَ باسِمُ
تجاوَزْتَ مِقدارَ الشّجاعَةِ والنُّهَى || إلى قَوْلِ قَوْمٍ أنتَ بالغَيْبِ عالِمُ
ضَمَمْتَ جَناحَيهِمْ على القلبِ ضَمّةً || تَمُوتُ الخَوَافي تحتَها وَالقَوَادِمُ
بضَرْبٍ أتَى الهاماتِ وَالنّصرُ غَائِبٌ || وَصَارَ إلى اللّبّاتِ وَالنّصرُ قَادِمُ
حَقَرْتَ الرُّدَيْنِيّاتِ حتى طَرَحتَها || وَحتى كأنّ السّيفَ للرّمحِ شاتِمُ
وَمَنْ طَلَبَ الفَتْحَ الجَليلَ فإنّمَا || مَفاتِيحُهُ البِيضُ الخِفافُ الصّوَارِمُ
نَثَرْتَهُمُ فَوْقَ الأُحَيْدِبِ كُلّهِ || كمَا نُثِرَتْ فَوْقَ العَرُوسِ الدّراهمُ
تدوسُ بكَ الخيلُ الوكورَ على الذُّرَى || وَقد كثرَتْ حَوْلَ الوُكورِ المَطاعِمُ
تَظُنّ فِراخُ الفُتْخِ أنّكَ زُرْتَهَا || بأُمّاتِها وَهْيَ العِتاقُ الصّلادِمُ
إذا زَلِقَتْ مَشّيْتَها ببُطونِهَا || كمَا تَتَمَشّى في الصّعيدِ الأراقِمُ
أفي كُلّ يَوْمٍ ذا الدُّمُسْتُقُ مُقدِمٌ || قَفَاهُ على الإقْدامِ للوَجْهِ لائِمُ
أيُنكِرُ رِيحَ اللّيثِ حتى يَذُوقَهُ || وَقد عَرَفتْ ريحَ اللّيوثِ البَهَائِمُ
وَقد فَجَعَتْهُ بابْنِهِ وَابنِ صِهْرِهِ || وَبالصّهْرِ حَمْلاتُ الأميرِ الغَوَاشِمُ
مضَى يَشكُرُ الأصْحَابَ في فوْته الظُّبَى || لِمَا شَغَلَتْهَا هامُهُمْ وَالمَعاصِمُ
وَيَفْهَمُ صَوْتَ المَشرَفِيّةِ فيهِمِ || على أنّ أصْواتَ السّيوفِ أعَاجِمُ
يُسَرّ بمَا أعْطاكَ لا عَنْ جَهَالَةٍ || وَلكِنّ مَغْنُوماً نَجَا منكَ غانِمُ
وَلَسْتَ مَليكاً هازِماً لِنَظِيرِهِ || وَلَكِنّكَ التّوْحيدُ للشّرْكِ هَازِمُ
تَشَرّفُ عَدْنانٌ بهِ لا رَبيعَةٌ || وَتَفْتَخِرُ الدّنْيا بهِ لا العَوَاصِمُ
لَكَ الحَمدُ في الدُّرّ الذي ليَ لَفظُهُ || فإنّكَ مُعْطيهِ وَإنّيَ نَاظِمُ
وَإنّي لَتَعْدو بي عَطَايَاكَ في الوَغَى || فَلا أنَا مَذْمُومٌ وَلا أنْتَ نَادِمُ
عَلى كُلّ طَيّارٍ إلَيْهَا برِجْلِهِ || إذا وَقَعَتْ في مِسْمَعَيْهِ الغَمَاغِمُ
ألا أيّها السّيفُ الذي لَيسَ مُغمَداً || وَلا فيهِ مُرْتابٌ وَلا منْهُ عَاصِمُ
هَنيئاً لضَرْبِ الهَامِ وَالمَجْدِ وَالعُلَى || وَرَاجِيكَ وَالإسْلامِ أنّكَ سالِمُ
وَلِمْ لا يَقي الرّحمٰنُ حدّيك ما وَقى || وَتَفْليقُهُ هَامَ العِدَى بكَ دائِمُ
:::

:::paragraphs{style="note" dir=ltr}
**A note on the text.** Abū al-Ṭayyib al-Mutanabbī (915–965) recited this qaṣīda before Sayf al-Dawla, the Ḥamdānid prince of Aleppo, in 954, after the prince had rebuilt the fortress of al-Ḥadath on the Byzantine frontier and driven off the army of the Domestikos Bardas Phokas beneath its walls. It runs to forty-six bayts in the ṭawīl metre, all on one rhyme, the letter mīm. The text is the one ar.wikisource gives, with its vowels; three typing slips are corrected, in bayts 12, 16 and 46. The two lines in prose above the poem are ours.
:::

:::paragraphs{style="colophon" dir=ltr}
Set in Amiri, Aref Ruqaa and Noto Kufi Arabic (SIL OFL) · Text: al-Mutanabbī, public domain, from ar.wikisource
:::
`; // content.<lang>.md, inlined by the Cookbook

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = { // every face the pages use, loaded before the build
  Amiri: ['400', '400i', '700'], // NASKH: the poem, the headnote, the poet; the note's Latin
  'Aref Ruqaa': ['700'], // RUQAA: ديوان and the title
  'Noto Kufi Arabic': ['500'], // KUFI: metre, rhyme, running heads and folios
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
await loadFonts(FONTS, markdown);
// The arabic file of each face, which loadFonts leaves out (gotcha: arabic-fonts-subset).
await loadArabicFonts(FONTS, markdown);
const doc = await withLoadedFonts(() => buildDocument({ markdown }, config()),
  { ...kitFonts(FONTS), text: markdown });
showBook(doc, { title: t({ en: 'A qasida on a diwan page',
  es: 'Una casida en una página de diván' }) });
offerPdf(() => renderToPdf(doc, { fontProvider: arabicPdfProvider }), `${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 v3 ── the same in every recipe · postext.dev/cookbook
// Postext loads the faces a config asks for before layout (prepareFonts,
// buildDocumentWithFonts) and asks the kit for the files: Fontsource's, the
// files the PDF embeds too.

/** The options of buildDocumentWithFonts / prepareFonts / withLoadedFonts:
 *  the Fontsource resolver, and the faces of FONTS loaded with the ones the
 *  config names. FONTS = { 'Family Name': ['400', '400i', '700'] }. */
function kitFonts(FONTS = {}) {
  const faces = Object.entries(FONTS).flatMap(([family, specs]) => specs.map((spec) =>
    ({ family, weight: parseInt(spec, 10), style: spec.endsWith('i') ? 'italic' : 'normal' })));
  return { resolve: fontsourceResolver, faces };
}

/** A face's Fontsource files, in a fixed order: latin, then latin-ext and greek
 *  when `text` needs them and the family ships them (kitSubsetsFor), each with
 *  its unicode-range. Null for a weight or slant Fontsource does not ship. */
async function fontsourceResolver(family, weight, style, { text = '' } = {}) {
  const id = fontsourceId(family);
  const meta = await fontsourceMeta(family);
  if (meta && !(meta.weights.includes(weight) && meta.styles.includes(style))) return null;
  kitStatus('Loading fonts…');
  const at = await fontsourceAt(id);
  return ['latin', ...kitSubsetsFor(text, meta)].map((subset) => ({
    source: `${at}files/${id}-${subset}-${weight}-${style}.woff2`,
    unicodeRange: kitRanges()[subset],
  }));
}

/** The unicode-range of each Fontsource file the kit loads (a function: the
 *  kit is inlined after the pen's code, which runs before a const would be set). */
function kitRanges() {
  return {
    latin: 'U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,'
      + 'U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD',
    'latin-ext': 'U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,'
      + 'U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF',
    greek: 'U+0370-03FF',
  };
}

/** For the cjk, arabic and comics blocks, which add their own files: the
 *  faces of `faces` = { 'Family Name': ['400', '400i', '700'] }. `text` is the sample:
 *  č ł † α χ also load latin-ext and greek files (kitSubsetsFor). With
 *  `optional`, a face Fontsource does not ship is skipped instead of failing.
 *  The files are added once all have loaded, in the order asked (latin, then
 *  latin-ext, then greek), whatever order they arrive in: the last one added
 *  wins a character two files hold. Resolves to the number of faces added. */
async function loadFonts(faces, text = '', { optional = false } = {}) {
  kitStatus('Loading fonts…');
  const ranges = kitRanges();
  const jobs = [];
  for (const [family, specs] of Object.entries(faces)) {
    const id = fontsourceId(family);
    const todo = [...new Set(specs)].map((spec) => [parseInt(spec, 10), spec.endsWith('i') ? 'italic' : 'normal'])
      .filter(([weight, style]) => !hasFace(family, weight, style)); // before any await
    const at = fontsourceAt(id);
    const meta = optional || /[^\0-ÿ]/u.test(text) ? await fontsourceMeta(family) : null;
    const subsets = ['latin', ...kitSubsetsFor(text, meta)];
    for (const [weight, style] of todo) {
      if (optional && !(meta?.weights.includes(weight) && meta.styles.includes(style))) continue;
      for (const subset of subsets) {
        const url = `${await at}files/${id}-${subset}-${weight}-${style}.woff2`;
        const face = new FontFace(family, `url(${url}) format('woff2')`,
          { weight: String(weight), style, unicodeRange: ranges[subset] });
        jobs.push(face.load().catch(() => {
          if (subset === 'latin' && !optional) throw new Error(`Fontsource has no ${family} ${weight} ${style}`);
        }));
      }
    }
  }
  const ready = await Promise.all(jobs).catch((error) => { kitFail(error); throw error; });
  return ready.filter((face) => face && document.fonts.add(face)).length;
}

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

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

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

/** A package's folder at the one version @5 names now (#766). */
function fontsourceAt(id, u = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@`) {
  return (fontsourceAt.c ??= {})[id] ??= fetch(u + '5/package.json').then((r) => r.json())
    .then((p) => p.version || 5, () => 5).then((v) => `${u}${v}/`);
}

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

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

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

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

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

// ─── Kit · pdf v3 ── the same in every recipe that exports a PDF
/** The Fontsource files the screen used, as TrueType, with their range and
 *  place: the nearest weight the family ships, upright with no italic;
 *  latin, then what its letters need (kitSubsetsFor). */
async function fontsourceProvider(family, weight, style, request) {
  const id = fontsourceId(family);
  const meta = await fontsourceMeta(family);
  const weights = meta?.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && meta && !meta.styles.includes('italic') ? 'normal' : style;
  const text = String.fromCodePoint(...(request?.codePoints ?? []));
  const files = await Promise.all(['latin', ...kitSubsetsFor(text, meta)].map(async (subset, order) => {
    const res = await fetch(`${await fontsourceAt(id)}files/${id}-${subset}-${w}-${s}.woff2`);
    if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} ${subset}`);
    return Object.assign(await decompressWoff2(new Uint8Array(await res.arrayBuffer())),
      { unicodeRange: kitRanges()[subset], order });
  }));
  return files.length === 1 ? files[0] : files;
}

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

// ─── Kit · arabic v2 ── 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. */
async function arabicFileUrl(family, weight, style) {
  const id = fontsourceId(family);
  return `${await fontsourceAt(id)}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 the engine's later round 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(${await 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: ā ḥ ʿ), each marked with its
 *  unicode-range and its place in the order the screen added them (latin
 *  and latin-ext by loadFonts, then arabic): the arabic file also has a
 *  space and brackets, which the browser takes from latin, the file whose
 *  range holds them, and postext-pdf follows it. 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 subsets = !wanted.length || wanted.some(inArabicRange) ? ['arabic', 'latin'] : ['latin'];
  if (meta.subsets.includes('latin-ext') && wanted.some((cp) => /[Ā-˿Ḁ-ỿ]/u.test(String.fromCodePoint(cp)))) {
    subsets.push('latin-ext');
  }
  const at = await fontsourceAt(id);
  return Promise.all(subsets.map(async (subset) => {
    const url = `${at}files/${id}-${subset}-${w}-${s}.woff2`;
    const res = await fetch(url);
    if (!res.ok) throw new Error(`Fontsource file ${url} (${res.status})`);
    const bytes = await decompressWoff2(new Uint8Array(await res.arrayBuffer()));
    return Object.assign(bytes, { unicodeRange: subset === 'arabic' ? arabicRange() : kitRanges()[subset],
      order: ['latin', 'latin-ext', 'greek', 'arabic'].indexOf(subset) });
  }));
}

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

## Varianti

### Segna lo spazio con un ornamento

Alcuni dīwān stampano una piccola stella tra gli emistichi. `ornament` mette un segno al centro dello spazio senza aggiungerlo al testo.

```diff
-:::verse{style="bayt"}
+:::verse{style="bayt" ornament="٭"}
```

### Dai a ogni emistichio la stessa larghezza

Una `width` fissa porta entrambe le colonne a una sola giustezza su ogni pagina del dīwān, qualunque sia la metà più larga di una data poesia.

```diff
-:::verse{style="bayt"}
+:::verse{style="bayt" width=58mm}
```

## Errori frequenti

- **Assegna a un libro arabo il tag 'ar', non LANG.** Le edizioni di una ricetta sono en ed es, ma un esempio arabo è arabo in entrambe: `locale: LANG` lo comporrebbe da sinistra a destra, lo rilegherebbe a sinistra, numererebbe le pagine 1 2 3 e darebbe alle figure didascalie Figure o Figura. Da postext 1.30 il tag è anche la lingua usata per lo shaping del testo (misura, disegno e incorporamento), quindi con un tag inglese o spagnolo un carattere come Markazi Text non disegna le forme arabe delle sue virgolette basse e dei suoi segni di interpunzione, e le righe vanno a capo altrove. Scrivi tu il tag: 'ar' (cifre arabo-indiane, la convenzione del Mashriq), una regione come 'ar-EG' o 'ar-SA', oppure 'ar-MA', 'ar-DZ' o 'ar-TN' per un’edizione del Maghreb con cifre europee. Una pagina latina che si limita a citare l’arabo mantiene la propria lingua.
- **I caratteri arabi hanno bisogno del loro file arabic, tramite il blocco arabic.** Fontsource serve Amiri, Noto Naskh Arabic o Scheherazade New come un file per sottoinsieme, e le lettere arabe stanno nel file arabic. loadFonts scarica solo latin (e latin-ext), così a schermo l’arabo viene da un font di sistema ed è misurato male, e fontsourceProvider passa al PDF quel file latin, che stampa riquadri vuoti. Elenca il blocco arabic del kit, chiama loadArabicFonts(FONTS, markdown) dopo loadFonts, con ogni peso che le pagine compongono in arabo elencato in FONTS, e passa a renderToPdf fontProvider: arabicPdfProvider.

## Crediti

- Ricetta: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Testo: The qasida ʿAlā qadri ahli l-ʿazmi taʾtī l-ʿazāʾimu, as ar.wikisource gives it (revision 447620), with its vowels: al-Mutanabbī ([fonte](https://ar.wikisource.org/wiki/على_قدر_أهل_العزم_تأتي_العزائم)), pubblico dominio
- Testo: The headnote in Arabic, the note on the text and the colophon: Postext Cookbook, originale
- Caratteri: Amiri (OFL-1.1), Aref Ruqaa (OFL-1.1), Noto Kufi Arabic (OFL-1.1)
- Codice: MIT · Contenuto di esempio: MIT

## Ricette correlate

- [Nº 083 · Poesie Tang con i versi inglesi a fronte](https://postext.dev/it/cookbook/tang-poems-facing-english.md): Ogni poesia Tang apre un recto colorato e l’inglese di Giles il verso di fronte: uno stile di titolo va alle pagine pari, l’altro alle dispari. · Livello 2 (Intermedio) · Poesia
- [Nº 015 · Poesie composte verso per verso](https://postext.dev/it/cookbook/poetry-collection.md): Ogni poesia è un blocco :::verse scritto come stampato: i rientri del 1918 sono spazi iniziali, i versi a capo sporgono di 2 em, righe vuote tra le strofe. · Livello 2 (Intermedio) · Poesia
- [Nº 043 · Traduzione a fronte, strofa per strofa](https://postext.dev/it/cookbook/bilingual-facing-verse.md): Ogni poesia è un riquadro senza cornice a due colonne: un salto di colonna fisso apre l’inglese sul suo titolo e :::space allinea ogni strofa all’originale. · Livello 2 (Intermedio) · Poesia