# Una pagina di Bulaq: il testo incorniciato dal commento

> Il commento grammaticale di Ibn ʿAqīl nella colonna principale, le glosse nella colonna esterna accanto ai passi che spiegano, dentro una doppia cornice.

- Versione HTML: https://postext.dev/it/cookbook/bulaq-framed-page
- Ricetta Nº 114 · Pagina e griglia · Livello 2 (Intermedio) · Output: Canvas, PDF
- Generi: Libri di testo
- 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/bulaq-framed-page/en/p01.webp?v=ad908980), [٢](https://postext.dev/cookbook/bulaq-framed-page/en/p02.webp?v=ad908980), [٣](https://postext.dev/cookbook/bulaq-framed-page/en/p03.webp?v=ad908980), [٤](https://postext.dev/cookbook/bulaq-framed-page/en/p04.webp?v=ad908980), [٥](https://postext.dev/cookbook/bulaq-framed-page/en/p05.webp?v=ad908980), [٦](https://postext.dev/cookbook/bulaq-framed-page/en/p06.webp?v=ad908980)
- PDF: https://postext.dev/cookbook/bulaq-framed-page/en/bulaq-framed-page.pdf?v=ad908980
- Apri nella Sandbox: https://postext.dev/it/sandbox#recipe=bulaq-framed-page&lang=en (.postext: https://postext.dev/cookbook/bulaq-framed-page/en/bulaq-framed-page.postext)
- Ultimo aggiornamento: 2026-10-11
- Altre lingue: [en](https://postext.dev/en/cookbook/bulaq-framed-page.md), [es](https://postext.dev/es/cookbook/bulaq-framed-page.md), [ca](https://postext.dev/ca/cookbook/bulaq-framed-page.md), [de](https://postext.dev/de/cookbook/bulaq-framed-page.md), [fr](https://postext.dev/fr/cookbook/bulaq-framed-page.md), [pt](https://postext.dev/pt/cookbook/bulaq-framed-page.md), [zh](https://postext.dev/zh/cookbook/bulaq-framed-page.md), [ja](https://postext.dev/ja/cookbook/bulaq-framed-page.md), [ar](https://postext.dev/ar/cookbook/bulaq-framed-page.md)

## In breve

Una pagina fatta come i libri arabi stampati al Cairo nell’Ottocento: il testo principale al centro, brevi note su di esso in una colonna stretta sul bordo, e tutta la pagina chiusa da linee stampate.

## Che cosa comporrai

Sei pagine composte come la stamperia di Bulaq e i suoi successori al Cairo stampavano un commento nell’Ottocento. La spiegazione di Ibn ʿAqīl dei primi versi dell’Alfiyya, la grammatica in mille versi di Ibn Mālik, scorre nella colonna principale, con i versi in rosso; nel margine esterno sta una ḥāshiya, brevi glosse che si aprono ognuna con le parole del testo che spiegano, accanto al passo a cui appartengono. Un doppio filetto incornicia la gabbia del testo, con una fascia in testa per il capitolo e il folio, e un filetto singolo separa il testo dal suo margine. Una vera pagina di Bulaq avvolge la ḥāshiya attorno a tre lati del testo; Postext la compone su un solo lato, e questa ricetta lo dice.

**Questa ricetta risponde a:**

- Come impagino una pagina di Bulaq, con il commento che incornicia il testo?

## La risposta breve

```js
// script.js, righe 31–45
// The text runs in the main column of a column-and-a-half layout; the side column, on the
// outer side, takes only boxes with span 'side'. A gloss is written before the passage it
// explains and starts level with its first line, on the page where that passage goes on
// (sideAtColumnEnd: 'after'). A column rule parts the two, as the jadwal of a Bulaq page does.
const layout = { layoutType: 'oneAndHalf', sideColumnRole: 'floats', sideColumnSide: 'outer',
  sideColumnPercent: 31, gutterWidth: mm(7),
  columnRule: { enabled: true, color: col('rule'), lineWidth: pt(0.6) } };
// A gloss is a callout with no box: the margin's own face, its lemma bold in the rubric.
const hashiya = { id: 'hashiya', span: 'side', sideAtColumnEnd: 'after',
  backgroundEnabled: false, borderRadius: pt(0),
  padding: { top: pt(0), right: pt(0), bottom: pt(0), left: pt(0) },
  stripe: { enabled: false }, border: { enabled: false },
  body: { fontFamily: NASKH, fontSize: pt(10), lineHeight: pt(16), color: col('ink'),
    boldColor: col('rubric'), textAlign: 'justify', firstLineIndent: pt(0),
    paragraphSpacing: true } };
```

## Ingredienti

**Insegna**

- [Note a margine](https://postext.dev/it/docs/configuration-styles.md#stili-dei-riquadri): Riquadri composti nella colonna laterale all’altezza del paragrafo che commentano, in un’impaginazione a colonna e mezza con un canale per gli elementi flottanti.
- [Testo, filetti e riquadri nei progetti di pagina](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina): Gli elementi di disegno condivisi da intestazioni, piè di pagina, aperture e pagine di parte: testo con una pillola facoltativa, filetti orizzontali e verticali, e riquadri pieni o incorniciati dipinti nell’ordine dell’array.
- [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**

- [Colonna e mezza](https://postext.dev/it/docs/configuration-page-layout.md#tipi-di-impaginazione)
- [Colonna a margine per gli elementi flottanti](https://postext.dev/it/docs/configuration-page-layout.md#impaginazione)
- [Filetto tra le colonne](https://postext.dev/it/docs/configuration-page-layout.md#filetto-tra-le-colonne)
- [Libri rilegati a destra](https://postext.dev/it/docs/configuration-page-layout.md#rilegatura)
- [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)
- [Versi arabi (bayt in due emistichi)](https://postext.dev/it/docs/document-format.md#verse)
- [Cifre dei numeri generati](https://postext.dev/it/docs/configuration-text.md#lingua-del-documento)
- [Copertine, frontespizi e colophon](https://postext.dev/it/docs/configuration-styles.md#stili-dei-titoli)
- [Stili di titolo](https://postext.dev/it/docs/configuration-styles.md#stili-dei-titoli)
- [Attributi dei titoli](https://postext.dev/it/docs/document-format.md#attributi-dei-titoli)
- [Testatine e folio](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina)
- [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)
- [Riquadri](https://postext.dev/it/docs/configuration-styles.md#stili-dei-riquadri)
- [Aperture progettate](https://postext.dev/it/docs/configuration-text.md#estensione-e-progetto-grafico-avanzato)
- [Testatine secondo il ruolo della pagina](https://postext.dev/it/docs/configuration-page-layout.md#elementi-di-testo)
- [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), [`calloutStyles`](https://postext.dev/it/docs/configuration-styles.md#stili-dei-riquadri), [`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)

## Preparazione

### 1 · La ḥāshiya in una colonna laterale tutta sua

Il codice è [la risposta breve](https://postext.dev/it/cookbook/bulaq-framed-page.md#la-risposta-breve) qui sopra. Un layout a colonna e mezza la cui colonna laterale accoglie solo elementi flottanti tiene il commento fuori dal flusso del testo: ogni glossa è un `:::callout{type="hashiya" span="side"}` scritto prima del passo che spiega, e comincia all’altezza della prima riga di quel passo; `sideAtColumnEnd: 'after'` la tiene accanto al passo quando questo prosegue nella pagina successiva ([Layout](https://postext.dev/it/docs/configuration-page-layout.md#impaginazione)). Il riquadro non ha sfondo, bordo né spaziatura interna, quindi si legge come testo composto nel margine, con il lemma in grassetto, che `boldColor` rende rosso. `sideColumnSide: 'outer'` mette la colonna sul margine esterno di entrambe le pagine: a destra della pagina pari, che sta a destra in un libro rilegato a destra.

![Opening page ٢: الكلام وما يتألف منه.](https://postext.dev/cookbook/bulaq-framed-page/en/p02.webp?v=ad908980)

*Pagina 2: la glossa su «كديز» comincia all’altezza del paragrafo che usa la parola, sul bordo esterno, oltre il filetto di colonna.*

### 2 · Una cornice disegnata per ogni lato della doppia pagina

```js
// script.js, righe 49–79
// Page-level design elements are physical: the frame follows the margins of each side of
// the spread. In a book bound on the right the even page is the right-hand one, its spine
// on its left, so its inner margin is the left one. A heading's design is set in the flow
// and mirrored with the page (inFlow): there 'left' is the sheet's right.
const frame = (parity, withBand = true, inFlow = false) => {
  const left = (parity === 'even') !== inFlow ? M.inner : M.outer;
  const width = TRIM.width - M.inner - M.outer;
  const box = (id, inset, thickness) => ({ kind: 'box', id: `${id}-${parity}`, parity,
    style: { borderColor: col('rule'), borderWidth: pt(thickness) },
    placement: { anchor: { to: 'page', edge: 'top-left' },
      offset: { x: mm(left - 4 + inset), y: mm(M.top - 13 + inset) },
      size: { width: mm(width + 8 - 2 * inset),
        height: mm(TRIM.height - M.top - M.bottom + 17 - 2 * inset) } } });
  return [box('outer', 0, 1.4), box('inner', 1.3, 0.4), ...(withBand ? [
    { kind: 'rule', id: `band-${parity}`, parity, direction: 'horizontal', thickness: pt(0.4),
      color: col('rule'), placement: { anchor: { to: 'page', edge: 'top-left' },
        offset: { x: mm(left - 2.7), y: mm(M.top - 4) },
        size: { width: mm(width + 5.4) } } }] : [])];
};
// The chapter centred in the band, the folio at its outer end. The frame stands off the
// sheet's centre by half the difference of the margins, towards the outer edge.
const SHIFT = (M.inner - M.outer) / 2; // mm
const band = (id, content, parity, edge, x, extra = {}) => ({ kind: 'text', id, content,
  parity, pages: 'body', fontFamily: NASKH, fontWeight: 700, fontSize: pt(10.5),
  color: col('ink'),
  placement: { anchor: { to: 'page', edge }, offset: { x: mm(x), y: mm(M.top - 11) } }, ...extra });
const header = { elements: [...frame('even'), ...frame('odd'),
  band('head-even', '{chapterTitle}', 'even', 'top', SHIFT),
  band('head-odd', '{chapterTitle}', 'odd', 'top', -SHIFT),
  band('folio-even', '{pageNumber}', 'even', 'top-right', -(M.outer + 1), { pages: 'all' }),
  band('folio-odd', '{pageNumber}', 'odd', 'top-left', M.outer + 1, { pages: 'all' })] };
```

La cornice è fatta di tre elementi di design di pagina nell’intestazione: due riquadri con bordo e senza riempimento, a 1,3 mm l’uno dall’altro, e un filetto sotto la fascia che contiene la testatina. Gli elementi di pagina sono fisici, quindi la cornice si costruisce due volte, una per parità, dai margini di quel lato ([Page order and right binding](https://postext.dev/it/docs/arabic-layout.md#ordine-delle-pagine-e-rilegatura-a-destra)). Il folio sta all’estremità esterna della fascia in ogni pagina, aperture comprese; il titolo del capitolo è centrato e omesso nell’apertura, dove il titolo stesso sta sotto di essa.

### 3 · Un frontespizio dentro la stessa cornice

```js
// script.js, righe 83–101
const line = (id, content, y, style) => ({ kind: 'text', id, content, align: 'center',
  overflow: 'wrap', color: col('ink'),
  // Centred in the frame: the title page is an odd page set in the mirrored flow.
  placement: { anchor: { to: 'page', edge: 'top' }, offset: { x: mm(SHIFT), y: mm(y) },
    size: { width: mm(110) } }, ...style });
const titlePage = { id: 'title', span: 'page', runningChapter: false,
  breakBefore: { enabled: true, parity: 'any' }, header: { elements: [] },
  footer: { elements: [] },
  advancedDesign: { enabled: true, slot: { elements: [...frame('odd', false, true),
    line('book', '{titleText}', 64, { fontFamily: RUQAA, fontWeight: 700, fontSize: pt(40),
      lineHeight: 1.3, color: col('rubric') }),
    line('on', '{attr.on}', 88, { fontFamily: NASKH, fontWeight: 700, fontSize: pt(17) }),
    { kind: 'rule', id: 'rule', direction: 'horizontal', thickness: pt(0.75), color: col('rubric'),
      placement: { anchor: { to: 'page', edge: 'top' }, offset: { x: mm(SHIFT), y: mm(104) },
        size: { width: mm(30) } } },
    line('margin', '{attr.margin}', 112, { fontFamily: NASKH, fontSize: pt(13) }),
    line('latin', '{attr.latin}', 196, { fontFamily: NASKH, fontSize: pt(9), italic: true,
      color: col('muted') }),
  ] } } };
```

Il frontespizio riusa la cornice senza la fascia. Il design di un titolo si compone nel flusso e si rispecchia con la pagina, quindi lì la cornice si costruisce con i lati scambiati (`inFlow`): la sua sinistra è la destra del foglio. Le sue righe vengono da attributi del titolo, `on` e `margin`, così tutto il frontespizio è una riga di Markdown, e la riga in caratteri latini sotto cambia con l’edizione.

## 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/bulaq-framed-page

### script.js

```js
// ═══ Postext Cookbook · Nº 114 · A Bulaq page: the text framed by its commentary ════════
// https://postext.dev/en/cookbook/bulaq-framed-page
// Code: MIT · Text: Ibn ʿAqīl, Sharḥ; Ibn Mālik, Alfiyya, ar.wikisource (PD) · Pictures: none
// Fonts: Amiri, Aref Ruqaa (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 = 'bulaq-framed-page';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// Black and a brown-red on a toned paper: the two inks of a Cairo press around 1900.
const palette = {
  ink: '#1d1915', // text and frame rules
  rubric: '#8e3020', // the accent: lemmas of the glosses, the matn, titles
  rule: '#3a312a', // the frame
  muted: '#6a6056', // the note on the text
  paper: '#f6efe0', // a toned 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, the matn and the glosses
const RUQAA = 'Aref Ruqaa'; // the title page and the chapter title
const TRIM = { width: 170, height: 240 }; // mm
const M = { top: 34, bottom: 24, inner: 20, outer: 15 }; // mm: the type area inside the frame

// #region answer: the commentary's column beside the text, both inside one ruled frame
// The text runs in the main column of a column-and-a-half layout; the side column, on the
// outer side, takes only boxes with span 'side'. A gloss is written before the passage it
// explains and starts level with its first line, on the page where that passage goes on
// (sideAtColumnEnd: 'after'). A column rule parts the two, as the jadwal of a Bulaq page does.
const layout = { layoutType: 'oneAndHalf', sideColumnRole: 'floats', sideColumnSide: 'outer',
  sideColumnPercent: 31, gutterWidth: mm(7),
  columnRule: { enabled: true, color: col('rule'), lineWidth: pt(0.6) } };
// A gloss is a callout with no box: the margin's own face, its lemma bold in the rubric.
const hashiya = { id: 'hashiya', span: 'side', sideAtColumnEnd: 'after',
  backgroundEnabled: false, borderRadius: pt(0),
  padding: { top: pt(0), right: pt(0), bottom: pt(0), left: pt(0) },
  stripe: { enabled: false }, border: { enabled: false },
  body: { fontFamily: NASKH, fontSize: pt(10), lineHeight: pt(16), color: col('ink'),
    boldColor: col('rubric'), textAlign: 'justify', firstLineIndent: pt(0),
    paragraphSpacing: true } };
// #endregion

// #region frame: a double rule round the type area and a band for the running head
// Page-level design elements are physical: the frame follows the margins of each side of
// the spread. In a book bound on the right the even page is the right-hand one, its spine
// on its left, so its inner margin is the left one. A heading's design is set in the flow
// and mirrored with the page (inFlow): there 'left' is the sheet's right.
const frame = (parity, withBand = true, inFlow = false) => {
  const left = (parity === 'even') !== inFlow ? M.inner : M.outer;
  const width = TRIM.width - M.inner - M.outer;
  const box = (id, inset, thickness) => ({ kind: 'box', id: `${id}-${parity}`, parity,
    style: { borderColor: col('rule'), borderWidth: pt(thickness) },
    placement: { anchor: { to: 'page', edge: 'top-left' },
      offset: { x: mm(left - 4 + inset), y: mm(M.top - 13 + inset) },
      size: { width: mm(width + 8 - 2 * inset),
        height: mm(TRIM.height - M.top - M.bottom + 17 - 2 * inset) } } });
  return [box('outer', 0, 1.4), box('inner', 1.3, 0.4), ...(withBand ? [
    { kind: 'rule', id: `band-${parity}`, parity, direction: 'horizontal', thickness: pt(0.4),
      color: col('rule'), placement: { anchor: { to: 'page', edge: 'top-left' },
        offset: { x: mm(left - 2.7), y: mm(M.top - 4) },
        size: { width: mm(width + 5.4) } } }] : [])];
};
// The chapter centred in the band, the folio at its outer end. The frame stands off the
// sheet's centre by half the difference of the margins, towards the outer edge.
const SHIFT = (M.inner - M.outer) / 2; // mm
const band = (id, content, parity, edge, x, extra = {}) => ({ kind: 'text', id, content,
  parity, pages: 'body', fontFamily: NASKH, fontWeight: 700, fontSize: pt(10.5),
  color: col('ink'),
  placement: { anchor: { to: 'page', edge }, offset: { x: mm(x), y: mm(M.top - 11) } }, ...extra });
const header = { elements: [...frame('even'), ...frame('odd'),
  band('head-even', '{chapterTitle}', 'even', 'top', SHIFT),
  band('head-odd', '{chapterTitle}', 'odd', 'top', -SHIFT),
  band('folio-even', '{pageNumber}', 'even', 'top-right', -(M.outer + 1), { pages: 'all' }),
  band('folio-odd', '{pageNumber}', 'odd', 'top-left', M.outer + 1, { pages: 'all' })] };
// #endregion

// #region title: the title page, framed like the text pages
const line = (id, content, y, style) => ({ kind: 'text', id, content, align: 'center',
  overflow: 'wrap', color: col('ink'),
  // Centred in the frame: the title page is an odd page set in the mirrored flow.
  placement: { anchor: { to: 'page', edge: 'top' }, offset: { x: mm(SHIFT), y: mm(y) },
    size: { width: mm(110) } }, ...style });
const titlePage = { id: 'title', span: 'page', runningChapter: false,
  breakBefore: { enabled: true, parity: 'any' }, header: { elements: [] },
  footer: { elements: [] },
  advancedDesign: { enabled: true, slot: { elements: [...frame('odd', false, true),
    line('book', '{titleText}', 64, { fontFamily: RUQAA, fontWeight: 700, fontSize: pt(40),
      lineHeight: 1.3, color: col('rubric') }),
    line('on', '{attr.on}', 88, { fontFamily: NASKH, fontWeight: 700, fontSize: pt(17) }),
    { kind: 'rule', id: 'rule', direction: 'horizontal', thickness: pt(0.75), color: col('rubric'),
      placement: { anchor: { to: 'page', edge: 'top' }, offset: { x: mm(SHIFT), y: mm(104) },
        size: { width: mm(30) } } },
    line('margin', '{attr.margin}', 112, { fontFamily: NASKH, fontSize: pt(13) }),
    line('latin', '{attr.latin}', 196, { fontFamily: NASKH, fontSize: pt(9), italic: true,
      color: col('muted') }),
  ] } } };
// #endregion

const config = () => ({
  locale: 'ar', // right to left, bound on the right, digits ٠–٩ (gotcha: arabic-locale-tag)
  colorPalette,
  page: { width: mm(TRIM.width), height: mm(TRIM.height), dpi: 150,
    backgroundColor: col('paper'), margins: { top: mm(M.top), bottom: mm(M.bottom),
      left: mm(M.inner), right: mm(M.outer), mirror: true } },
  layout,
  bodyText: { fontFamily: NASKH, fontSize: pt(12.5), lineHeight: pt(22), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    textAlign: 'justify', firstLineIndent: em(1.2), indentAfterHeading: false,
    optimalLineBreaking: true, avoidWidows: true, avoidOrphans: true },
  headings: { fontFamily: RUQAA, fontWeight: 700, color: col('rubric'), textAlign: 'center',
    levels: [{ level: 1, fontSize: pt(22), lineHeight: pt(32), marginTop: pt(0),
      marginBottom: pt(8), breakBefore: { enabled: true, parity: 'any' } }] },
  headingStyles: [titlePage],
  calloutStyles: [hashiya],
  paragraphStyles: [
    // The matn's bayts: bold and in the rubric, as Ibn ʿAqīl's printers set the Alfiyya.
    { id: 'matn', fontFamily: NASKH, fontWeight: 700, fontSize: pt(12.5),
      lineHeight: pt(23), color: col('rubric'), marginTop: pt(4), marginBottom: pt(6) },
    { id: 'note', fontFamily: NASKH, fontSize: pt(9), lineHeight: pt(13), color: col('muted'),
      boldColor: col('ink'), textAlign: 'justify', firstLineIndent: pt(0), marginTop: pt(10),
      hyphenation: { enabled: true, locale: LANG } },
    { id: 'colophon', fontFamily: NASKH, fontSize: pt(7.5), lineHeight: pt(10),
      color: col('muted'), textAlign: 'left', firstLineIndent: pt(0), marginTop: pt(6) },
  ],
  header, footer: { elements: [] },
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "شرح ابن عقيل"
subtitle: "الكلام وما يتألف منه"
---

# شرح ابن عقيل {style="title" on="على ألفية ابن مالك" margin="وبهامشه حواشٍ على مواضع منه" latin="Ibn ʿAqīl’s commentary on the Alfiyya of Ibn Mālik, with glosses in its margin"}

# الكلام وما يتألف منه

بسم الله الرحمن الرحيم، الحمد لله وحده، وصلاته وسلامه على من لا نبي بعده.

:::callout{type="hashiya" span="side"}
**قوله «ابن مالك»:** هو جمال الدين محمد بن عبد الله بن مالك الطائي الجيّاني، وُلد بجيّان من بلاد الأندلس، ونزل دمشق وبها توفي سنة اثنتين وسبعين وستمئة.

**قوله «ألفية ابن معط»:** هي الدرّة الألفية ليحيى بن عبد المعطي الزواوي، المتوفى بالقاهرة سنة ثمان وعشرين وستمئة، وهي أسبق من ألفية ابن مالك، ولذلك قال: «وهو بسبق حائز تفضيلا».
:::

:::verse{style="matn"}
قال محمد هو ابن مالك || أحمد ربي الله خير مالك
مصليا على النبي المصطفى || وآله المستكملين الشرفا
وأستعين الله في ألفيه || مقاصد النحو بها محويه
تقرب الأقصى بلفظ موجز || وتبسط البذل بوعد منجز
وتقتضي رضا بغير سخط || فائقة ألفية ابن معط
وهو بسبق حائز تفضيلا || مستوجب ثنائي الجميلا
والله يقضي بهبات وافره || لي وله في درجات الآخره
:::

:::verse{style="matn"}
كلامنا لفظ مفيد كاستقم || واسم وفعل ثم حرف الكلم
واحده كلمة والقول عم || وكلمة بها كلام قد يؤم
:::

:::callout{type="hashiya" span="side"}
**قوله «كديز»:** لفظ لا معنى له في كلام العرب، يمثّل به النحاة للمهمل، كما يمثّلون بزيد وعمرو للمستعمل.
:::

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

وإنما قال المصنف «كلامنا» ليُعلم أن التعريف إنما هو للكلام في اصطلاح النحويين لا في اصطلاح اللغويين، وهو في اللغة اسم لكل ما يُتكلم به، مفيدا كان أو غير مفيد.

والكلم اسم جنس، واحده كلمة، وهي إما اسم وإما فعل وإما حرف، لأنها إن دلت على معنى في نفسها غير مقترنة بزمان فهي الاسم، وإن اقترنت بزمان فهي الفعل، وإن لم تدل على معنى في نفسها بل في غيرها فهي الحرف. والكلم ما تركب من ثلاث كلمات فأكثر، كقولك: إن قام زيد.

والكلمة هي اللفظ الموضوع لمعنى مفرد، فقولنا «الموضوع لمعنى» أخرج المهمل كديز، وقولنا «مفرد» أخرج الكلام، فإنه موضوع لمعنى غير مفرد. ثم ذكر المصنف رحمه الله تعالى أن القول يعم الجميع، والمراد أنه يقع على الكلام أنه قول، ويقع أيضا على الكلم والكلمة أنه قول. ثم ذكر أن الكلمة قد يُقصد بها الكلام، كقولهم في «لا إله إلا الله»: كلمة الإخلاص.

:::verse{style="matn"}
بالجر والتنوين والندا وأل || ومسند للاسم تمييز حصل
:::

ذكر المصنف رحمه الله تعالى في هذا البيت علامات الاسم. فمنها الجر، وهو يشمل الجر بالحرف والإضافة والتبعية، نحو: مررت بغلام زيد الفاضل، فالغلام مجرور بالحرف، وزيد مجرور بالإضافة، والفاضل مجرور بالتبعية. وهو أشمل من قول غيره «بحرف الجر»، لأن هذا لا يتناول الجر بالإضافة ولا الجر بالتبعية.

:::callout{type="hashiya" span="side"}
**قوله ﴿وأنتم حينئذ تنظرون﴾:** من سورة الواقعة، الآية الرابعة والثمانون، وقبلها: ﴿فَلَوْلَا إِذَا بَلَغَتِ الْحُلْقُومَ﴾، فمنها قدّر الشارح الجملة المحذوفة.

**قوله «سيبويه»:** هو أبو بشر عمرو بن عثمان بن قنبر، إمام البصريين وصاحب الكتاب، توفي نحو سنة ثمانين ومئة.
:::

ومنها التنوين، وهو على أربعة أقسام: تنوين التمكين، وهو اللاحق للأسماء المعربة كزيد ورجل. وتنوين التنكير، وهو اللاحق للأسماء المبنية فرقا بين معرفتها ونكرتها، نحو: مررت بسيبويه وبسيبويهٍ آخر. وتنوين المقابلة، وهو اللاحق لجمع المؤنث السالم، نحو: مسلمات، فإنه في مقابلة النون في جمع المذكر السالم كمسلمين. وتنوين العوض، وهو على ثلاثة أقسام: عوض عن جملة، وهو الذي يلحق «إذ» عوضا عن جملة تكون بعدها، كقوله تعالى: ﴿وَأَنتُمْ حِينَئِذٍ تَنظُرُونَ﴾، أي حين إذ بلغت الروح الحلقوم، فحذف «بلغت الروح الحلقوم» وأتى بالتنوين عوضا عنه.

وقسم يكون عوضا عن اسم، وهو اللاحق لكل عوضا عما تضاف إليه، نحو: كلٌّ قائم، أي كل إنسان قائم، فحذف إنسان وأتى بالتنوين عوضا عنه. وقسم يكون عوضا عن حرف، وهو اللاحق لجوار وغواش ونحوهما رفعا وجرا، نحو: هؤلاء جوارٍ، ومررت بجوارٍ، فحذفت الياء وأتي بالتنوين عوضا عنها.

:::callout{type="hashiya" span="side"}
**قوله «كقوله»:** البيت لجرير من قصيدة يهجو بها الراعي النميري، والقافية فيه «والعتابا… أصابا»، فأبدل التنوين من ألف الإطلاق.
:::

وتنوين الترنم، وهو الذي يلحق القوافي المطلقة بحرف علة، كقوله:

:::verse{style="matn"}
أقلّي اللوم عاذل والعتابن || وقولي إن أصبت لقد أصابن
:::

فجيء بالتنوين بدلا من الألف لأجل الترنم.

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

:::callout{type="hashiya" span="side"}
**قوله «وهو الخليل»:** الخليل بن أحمد الفراهيدي البصري، شيخ سيبويه وواضع علم العروض، توفي بالبصرة سنة سبعين ومئة، وقيل غير ذلك.
:::

واستعمل المصنف «أل» مكان الألف واللام، وقد وقع ذلك في عبارة بعض المتقدمين، وهو الخليل، واستعمل «مسند» مكان الإسناد له.

:::verse{style="matn"}
بتا فعلت وأتت ويا افعلي || ونون أقبلن فعل ينجلي
:::

ثم ذكر المصنف أن الفعل يمتاز عن الاسم والحرف بتاء فعلت، والمراد بها تاء الفاعل، وهي المضمومة للمتكلم نحو: فعلتُ، والمفتوحة للمخاطب نحو: تباركتَ، والمكسورة للمخاطبة نحو: فعلتِ. ويمتاز أيضا بتاء أتت، والمراد بها تاء التأنيث الساكنة، نحو: نعمت وبئست، فاحترزنا بالساكنة عن اللاحقة للأسماء، فإنها تكون متحركة بحركة الإعراب، نحو: هذه مسلمةٌ، ورأيت مسلمةً، ومررت بمسلمةٍ.

:::callout{type="hashiya" span="side"}
**قوله ﴿لنسفعا بالناصية﴾:** من سورة العلق، الآية الخامسة عشرة، وتُكتب النون الخفيفة فيها ألفا في المصحف.

**قوله ﴿لنخرجنك يا شعيب﴾:** من سورة الأعراف، الآية الثامنة والثمانين، من قول الملأ الذين استكبروا من قوم شعيب.
:::

ويمتاز أيضا بياء افعلي، والمراد بها ياء الفاعلة، وتلحق فعل الأمر نحو: اضربي، والفعل المضارع نحو: تضربين، ولا تلحق الماضي. ومما يميز الفعل نون أقبلن، والمراد بها نون التوكيد، خفيفة كانت أو ثقيلة، فالخفيفة نحو قوله تعالى: ﴿لَنَسْفَعًا بِالنَّاصِيَةِ﴾، والثقيلة نحو قوله تعالى: ﴿لَنُخْرِجَنَّكَ يَا شُعَيْبُ﴾. فمعنى البيت: ينجلي الفعل بتاء الفاعل وتاء التأنيث الساكنة وياء الفاعلة ونون التوكيد.

:::paragraphs{style="note" dir=ltr}
**A note on the text.** Ibn ʿAqīl (d. 1367) on the opening of Ibn Mālik’s Alfiyya, from ar.wikisource, without the modern editor’s footnotes and two passages on the tanwīn of rhyme; punctuation added, a few typing slips corrected. The glosses in the margin are written for this page, each opening with the words it explains, as a Bulaq ḥāshiya does.
:::

:::paragraphs{style="colophon" dir=ltr}
Set in Amiri and Aref Ruqaa (SIL OFL) · Text: Ibn ʿAqīl and Ibn Mālik, public domain, from ar.wikisource · Glosses: Postext Cookbook
:::
`; // 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: text, matn, glosses; the Latin lines
  'Aref Ruqaa': ['700'], // RUQAA: the title page and the chapter title
};

// ─── 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 Bulaq page', es: 'Una página de Bulaq' }) });
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

### Metti il commento sul lato interno

Alcune stamperie componevano la ḥāshiya verso il dorso, così il testo mantiene il margine esterno più largo.

```diff
-const layout = { layoutType: 'oneAndHalf', sideColumnRole: 'floats', sideColumnSide: 'outer',
+const layout = { layoutType: 'oneAndHalf', sideColumnRole: 'floats', sideColumnSide: 'inner',
```

### Incornicia ogni glossa

Un filetto sottile attorno a ogni glossa, come in alcune stampe cairote più tarde, è il bordo stesso del riquadro.

```diff
-  stripe: { enabled: false }, border: { enabled: false },
+  stripe: { enabled: false }, border: { enabled: true, width: pt(0.4), color: col('rule') },
```

## 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: Ibn ʿAqīl’s commentary on the opening of the Alfiyya, with Ibn Mālik’s verses, as ar.wikisource gives it (revision 521625), without the modern editor’s footnotes: Ibn ʿAqīl, Ibn Mālik ([fonte](https://ar.wikisource.org/wiki/شرح_ابن_عقيل/المجلد_الأول/الكلام_وما_يتألف_منه)), pubblico dominio
- Testo: The glosses in the margin, the title page, the note on the text and the colophon: Postext Cookbook, originale
- Caratteri: Amiri (OFL-1.1), Aref Ruqaa (OFL-1.1)
- Codice: MIT · Contenuto di esempio: MIT

## Ricette correlate

- [Nº 110 · Una qasida da dīwān, ogni verso in due emistichi](https://postext.dev/it/cookbook/qasida-diwan-page.md): 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. · Livello 2 (Intermedio) · Poesia
- [Nº 001 · Libro di testo con una colonna a margine](https://postext.dev/it/cookbook/textbook-margin-column.md): Una pagina a colonna e mezza con la colonna esterna solo per i flottanti: vi si impilano figure e glosse span 'side', e captionSide vi sposta le didascalie. · Livello 3 (Avanzato) · Libri di testo
- [Nº 032 · Un classico annotato con glosse a margine](https://postext.dev/it/cookbook/annotated-classic-glosses.md): Il tè dei matti di Alice in edizione annotata: glosse verdi e rosse nel margine esterno, accanto alle righe che spiegano, richiamate da una lettera colorata. · Livello 3 (Avanzato) · Narrativa, teatro e prosa letteraria