# A Maghreb edition of an Arabic text, with European digits

> An Arabic chapter printed for Morocco: locale 'ar-MA' keeps the text right to left and bound on the right, and writes every generated number as 1, 2, 3.

- HTML version: https://postext.dev/en/cookbook/maghreb-edition-european-digits
- Recipe Nº 109 · Type & text · Level 1 (Basic) · Outputs: Canvas, PDF
- Genres: Manuals, guides & reference
- Requires postext ≥ 1.15.0, postext-pdf ≥ 1.15.0 · tested with 1.15.0, postext-pdf 1.15.0 on 2026-10-04
- Pages: [41](https://postext.dev/cookbook/maghreb-edition-european-digits/en/p01.webp?v=2b37fc0d), [42](https://postext.dev/cookbook/maghreb-edition-european-digits/en/p02.webp?v=2b37fc0d), [43](https://postext.dev/cookbook/maghreb-edition-european-digits/en/p03.webp?v=2b37fc0d), [44](https://postext.dev/cookbook/maghreb-edition-european-digits/en/p04.webp?v=2b37fc0d)
- PDF: https://postext.dev/cookbook/maghreb-edition-european-digits/en/maghreb-edition-european-digits.pdf?v=2b37fc0d
- Open in Sandbox: https://postext.dev/en/sandbox#recipe=maghreb-edition-european-digits&lang=en (.postext: https://postext.dev/cookbook/maghreb-edition-european-digits/en/maghreb-edition-european-digits.postext)
- Last updated: 2026-10-04
- Other languages: [es](https://postext.dev/es/cookbook/maghreb-edition-european-digits.md), [ca](https://postext.dev/ca/cookbook/maghreb-edition-european-digits.md), [zh](https://postext.dev/zh/cookbook/maghreb-edition-european-digits.md), [ar](https://postext.dev/ar/cookbook/maghreb-edition-european-digits.md)

## In short

In Morocco, Algeria and Tunisia, books in Arabic print their numbers with the digits Europe uses, 1, 2, 3, not with ١، ٢، ٣. One setting, the language and country of the document, gives the whole book those digits.

## What you'll build

A chapter from a guide to the old cities of Morocco, on the gates of Fes, as a Moroccan publisher would print it: 13.5 × 21 cm, Noto Naskh Arabic at 12.5 pt, headings in Noto Kufi Arabic in the green of Fes tilework. The text runs right to left and the book is bound on the right, like any Arabic book, but every number on the page is written 1, 2, 3: the folios 41 to 44, الفصل 3, the section numbers 3-1 and 3-2, the list of gates 1- to 5-, the note markers (1) and the figure number شكل 3-1. That is the usage of the Maghreb, from Morocco to Tunisia, and the page shows it with one setting. [An Arabic novel bound on the right](https://postext.dev/en/cookbook/arabic-novel-right-bound.md) shows the same book with the Mashriq's ١٢.

**This recipe answers:**

- How do I print European digits (1, 2, 3) in an Arabic book for a Maghreb edition?

## The short answer

ar-MA prints 1, 2, 3 in every number the engine writes.

```js
// script.js, lines 40–67
const config = () => ({ // a factory: the engine caches resolved configs per object
  // Written out, never LANG (gotcha: arabic-locale-tag). The Moroccan tag keeps the text right
  // to left and the binding on the right, and sets numerals: 'auto' to European digits: the
  // folios, the chapter and section numbers, the list, the notes and the figure number.
  locale: 'ar-MA',
  colorPalette,
  page: { width: mm(135), height: mm(210), dpi: 150, pageNumbering: { startAt: 41 },
    margins: { top: mm(22), bottom: mm(22), left: mm(19), right: mm(16), mirror: true } },
  layout: { layoutType: 'single' },
  bodyText: { fontFamily: TEXT, fontSize: pt(12.5), lineHeight: pt(20.5), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    textAlign: 'justify', firstLineIndent: em(1.5), indentAfterHeading: false },
  headings: { fontFamily: LABEL, fontWeight: 700, color: col('green'), levels: [
    // Restated: any headings object drops the H1 break (gotcha: headings-drop-h1-break).
    { level: 1, fontSize: pt(26), lineHeight: pt(41), numberingTemplate: 'الفصل {1}',
      numberSeparator: ': ', breakBefore: { enabled: true, parity: 'odd' },
      marginTop: pt(0), marginBottom: pt(10) },
    { level: 2, fontSize: pt(13), lineHeight: pt(20.5), numberingTemplate: '{1}-{2}',
      numberSeparator: '  ', marginTop: pt(20.5), marginBottom: pt(0) },
  ] },
  orderedLists, footnotes, captionStyle,
  paragraphStyles: [{ id: 'colophon', fontFamily: TEXT, fontSize: pt(8.5), lineHeight: pt(11),
    color: col('muted'), textAlign: 'left', firstLineIndent: pt(0), marginTop: pt(20.5) }],
  header: { elements: [] },
  footer: { elements: [{ kind: 'text', id: 'folio', content: '{pageNumber}', fontFamily: LABEL,
    fontSize: pt(9), color: col('muted'), align: 'center',
    placement: { anchor: { to: 'page', edge: 'bottom' }, offset: { y: mm(-12) } } }] },
});
```

## Ingredients

**Teaches**

- [Digits of the generated numbers](https://postext.dev/en/docs/configuration.md#document-language): numerals ('auto', 'latn', 'arab', 'arabext') picks the digits of every number the engine writes: folios, list and note numbers, heading and figure counters, the pages of the contents and the index. 'auto' follows locale: ١٢٣ for Arabic, 1 2 3 in the Maghreb (ar-MA, ar-DZ, ar-TN). The author's own text is never rewritten.

**Also uses**

- [Right-to-left text](https://postext.dev/en/docs/arabic-layout.md#direction-and-the-bidirectional-algorithm)
- [Arabic as the document language](https://postext.dev/en/docs/arabic-layout.md#starting-an-arabic-book)
- [Books bound on the right](https://postext.dev/en/docs/configuration.md#binding)
- [Arabic fonts](https://postext.dev/en/docs/arabic-layout.md#fonts)
- [Body type](https://postext.dev/en/docs/configuration.md#body-text)
- [Numbered headings](https://postext.dev/en/docs/configuration.md#per-level-overrides)
- [Footnotes](https://postext.dev/en/docs/document-format.md#footnotes)
- [Numbered lists](https://postext.dev/en/docs/configuration.md#ordered-lists)
- [Caption style](https://postext.dev/en/docs/configuration.md#caption-style)
- [PDF export](https://postext.dev/en/docs/configuration.md#generating-pdfs)
- [Paragraphs in the other direction](https://postext.dev/en/docs/arabic-layout.md#document-block-and-inline-direction)
- [Heading attributes](https://postext.dev/en/docs/document-format.md#heading-attributes)
- [Figures exactly here](https://postext.dev/en/docs/document-format.md#block-embed-optional-explicit-inline-placement)
- [Paragraph styles](https://postext.dev/en/docs/configuration.md#paragraph-styles)
- [Fonts embedded in the PDF](https://postext.dev/en/docs/configuration.md#why-a-font-provider)
- [Figures and tables as resources](https://postext.dev/en/docs/document-format.md#resources)
- [Roman front matter](https://postext.dev/en/docs/document-format.md#numbering)

**Config at a glance**

- [`bodyText`](https://postext.dev/en/docs/configuration.md#body-text), [`captionStyle`](https://postext.dev/en/docs/configuration.md#caption-style), [`colorPalette`](https://postext.dev/en/docs/configuration.md#color-palette), [`footer`](https://postext.dev/en/docs/configuration.md#headers--footers), `footnotes`, [`header`](https://postext.dev/en/docs/configuration.md#headers--footers), [`headings`](https://postext.dev/en/docs/configuration.md#headings), [`layout`](https://postext.dev/en/docs/configuration.md#layout), [`locale`](https://postext.dev/en/docs/configuration.md#hyphenation), [`orderedLists`](https://postext.dev/en/docs/configuration.md#ordered-lists), [`page`](https://postext.dev/en/docs/configuration.md#page), [`paragraphStyles`](https://postext.dev/en/docs/configuration.md#paragraph-styles)

**APIs**

- [`buildDocument`](https://postext.dev/en/docs/configuration.md#building-a-document), [`clearMeasurementCache`](https://postext.dev/en/docs/configuration.md#measurement-cache), [`decompressWoff2`](https://postext.dev/en/docs/configuration.md#browser-font-provider-fontsource--woff2), [`registerResourceImage`](https://postext.dev/en/docs/architecture.md#api-surface), [`renderPageToCanvas`](https://postext.dev/en/docs/configuration.md#rendering-a-page-to-a-bitmap), [`renderToPdf`](https://postext.dev/en/docs/configuration.md#generating-pdfs)

**Typefaces**

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

## Method

### 1 · The country picks the digits

The code is [the short answer](#the-short-answer) above. `numerals` is left at `'auto'`, and the engine reads the digits from the tag: `ar-MA`, `ar-DZ`, `ar-TN`, `ar-LY`, `ar-MR` and `ar-EH` give European digits, `ar` alone and the Mashriq regions give ١٢٣ ([Digits and numeral styles](/en/docs/arabic-layout#digits-and-numeral-styles)). Only the numbers the engine writes change: the folio, the heading counters, the list numbers, the note markers, the figure numbers. The years in the text, 789 and 1913, are the author's, typed in the digits of the edition, and the engine never rewrites them. The heading's `{startAt=3}` reads ٣ as well as 3, so the same Markdown serves both editions.

### 2 · Marks around the numbers

```js
// script.js, lines 29–36
// «1-» and «(1)», as Arabic books write them; the number itself follows numerals.
const orderedLists = { color: col('green'), fontWeight: 700, marginTop: pt(0),
  marginBottom: pt(0), levels: [{ level: 1, numberFormat: 'arabic', separator: '-' }] };
const footnotes = { markerTemplate: '({n})', numbering: 'page', noteNumberPosition: 'inline',
  fontSize: pt(10), lineHeight: pt(15), separator: { width: 0.3, color: col('green') } };
// A colon after the label: a full stop after a number reads as a decimal point.
const captionStyle = { fontFamily: TEXT, fontSize: pt(10), color: col('ink'), labelBold: true,
  labelColor: col('green'), labelSeparator: ': ', note: { color: col('muted') } };
```

Arabic books write a list number with a hyphen after it, 1-, and a note marker in parentheses, (1); both templates take the document's digits, so the Mashriq edition prints ١- and (١) from the same settings ([Footnotes](/en/docs/arabic-layout#footnotes)). The caption's label ends in a colon, شكل 3-1:, because a full stop after a number reads as a decimal point. Notes start again at (1) on every page, as most Arabic books number them.

### 3 · A tile band drawn in code

```js
// script.js, lines 120–148
// The star is two squares turned 45°; between four stars a small square. Paths only.
const star = (cx, cy, r) => {
  const pts = [];
  for (let k = 0; k < 16; k++) {
    const a = (k * Math.PI) / 8;
    const d = k % 2 ? r * 0.7654 : r; // where the two squares' sides cross
    pts.push(`${(cx + d * Math.sin(a)).toFixed(2)} ${(cy - d * Math.cos(a)).toFixed(2)}`);
  }
  return `M${pts.join('L')}Z`;
};
function zellige(W, H, S) {
  let stars = '';
  let inner = '';
  let squares = '';
  for (let y = 0; y <= H + S; y += S) {
    for (let x = 0; x <= W + S; x += S) {
      stars += star(x, y, S * 0.47);
      inner += star(x, y, S * 0.2);
      squares += `M${x + S / 2} ${y + S / 2 - S * 0.17}l${S * 0.17} ${S * 0.17}`
        + `l${-S * 0.17} ${S * 0.17}l${-S * 0.17} ${-S * 0.17}Z`;
    }
  }
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${W * 10}" height="${H * 10}" `
    + `viewBox="0 0 ${W} ${H}"><rect width="${W}" height="${H}" fill="${palette.green}"/>`
    + `<path d="${stars}" fill="${palette.cobalt}" stroke="${palette.paper}" stroke-width="0.5"/>`
    + `<path d="${inner}" fill="${palette.paper}"/>`
    + `<path d="${squares}" fill="${palette.ochre}" stroke="${palette.paper}" stroke-width="0.4"/>`
    + '</svg>';
}
```

The figure is an SVG generated in the pen: eight-pointed stars made of two squares turned 45°, small squares between them, in the palette's green, cobalt and ochre. Its caption is Arabic in both editions, numbered by the chapter, `{h1}-{n}`, as the Arabic resource types number their figures.

## The whole recipe

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

- Source folder: https://github.com/drnachio/postext/tree/main/cookbook/maghreb-edition-european-digits

### script.js

```js
// ═══ Postext Cookbook · Nº 109 · A Maghreb edition of an Arabic text, with European digits ═══
// https://postext.dev/en/cookbook/maghreb-edition-european-digits
// Code: MIT · Text: original Arabic prose (CC BY 4.0) · Pattern: drawn in code
// Fonts: Noto Naskh Arabic, Noto Kufi Arabic (SIL OFL 1.1) · Needs postext ≥ 1.15.0
import {
  buildDocument, renderPageToCanvas, clearMeasurementCache, registerResourceImage,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'en'; // @lang: the language of the frame; the chapter is Arabic in both editions
const RECIPE = 'maghreb-edition-european-digits';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// The green and cobalt of Fes tilework, on a white book paper.
const palette = {
  ink: '#1c1d1b', // text
  green: '#1d6650', // the accent: headings, the list numbers, the notes' rule
  cobalt: '#25488a', // the tile's second colour
  ochre: '#c99a3e', // the tile's third colour
  muted: '#62655f', // folios, captions' notes, the colophon
  paper: '#ffffff',
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = Object.entries({ ...palette, 'main-color': palette.green })
  .map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } }));
const [TEXT, LABEL] = ['Noto Naskh Arabic', 'Noto Kufi Arabic'];

// #region marks: list numbers, note markers and figure numbers in the same digits
// «1-» and «(1)», as Arabic books write them; the number itself follows numerals.
const orderedLists = { color: col('green'), fontWeight: 700, marginTop: pt(0),
  marginBottom: pt(0), levels: [{ level: 1, numberFormat: 'arabic', separator: '-' }] };
const footnotes = { markerTemplate: '({n})', numbering: 'page', noteNumberPosition: 'inline',
  fontSize: pt(10), lineHeight: pt(15), separator: { width: 0.3, color: col('green') } };
// A colon after the label: a full stop after a number reads as a decimal point.
const captionStyle = { fontFamily: TEXT, fontSize: pt(10), color: col('ink'), labelBold: true,
  labelColor: col('green'), labelSeparator: ': ', note: { color: col('muted') } };
// #endregion

// #region answer: ar-MA prints 1, 2, 3 in every number the engine writes
const config = () => ({ // a factory: the engine caches resolved configs per object
  // Written out, never LANG (gotcha: arabic-locale-tag). The Moroccan tag keeps the text right
  // to left and the binding on the right, and sets numerals: 'auto' to European digits: the
  // folios, the chapter and section numbers, the list, the notes and the figure number.
  locale: 'ar-MA',
  colorPalette,
  page: { width: mm(135), height: mm(210), dpi: 150, pageNumbering: { startAt: 41 },
    margins: { top: mm(22), bottom: mm(22), left: mm(19), right: mm(16), mirror: true } },
  layout: { layoutType: 'single' },
  bodyText: { fontFamily: TEXT, fontSize: pt(12.5), lineHeight: pt(20.5), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    textAlign: 'justify', firstLineIndent: em(1.5), indentAfterHeading: false },
  headings: { fontFamily: LABEL, fontWeight: 700, color: col('green'), levels: [
    // Restated: any headings object drops the H1 break (gotcha: headings-drop-h1-break).
    { level: 1, fontSize: pt(26), lineHeight: pt(41), numberingTemplate: 'الفصل {1}',
      numberSeparator: ': ', breakBefore: { enabled: true, parity: 'odd' },
      marginTop: pt(0), marginBottom: pt(10) },
    { level: 2, fontSize: pt(13), lineHeight: pt(20.5), numberingTemplate: '{1}-{2}',
      numberSeparator: '  ', marginTop: pt(20.5), marginBottom: pt(0) },
  ] },
  orderedLists, footnotes, captionStyle,
  paragraphStyles: [{ id: 'colophon', fontFamily: TEXT, fontSize: pt(8.5), lineHeight: pt(11),
    color: col('muted'), textAlign: 'left', firstLineIndent: pt(0), marginTop: pt(20.5) }],
  header: { elements: [] },
  footer: { elements: [{ kind: 'text', id: 'folio', content: '{pageNumber}', fontFamily: LABEL,
    fontSize: pt(9), color: col('muted'), align: 'center',
    placement: { anchor: { to: 'page', edge: 'bottom' }, offset: { y: mm(-12) } } }] },
});
// #endregion

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

# أبواب فاس {startAt=3}

::resource{id="zellige"}

لا يدخل المرء فاس العتيقة كما يدخل مدينة حديثة. فالمدينة التي أسّسها إدريس الأول على الضفة اليمنى لوادي فاس سنة 789، ثم بنى ابنه إدريس الثاني ضفتها الأخرى بعد عشرين عامًا، ظلّت قرونًا محاطة بسور لا تُعبر إلا أبوابه. ومن الباب يبدأ كل شيء: منه تدخل القوافل والبضائع، وعنده تُدفع المكوس، وإليه تُنسب الأحياء والأسواق والمقابر.


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

## الأبواب الكبرى

يصعب أن يُحصى عدد أبواب فاس إحصاءً واحدًا، لأن بعضها سُدّ وبعضها فُتح في القرن العشرين، ولأن المؤرخين لا يعدّون الأبواب الصغيرة بين الأحياء. لكن خمسة منها تكفي لرسم صورة المدينة:

1. **باب بوجلود**، المدخل الغربي الذي يعرفه كل زائر. بُني بشكله الحالي سنة 1913، وكُسي من الخارج بزليج أزرق هو لون فاس، ومن الداخل بزليج أخضر هو لون الإسلام.
2. **باب المحروق**، في الشمال الغربي، من العهد الموحدي. تقول الرواية إنه سُمّي بهذا الاسم لأن ثائرًا أُحرق عنده، ولا يثبت ذلك مصدر يُعتمد عليه.
3. **باب الكيسة**، في الشمال، قرب الطريق الصاعد إلى قبور المرينيين، ومنه يُشرف الماشي على المدينة كلها في المساء.
4. **باب الفتوح**، في الجنوب الشرقي، على عدوة الأندلس، وبجانبه مقبرة واسعة تحمل اسمه.
5. **باب الجديد**، في الجنوب، وهو كما يدلّ اسمه أحدث عهدًا من الأبواب الأربعة السابقة، فُتح ليصل المدينة العتيقة بالأحياء التي نشأت خارج سورها.

وليس الترتيب هنا ترتيب أهمية، بل ترتيب الدورة التي يقوم بها الماشي حول السور إذا بدأ من الغرب وسار مع عقارب الساعة. وتستغرق هذه الدورة على القدمين نحو 4 ساعات، إذا لم يتوقف الماشي لشرب الشاي، وهو أمر نادر.[^tour]

## مدينة داخل السور

تمتد فاس البالي داخل أسوارها على نحو 280 هكتارًا، وتضم أكثر من 9000 زقاق، بعضها لا يزيد عرضه على متر واحد. وفي قلبها جامع القرويين، الذي أسّسته فاطمة الفهرية سنة 859، وتحوّل مع الزمن إلى أحد أقدم مراكز التعليم في العالم. وحوله تتوزع الأسواق بحسب الحِرف: سوق العطارين، وسوق النجارين، والدباغة الكبرى التي تُصبغ فيها الجلود في أحواض حجرية كما كانت تُصبغ منذ قرون.

وقد أدرجت منظمة اليونسكو المدينة العتيقة في قائمة التراث العالمي سنة 1981، فصار ترميم الأبواب والأسوار عملًا تتعاقب عليه الهيئات والمهندسون والحرفيون. وفي ورشات الترميم يتعلم الشباب صناعة الزليج من جديد: يُقطع الطين المشويّ قطعًا صغيرة بالمطرقة الحادة، قطعة قطعة، ثم تُصفّ القطع مقلوبة على الأرض حسب الرسم، ويُصبّ عليها الجص، فإذا جفّ قُلبت اللوحة فظهرت النجمة.[^zellige]

## الباب والكتاب

يقول أهل فاس إن من عرف أبواب المدينة عرف المدينة. وقد يصدق هذا على الكتب أيضًا: فلكل كتاب أبوابه، والقارئ الذي يعرف من أين يدخل لا يضيع في أزقته. ولهذا قُسّم هذا الكتاب أبوابًا وفصولًا، ورُقّمت صفحاته بالأرقام التي يقرؤها أهل المغرب في كتبهم وصحفهم ولافتات شوارعهم: 1 و2 و3، لا ١ و٢ و٣.

وليس في ذلك خروج عن العربية. فالأرقام التي يسمّيها الأوروبيون «عربية» وصلت إليهم من الأندلس والمغرب، وكانت تُكتب بهذا الشكل في مخطوطات المغرب قبل أن تصل إلى أوروبا، بينما بقيت الأرقام الهندية المشرقية في مصر والشام والعراق.[^digits] فالكتاب المغربي حين يطبع 41 و42 و43 في أسفل صفحاته لا يقلّد أحدًا، بل يعود إلى ما كان عليه.

[^tour]: يُفضَّل أن تبدأ الدورة صباحًا، قبل أن تشتد الشمس على الجهة الجنوبية من السور.

[^zellige]: تُسمّى القطعة الواحدة من الزليج «فرْمة»، ويحتاج المعلّم إلى عشرات الأشكال المختلفة لرسم نجمة واحدة.

[^digits]: تُعرف الأرقام المغربية في كتب الحساب القديمة باسم «الأرقام الغبارية»، لأن الحُسّاب كانوا يرسمونها على لوح مغطى بالغبار.

:::paragraphs{style="colophon" dir=ltr}
A chapter written in Arabic for the Postext Cookbook, from an invented book on the old cities of Morocco. Set in Noto Naskh Arabic and Noto Kufi Arabic (SIL OFL) · Text: CC BY 4.0.
:::
`; // content.<lang>.md: the same Arabic text in both

// #region art: a band of zellige, eight-pointed stars set in cobalt, green and ochre
// The star is two squares turned 45°; between four stars a small square. Paths only.
const star = (cx, cy, r) => {
  const pts = [];
  for (let k = 0; k < 16; k++) {
    const a = (k * Math.PI) / 8;
    const d = k % 2 ? r * 0.7654 : r; // where the two squares' sides cross
    pts.push(`${(cx + d * Math.sin(a)).toFixed(2)} ${(cy - d * Math.cos(a)).toFixed(2)}`);
  }
  return `M${pts.join('L')}Z`;
};
function zellige(W, H, S) {
  let stars = '';
  let inner = '';
  let squares = '';
  for (let y = 0; y <= H + S; y += S) {
    for (let x = 0; x <= W + S; x += S) {
      stars += star(x, y, S * 0.47);
      inner += star(x, y, S * 0.2);
      squares += `M${x + S / 2} ${y + S / 2 - S * 0.17}l${S * 0.17} ${S * 0.17}`
        + `l${-S * 0.17} ${S * 0.17}l${-S * 0.17} ${-S * 0.17}Z`;
    }
  }
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${W * 10}" height="${H * 10}" `
    + `viewBox="0 0 ${W} ${H}"><rect width="${W}" height="${H}" fill="${palette.green}"/>`
    + `<path d="${stars}" fill="${palette.cobalt}" stroke="${palette.paper}" stroke-width="0.5"/>`
    + `<path d="${inner}" fill="${palette.paper}"/>`
    + `<path d="${squares}" fill="${palette.ochre}" stroke="${palette.paper}" stroke-width="0.4"/>`
    + '</svg>';
}
// #endregion
const [BAND_W, BAND_H] = [100, 58]; // mm: the measure, and a band a little over half as deep
const resources = [{ id: 'zellige', typeId: 'figure', kind: 'svg', createdAt: 0, updatedAt: 0,
  svg: { fileId: 'zellige.svg', width: BAND_W * 10, height: BAND_H * 10 },
  caption: 'زليج من نجوم ثمانية الرؤوس، على طريقة الفسيفساء الفاسية',
  altText: t({ en: 'Eight-pointed cobalt stars outlined in white on a green ground, with small '
    + 'ochre squares between them.', es: 'Estrellas cobalto de ocho puntas perfiladas en blanco '
    + 'sobre fondo verde, con pequeños cuadrados ocre entre ellas.' }) }];

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = { // every face the pages use, loaded before the build (gotcha: fonts-first)
  'Noto Naskh Arabic': ['400', '700'], // TEXT: the chapter, notes, captions; bold emphasis
  'Noto Kufi Arabic': ['400', '700'], // LABEL: headings, folios
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
await loadFonts(FONTS, markdown);
// Each Arabic face's letters live in a file of their own (gotcha: arabic-fonts-subset).
await loadArabicFonts(FONTS, markdown + resources[0].caption);
await loadSvg('zellige.svg', zellige(BAND_W, BAND_H, 13));
const doc = await buildWithFonts(() => buildDocument({ markdown, resources }, config()), markdown);
showBook(doc, { title: t({ en: 'A Maghreb edition with European digits',
  es: 'Una edición magrebí con cifras europeas' }) });
offerPdf(() => renderToPdf(doc, { fontProvider: arabicPdfProvider, resourceBytes: imageBytes }),
  `${RECIPE}.pdf`);

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

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

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

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

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

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

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

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

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

/** The weights and styles a family ships ({ weights: [400, 700], styles: ['normal', 'italic'] }), or null. */
function fontsourceMeta(family) {
  fontsourceMeta.cache ??= new Map();
  const id = fontsourceId(family);
  if (!fontsourceMeta.cache.has(id)) {
    fontsourceMeta.cache.set(id, fetch(`https://api.fontsource.org/v1/fonts/${id}`)
      .then((res) => (res.ok ? res.json() : null), () => null));
  }
  return fontsourceMeta.cache.get(id);
}

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

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

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

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

// ─── Kit · pdf v1 ── the same in every recipe that exports a PDF ──────────────
/** postext-pdf embeds TrueType bytes. Fetch the Fontsource file the screen
 *  used, snapping to a weight the family ships and falling back to upright
 *  when it has no italic: the PDF asks for every face a block could use. */
async function fontsourceProvider(family, weight, style) {
  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 res = await fetch(`https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-latin-${w}-${s}.woff2`);
  if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} (${res.status})`);
  return decompressWoff2(new Uint8Array(await res.arrayBuffer()));
}

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

// ─── Kit · images v1 ── recipes with pictures · postext.dev/cookbook ──────────
/** Registers a photo or PNG for the canvas and keeps its bytes for the PDF.
 *  fetch → ImageBitmap never taints the canvas (a plain cross-origin <img> would). */
async function loadImage(fileId, url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Image not found (${res.status}): ${url}`);
  const bytes = new Uint8Array(await res.arrayBuffer());
  registerResourceImage(fileId, await createImageBitmap(new Blob([bytes])));
  (loadImage.bytes ??= new Map()).set(fileId, bytes);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

## Variations

### Print the Mashriq digits

The Egyptian or Levantine edition of the same chapter: the tag changes, the Markdown does not.

```diff
-  locale: 'ar-MA',
+  locale: 'ar-EG',
```

### Keep a Moroccan locale, print ١٢٣

A setting written out wins over the region's default.

```diff
   locale: 'ar-MA',
+  numerals: 'arab',
```

## Pitfalls

- **Tag an Arabic book 'ar', not with LANG.** A recipe's editions are en and es, but an Arabic sample is Arabic in both: `locale: LANG` would set it left to right, bind it on the left, number its pages 1 2 3 and caption its figures Figure or Figura. Write the tag yourself: 'ar' (Arabic-Indic digits, the Mashriq convention), a region such as 'ar-EG' or 'ar-SA', or 'ar-MA', 'ar-DZ' or 'ar-TN' for a Maghreb edition with European digits. A Latin page that only quotes Arabic keeps its own locale.
- **Arabic faces need their arabic file, through the arabic block.** Fontsource serves Amiri, Noto Naskh Arabic or Scheherazade New as one file per subset, and the Arabic letters are in the arabic file. loadFonts fetches only latin (and latin-ext), so on screen the Arabic comes from a system face and measures wrong, and fontsourceProvider hands the PDF that latin file, which prints empty boxes. List the arabic kit block, call loadArabicFonts(FONTS, markdown) after loadFonts, with every weight the pages set in Arabic listed in FONTS, and give renderToPdf fontProvider: arabicPdfProvider.
- **Any headings object switches off the H1 page break.** By default an H1 breaks to a recto (always-odd), but passing any headings object resets that default, so chapters run on and span: 'page' does nothing. Restate headings.levels[0].breakBefore: { enabled: true, parity } in every config.
- **'1998. ' or '- ' at a paragraph start opens a list.** A paragraph that starts with a number, a period and a space, or with a hyphen and a space, becomes a list item. Put a word joiner (U+2060) before the number, and write dialogue with an em dash.
- **Load every face before layout.** Layout measures text with the faces the browser has loaded and caches the widths, so a face that arrives after the first build leaves wrong line breaks and a PDF that no longer matches the screen. Load every weight and style first, and call clearMeasurementCache() before rebuilding when one arrives late.

## Credits

- Recipe: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Text: “The gates of Fes”, a chapter written in Arabic for the recipe, from an invented book on the old cities of Morocco: Postext Cookbook, original
- Type: Noto Naskh Arabic (OFL-1.1), Noto Kufi Arabic (OFL-1.1)
- Code: MIT · Sample content: CC-BY-4.0

## Related

- [Nº 105 · An Arabic novel set right to left, bound on the right](https://postext.dev/en/cookbook/arabic-novel-right-bound.md): The opening of an Arabic novel on a 14 × 21 cm page: locale 'ar' sets the text right to left, binds the book on the right and prints ١٢ for its folios. · Level 2 (Intermediate) · Fiction, drama & literary prose
- [Nº 107 · An Arabic research article with notes, citations, index](https://postext.dev/en/cookbook/arabic-research-article.md): An Arabic journal article: notes «(١)» numbered per page, CSL citations among them in the Arabic locale, and an index sorted without the article ال. · Level 3 (Advanced) · Papers & academic
- [Nº 081 · Dates and acronyms upright in vertical text](https://postext.dev/en/cookbook/chinese-dates-upright.md): Two founding documents of 1912 set vertically, bound on the right: two-digit numbers stand upright in one cell unaided, and :tcy and :upright mark the rest. · Level 2 (Intermediate) · Textbooks, Single sheets & ephemera