# خط زمني مصوَّر على صفحتين متقابلتين

> قالب صفحة مزدوجة ينضّد الخط الزمني لكتاب مدرسي: شريط يعبر الكعب، وصفّان من البطاقات يتقاسمان العرض حين يطول نص إحداها.

- نسخة HTML: https://postext.dev/ar/cookbook/illustrated-timeline-spread
- وصفة رقم 158 · الصفحة والشبكة · المستوى 3 (متقدم) · المخرجات: Canvas, PDF
- الأنواع: الكتب المدرسية
- تتطلب postext ≥ 1.38.0, postext-pdf ≥ 1.38.0 · اختُبرت مع 1.38.0, postext-pdf 1.38.0 بتاريخ 2026-10-17
- الصفحات: [48](https://postext.dev/cookbook/illustrated-timeline-spread/es/p01.webp?v=f06f9b63), [49](https://postext.dev/cookbook/illustrated-timeline-spread/es/p02.webp?v=f06f9b63)
- PDF: https://postext.dev/cookbook/illustrated-timeline-spread/es/illustrated-timeline-spread.pdf?v=f06f9b63
- افتح في Sandbox: https://postext.dev/ar/sandbox#recipe=illustrated-timeline-spread&lang=es (.postext: https://postext.dev/cookbook/illustrated-timeline-spread/es/illustrated-timeline-spread.postext)
- آخر تحديث: 2026-10-17
- لغات أخرى: [en](https://postext.dev/en/cookbook/illustrated-timeline-spread.md), [es](https://postext.dev/es/cookbook/illustrated-timeline-spread.md), [ca](https://postext.dev/ca/cookbook/illustrated-timeline-spread.md), [de](https://postext.dev/de/cookbook/illustrated-timeline-spread.md), [fr](https://postext.dev/fr/cookbook/illustrated-timeline-spread.md), [it](https://postext.dev/it/cookbook/illustrated-timeline-spread.md), [pt](https://postext.dev/pt/cookbook/illustrated-timeline-spread.md), [zh](https://postext.dev/zh/cookbook/illustrated-timeline-spread.md), [ja](https://postext.dev/ja/cookbook/illustrated-timeline-spread.md)

## باختصار

صفحتان متقابلتان من كتاب تاريخ تُنضَّدان كأنهما صفحة واحدة: شريط ملوّن يعبر وسط الكتاب، وتحته ست بطاقات مصوّرة تتقاسم العرض، فتأخذ القصة الأطول البطاقة الأعرض.

## ما الذي ستنضده

الصفحتان 48 و49 من كتاب تاريخ للمرحلة الإعدادية: «طريق الورق»، ألف عام من الصنعة من ورشة تساي لون إلى حجر الطحن عند كيلر. تبدأ الصفحة اليسرى بالعنوان وفقرتين، وتبدأ اليمنى بصندوق يشرح كيف كانت الورقة تُصنع باليد. ويمرّ الخط الزمني في الوسط: شريط نيلي لآسيا وشريط بلون الطين المحروق لأوروبا، يبدأ في الصفحة اليسرى ويعبر الكعب. وتحته ست بطاقات لكلٍّ منها رسمها، معلّقة بالشريط بنقطة وخط قصير. وتتقاسم البطاقات العرض: بطاقة 1844، صاحبة القصة الأطول، تأخذ عرضًا من جارتيها (مم واحد في النسخة الإسبانية و7 مم في اليابانية)، وتتحرك نقطتها معها. كل الكلمات في Markdown، بالإسبانية والإنجليزية واليابانية، وتعرض هذه الصفحة النسخة الإسبانية.

**تجيب هذه الوصفة عن:**

- كيف أنضّد خطًّا زمنيًّا على صفحتين متقابلتين، مع بطاقات على الصفحتين؟
- كيف أجعل صفًّا من الصناديق يتقاسم عرضه، فيتّسع الصندوق ذو النص الأطول؟

## الجواب المختصر

```js
// script.js, سطرًا 57–85
const pageTemplates = [{
  id: 'timeline',
  spread: true, // two facing pages laid as one sheet; it opens on a verso
  gutter: mm(10), // the band round the spine that frames keep off
  grid: { columns: 2, rows: ROWS, columnGap: mm(2 * PAGE.inner), rowGap: mm(ROW_GAP) },
  frames: [
    { name: 'title', takes: 'h1' },
    { name: 'lead', flow: true, fit: { minScale: 0.8 } },
    { name: 'box', style: 'box', grid: { col: 2, row: 1, rows: 4 }, height: 'fill',
      padding: { right: mm(66) }, fit: { minScale: 0.85 } },
    { name: 'box-picture', layer: 2, width: mm(56), placement: at('#box', 'top-right', -5, 10) },
    { name: 'band-1', style: 'band-asia', grid: { col: 1, row: 5 }, height: mm(BAND) },
    { name: 'band-2', style: 'band-europe', crossGutter: true, width: 'fill', height: mm(BAND),
      padding: { left: mm(2 * PAGE.inner + 4) }, // the colour crosses the fold, the words do not
      placement: at('#band-1', 'right-of') },
    ...cards.map(card),
    { name: 'colophon', style: 'colophon', optional: true, width: mm(170),
      placement: at('page', 'bottom-right', -PAGE.outer, -7) },
  ],
  groups: [
    { name: 'opening', kind: 'stack', grid: { col: 1, row: 1, rows: 4 }, gap: mm(4),
      frames: ['title', 'lead'] },
    // A card whose text runs past its drawn height takes width from its neighbours first;
    // only when they have none to give does the row grow taller.
    { name: 'asia', kind: 'row', gap: mm(5), frames: ['c1', 'c2', 'c3'] },
    { name: 'europe', kind: 'row', gap: mm(5), frames: ['c4', 'c5', 'c6'] },
  ],
  decoration: { elements: [ground(), ...cards.flatMap(marks)] },
}];
```

## المكونات

**تعلّم**

- [قوالب الصفحتين المتقابلتين](https://postext.dev/ar/docs/composed-pages.md#الصفحتان-المتقابلتان): القالب الذي فيه spread: true ينضّد صفحتين متقابلتين ورقةً واحدة ابتداءً من الصفحة اليسرى؛ والإطار الذي فيه crossGutter يعبر الكعب، وتبتعد الإطارات الأخرى عن شريط الهامش الداخلي.
- [إطارات تكبر داخل مجموعة](https://postext.dev/ar/docs/composed-pages.md#حين-يطول-النص): رصّة أو صف من إطارات صفحة مركّبة: يطول الإطار بطول نصه ولا يقل عن minHeight، فيدفع الإطارات التي تليه وما ثُبّت عليها.
- [زخرفة مثبّتة بالإطارات](https://postext.dev/ar/docs/composed-pages.md#الزخرفة-والترويسات-والطبقات): تُوضع الخطوط والصناديق والصور والنصوص القصيرة في زخرفة القالب بعد إطاراته، فيتبع العنصرُ المثبّت بـ"#إطار" ذلك الإطارَ أينما حرّكته مجموعته أو وسّعته.

**تستخدم أيضًا**

- [الصفحات المركّبة](https://postext.dev/ar/docs/composed-pages.md#الصفحات-المركّبة)
- [ألسنة الإطارات المرقّمة](https://postext.dev/ar/docs/configuration-callouts.md#أنماط-الإطارات)
- [إطارات التنبيه](https://postext.dev/ar/docs/configuration-callouts.md#أنماط-الإطارات)
- [تثبيت عناصر التصميم](https://postext.dev/ar/docs/configuration-headers-footers.md#تموضع-العناصر)
- [الترويسات وأرقام الصفحات](https://postext.dev/ar/docs/configuration-headers-footers.md#رؤوس-الصفحات-وتذييلاتها)
- [هوامش متناظرة](https://postext.dev/ar/docs/configuration-page-layout.md#الهوامش-المتناظرة)
- [القوائم المرقّمة](https://postext.dev/ar/docs/configuration-lists-math.md#القوائم-المرقّمة)
- [الخطوط الصينية واليابانية والكورية](https://postext.dev/ar/docs/configuration-pdf-output.md#خطوط-الصينية-واليابانية-والكورية)
- [لوحة ألوان دلالية](https://postext.dev/ar/docs/configuration-fonts-colors-viewers.md#لوحة-الألوان)
- [صفحات على اللوحة (Canvas)](https://postext.dev/ar/docs/configuration-programmatic-usage.md#رسم-صفحة-في-صورة-نقطية)
- [التصدير إلى PDF](https://postext.dev/ar/docs/configuration-pdf-output.md#توليد-ملفات-pdf)
- [أشكال في هذا الموضع بالضبط](https://postext.dev/ar/docs/document-format-resources.md#التضمين-في-كتلة-اختياري-لوضع-صريح-داخل-التدفق)
- [الخطوط المضمَّنة في PDF](https://postext.dev/ar/docs/configuration-pdf-output.md#لماذا-مزوّد-الخطوط)
- [أنواع موارد مخصّصة](https://postext.dev/ar/docs/configuration-resources.md#أنواع-الموارد)
- [الأشكال والجداول بوصفها موارد](https://postext.dev/ar/docs/document-format-resources.md#الموارد)

**الإعدادات في لمحة**

- [`bodyText`](https://postext.dev/ar/docs/configuration-text.md#نص-المتن), [`calloutStyles`](https://postext.dev/ar/docs/configuration-callouts.md#أنماط-الإطارات), [`colorPalette`](https://postext.dev/ar/docs/configuration-fonts-colors-viewers.md#لوحة-الألوان), [`footer`](https://postext.dev/ar/docs/configuration-headers-footers.md#رؤوس-الصفحات-وتذييلاتها), [`header`](https://postext.dev/ar/docs/configuration-headers-footers.md#رؤوس-الصفحات-وتذييلاتها), [`headings`](https://postext.dev/ar/docs/configuration-headings.md#العناوين), [`layout`](https://postext.dev/ar/docs/configuration-page-layout.md#التخطيط), [`locale`](https://postext.dev/ar/docs/configuration-language.md#تقسيم-الكلمات-بالواصلة), [`orderedLists`](https://postext.dev/ar/docs/configuration-lists-math.md#القوائم-المرقّمة), [`page`](https://postext.dev/ar/docs/configuration-page-layout.md#الصفحة), [`pageTemplates`](https://postext.dev/ar/docs/configuration-composed-pages.md#قوالب-الصفحات), [`resourceTypes`](https://postext.dev/ar/docs/configuration-resources.md#أنواع-الموارد)

**واجهات API**

- [`buildDocument`](https://postext.dev/ar/docs/configuration-programmatic-usage.md#بناء-مستند), [`decompressWoff2`](https://postext.dev/ar/docs/configuration-pdf-output.md#مزوّد-الخطوط-في-المتصفح-fontsource--woff2), [`registerResourceImage`](https://postext.dev/ar/docs/architecture.md#واجهة-البرمجة-المتاحة-api), [`renderPageToCanvas`](https://postext.dev/ar/docs/configuration-programmatic-usage.md#رسم-صفحة-في-صورة-نقطية), [`renderToPdf`](https://postext.dev/ar/docs/configuration-pdf-output.md#توليد-ملفات-pdf), [`withLoadedFonts`](https://postext.dev/ar/docs/configuration-programmatic-usage.md#تحميل-الخطوط-قبل-الإخراج)

**الخطوط**

- Literata (OFL-1.1), Archivo (OFL-1.1), Noto Serif JP (OFL-1.1), Noto Sans JP (OFL-1.1)

## طريقة التحضير

### 1 · ورقة واحدة لصفحتين

```js
// script.js, سطرًا 57–85
const pageTemplates = [{
  id: 'timeline',
  spread: true, // two facing pages laid as one sheet; it opens on a verso
  gutter: mm(10), // the band round the spine that frames keep off
  grid: { columns: 2, rows: ROWS, columnGap: mm(2 * PAGE.inner), rowGap: mm(ROW_GAP) },
  frames: [
    { name: 'title', takes: 'h1' },
    { name: 'lead', flow: true, fit: { minScale: 0.8 } },
    { name: 'box', style: 'box', grid: { col: 2, row: 1, rows: 4 }, height: 'fill',
      padding: { right: mm(66) }, fit: { minScale: 0.85 } },
    { name: 'box-picture', layer: 2, width: mm(56), placement: at('#box', 'top-right', -5, 10) },
    { name: 'band-1', style: 'band-asia', grid: { col: 1, row: 5 }, height: mm(BAND) },
    { name: 'band-2', style: 'band-europe', crossGutter: true, width: 'fill', height: mm(BAND),
      padding: { left: mm(2 * PAGE.inner + 4) }, // the colour crosses the fold, the words do not
      placement: at('#band-1', 'right-of') },
    ...cards.map(card),
    { name: 'colophon', style: 'colophon', optional: true, width: mm(170),
      placement: at('page', 'bottom-right', -PAGE.outer, -7) },
  ],
  groups: [
    { name: 'opening', kind: 'stack', grid: { col: 1, row: 1, rows: 4 }, gap: mm(4),
      frames: ['title', 'lead'] },
    // A card whose text runs past its drawn height takes width from its neighbours first;
    // only when they have none to give does the row grow taller.
    { name: 'asia', kind: 'row', gap: mm(5), frames: ['c1', 'c2', 'c3'] },
    { name: 'europe', kind: 'row', gap: mm(5), frames: ['c4', 'c5', 'c6'] },
  ],
  decoration: { elements: [ground(), ...cards.flatMap(marks)] },
}];
```

يجعل `spread: true` القالبَ ورقةً واحدة بعرض الصفحتين، وتقول كتلة الصفحة الشيء نفسه بـ`spread`. تبدأ الصفحتان المتقابلتان من صفحة زوجية، لذلك يتلقى التنضيد `continuation: { pageIndexOffset: 1, pageNumbering: { startAt: 48 } }`: الصفحة الأولى من هذا المقتطف هي الصفحة 48 من الكتاب، وهي صفحة يسرى، فلا تسبقها صفحة بيضاء. للشبكة عمود لكل صفحة، وبين العمودين ضعف الهامش الداخلي، فلا يقترب من الطيّة إلا الشريط. وللشريط الثاني `crossGutter` وحشوة يسرى من 36 مم: يمتدّ لونه من نهاية الشريط الأول عبر الكعب، وتبدأ كلماته في الصفحة اليمنى، حيث يقرؤها التنضيد.

### 2 · بطاقات تتقاسم العرض

```js
// script.js, سطرًا 48–53
const cards = ['c1', 'c2', 'c3', 'c4', 'c5', 'c6'];
const card = (name, i) => ({ name, style: i < 3 ? 'card-asia' : 'card-europe',
  width: mm((HALF - 10) / 3), minWidth: mm(40), minHeight: mm(CARD),
  shrink: 1, // a card gives width to a neighbour whose text runs past the row
  ...(i % 3 === 0 && { placement: at('container', 'top-left', i ? HALF + 2 * PAGE.inner : 0,
    CARD_TOP) }) }); // where each row starts
```

كل صف من ثلاث بطاقات مجموعة `row`، ولكل بطاقة `minHeight` وهو الارتفاع الذي رُسمت به، وفوقه ارتفاع `auto`. إذا تجاوز نص البطاقة ارتفاع الصف أخذت من جاراتها اللواتي فيهنّ `shrink` أقلَّ عدد من المليمترات الكاملة تحتاجه، وتحتفظ كل جارة بالعرض الذي يتّسع لنصها. ولا يطول الصف إلى الأسفل إلا حين لا يبقى عند البطاقات ما تعطيه. في النسخة الإسبانية تأخذ بطاقة 1844 مليمترًا واحدًا من بطاقة 1282، وفي اليابانية تأخذ 7 مم، ثلاثة من بطاقة 1150 وأربعة من بطاقة 1282؛ وحين تطول النصوص كلها بنسبة 30 %، وهو اختبار منصة الفحص، تأخذ البطاقة الإسبانية 15 مم، وينزل نص الصندوق والمقدّمة إلى 92.5 % و85 %.

### 3 · نقاط تتبع البطاقات

```js
// script.js, سطرًا 89–100
function marks(name, i) {
  const ink = col(i < 3 ? 'asia' : 'europe');
  return [
    { kind: 'rule', id: `${name}-tick`, direction: 'vertical', thickness: pt(1), color: ink,
      placement: { ...at(`#${name}`, 'top', 0, -DROP), size: { height: mm(DROP) } } },
    { kind: 'box', id: `${name}-dot`,
      placement: { ...at(`#${name}`, 'top', 0, -DROP + 0.6), size: { width: mm(4.4),
        height: mm(4.4) } },
      style: { backgroundColor: col('paper'), borderColor: ink, borderWidth: pt(1.6),
        borderRadius: mm(2.2) } },
  ];
}
```

النقاط والخطوط القصيرة هي زخرفة القالب (`decoration`)، مثبّتة بـ`#c1` … `#c6` من حافتها العليا (`top`) ومرفوعة بقدر المسافة إلى الشريط. تُوضع الزخرفة بعد الإطارات، فإذا تحرّكت بطاقة أو اتّسعت بقيت نقطتها فوق وسطها. والأرضية الكريمية زخرفة أيضًا: صندوق مثبّت بأسفل منطقة النزف يصل ارتفاعه إلى أسفل `#band-1` (`size: { height: { to: '#band-1', edge: 'bottom' } }`)، فيتبع الشريط.

### 4 · رسوم بمقاس الطباعة

```js
// script.js, سطرًا 261–303
const ART = {
  v105: t({ es: 'Un funcionario de la corte Han mira cómo un artesano saca de la tina un molde '
      + 'de bambú lleno de pasta, junto a corteza, trapos y redes viejas.',
    en: 'A Han court official watches a craftsman lift a bamboo mould full of pulp from a vat, '
      + 'beside bark, rags and old nets.',
    ja: '漢の役人が見守るなか、職人が竹のすき枠を漉き舟から引き上げる。そばに樹皮、ぼろ布、古い網。' }),
  v610: t({ es: 'Un monje enseña a dos cortesanos japoneses a sostener el molde sobre una tina, '
      + 'con ramas de kozo en una estera.',
    en: 'A monk shows two Japanese courtiers how to hold the mould over a tub, with kozo '
      + 'branches on a mat.',
    ja: '僧が二人の宮廷人に、桶の上ですき枠を持つ手つきを見せる。むしろの上に楮の枝。' }),
  v751: t({ es: 'Papeleros de Samarcanda junto a un canal; las hojas se secan al sol contra un '
      + 'muro de adobe.',
    en: 'Samarkand papermakers by a canal; the sheets dry in the sun against a mud-brick wall.',
    ja: '水路のそばで働くサマルカンドの紙すき職人。日干しれんがの壁に紙が張られて乾いている。' }),
  v1150: t({ es: 'Un taller de Xàtiva bajo el castillo: un operario golpea trapos en una pila '
      + 'de piedra y las hojas cuelgan de cuerdas.',
    en: 'A workshop in Xàtiva below the castle: a worker pounds rags in a stone trough and the '
      + 'sheets hang on ropes.',
    ja: '城の下のシャティバの工房。職人が石の槽でぼろ布をたたき、紙が綱につるされている。' }),
  v1282: t({ es: 'Un molino de Fabriano con su rueda hidráulica y sus mazos; un papelero mira '
      + 'una filigrana al trasluz.',
    en: 'A Fabriano mill with its water wheel and hammers; a papermaker holds a watermark up '
      + 'to the light.',
    ja: '水車と木づちのあるファブリアーノの製紙場。職人が紙を光にかざして透かしを見ている。' }),
  v1844: t({ es: 'Un artesano aprieta un tronco de abeto contra una muela que gira; debajo se '
      + 'amontonan las fibras.',
    en: 'A craftsman presses a spruce log against a turning grindstone; the fibres pile up '
      + 'below.',
    ja: '職人がトウヒの丸太を回る砥石に押し当て、その下に木の繊維が積もっていく。' }),
  forma: t({ es: 'Dos manos sacan de la tina el molde con una capa fina de fibras.',
    en: 'Two hands lift the mould from the vat with a thin layer of fibres on it.',
    ja: '両手ですき枠を引き上げる。網の上に繊維の薄い層ができている。' }),
};
const SIZE = { forma: [800, 800, 363] }; // pixels and ppi: 56 mm wide; the cards' are 46 mm
const resources = await Promise.all(Object.entries(ART).map(async ([id, altText]) => {
  const px = SIZE[id] ?? [1000, 667, 550];
  const fileId = `${id}-${px[0]}.jpg`;
  await loadImage(fileId, asset(fileId));
  return { id, typeId: 'picture', kind: 'bitmap', caption: '', altText, createdAt: 0,
    updatedAt: 0,
    bitmap: { fileId, format: 'jpeg', width: px[0], height: px[1], resolution: px[2] } };
}));
```

عرض الرسوم 1000 بكسل بدقة 550 نقطة في البوصة، أي 46 مم على الصفحة، ولا تُكبَّر الصورة أبدًا: البطاقة التي تتّسع تحتفظ برسمها وتترك المساحة لنصها. أما البطاقة الأضيق من 53 مم (الرسم وهامش 3.5 مم من كل جانب) فتصغّر رسمها، كما يظهر اختبار منصة الفحص في النسخة اليابانية: رسما 1150 و1282 بنسبة 85 %.

## الوصفة كاملة

ملف واحد، مركّب من مجلد الوصفة ومعه نص المثال وأدوات دليل الوصفات المشتركة مضمّنة؛ وهو ينشئ صفحته بنفسه. لتشغيله، ضعه داخل `<script type="module">` في صفحة فارغة أو الصقه في لوحة JS في مثال CodePen جديد (وحدةً). يستورد postext من esm.sh، فلا حاجة إلى تثبيت أو بناء.

- مجلد الوصفة: https://github.com/drnachio/postext/tree/main/cookbook/illustrated-timeline-spread

### script.js

```js
// ═══ Postext Cookbook · Nº 158 · An illustrated timeline across a double page ═══════
// https://postext.dev/en/cookbook/illustrated-timeline-spread
// Code: MIT · Text: original (CC BY 4.0) · Pictures: generated with diffusion models
// Fonts: Literata, Archivo, Noto Serif JP, Noto Sans JP (SIL OFL 1.1) · Needs postext ≥ 1.38.0
import {
  buildDocument, withLoadedFonts, renderPageToCanvas, registerResourceImage,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'es'; // @lang: the language of the sample document ('es' | 'en' | 'ja')
const RECIPE = 'illustrated-timeline-spread';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: one ink, an accent for each half of the timeline, a pale ground
const palette = {
  ink: '#22201d', // text
  asia: '#2f4f7a', // indigo: the Asian half of the timeline
  europe: '#a2412a', // terracotta: the European half
  ground: '#f1ebdf', // the cream under the cards
  rule: '#c9bfae', // hairlines and the card borders
  muted: '#6b6359', // running heads and the colophon
  paper: '#ffffff',
};
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: 'europe (defaults)', value: { hex: palette.europe, model: 'hex' } },
];
// #endregion

const JA = LANG === 'ja';
const SERIF = JA ? 'Noto Serif JP' : 'Literata';
const SANS = JA ? 'Noto Sans JP' : 'Archivo';
// A Western textbook page is 210 × 280 mm; a Japanese one is AB判, 210 × 257 mm.
const PAGE = { w: 210, h: JA ? 257 : 280, top: 22, bottom: 20, inner: 16, outer: 15 };
const ROWS = 12;
const ROW_GAP = 3;
const ROW = (PAGE.h - PAGE.top - PAGE.bottom - (ROWS - 1) * ROW_GAP) / ROWS; // one grid row, mm
const HALF = PAGE.w - PAGE.inner - PAGE.outer; // the width of one page's half of the sheet
const BAND = 9; // the timeline band, in grid row 5
const DROP = ROW - BAND + ROW_GAP; // from the band's foot to the cards' heads
const CARD_TOP = 5 * (ROW + ROW_GAP); // grid row 6
// The drawn height of a card; 16 mm of the area stay free for a longer text.
const CARD = PAGE.h - PAGE.top - PAGE.bottom - CARD_TOP - 16;
const at = (to, edge, x = 0, y = 0) => ({ anchor: { to, edge }, offset: { x: mm(x), y: mm(y) } });

// #region cards: six cards at least one height tall that trade width with their neighbours
const cards = ['c1', 'c2', 'c3', 'c4', 'c5', 'c6'];
const card = (name, i) => ({ name, style: i < 3 ? 'card-asia' : 'card-europe',
  width: mm((HALF - 10) / 3), minWidth: mm(40), minHeight: mm(CARD),
  shrink: 1, // a card gives width to a neighbour whose text runs past the row
  ...(i % 3 === 0 && { placement: at('container', 'top-left', i ? HALF + 2 * PAGE.inner : 0,
    CARD_TOP) }) }); // where each row starts
// #endregion

// #region answer: one sheet for two pages, a band across the spine, two rows of cards
const pageTemplates = [{
  id: 'timeline',
  spread: true, // two facing pages laid as one sheet; it opens on a verso
  gutter: mm(10), // the band round the spine that frames keep off
  grid: { columns: 2, rows: ROWS, columnGap: mm(2 * PAGE.inner), rowGap: mm(ROW_GAP) },
  frames: [
    { name: 'title', takes: 'h1' },
    { name: 'lead', flow: true, fit: { minScale: 0.8 } },
    { name: 'box', style: 'box', grid: { col: 2, row: 1, rows: 4 }, height: 'fill',
      padding: { right: mm(66) }, fit: { minScale: 0.85 } },
    { name: 'box-picture', layer: 2, width: mm(56), placement: at('#box', 'top-right', -5, 10) },
    { name: 'band-1', style: 'band-asia', grid: { col: 1, row: 5 }, height: mm(BAND) },
    { name: 'band-2', style: 'band-europe', crossGutter: true, width: 'fill', height: mm(BAND),
      padding: { left: mm(2 * PAGE.inner + 4) }, // the colour crosses the fold, the words do not
      placement: at('#band-1', 'right-of') },
    ...cards.map(card),
    { name: 'colophon', style: 'colophon', optional: true, width: mm(170),
      placement: at('page', 'bottom-right', -PAGE.outer, -7) },
  ],
  groups: [
    { name: 'opening', kind: 'stack', grid: { col: 1, row: 1, rows: 4 }, gap: mm(4),
      frames: ['title', 'lead'] },
    // A card whose text runs past its drawn height takes width from its neighbours first;
    // only when they have none to give does the row grow taller.
    { name: 'asia', kind: 'row', gap: mm(5), frames: ['c1', 'c2', 'c3'] },
    { name: 'europe', kind: 'row', gap: mm(5), frames: ['c4', 'c5', 'c6'] },
  ],
  decoration: { elements: [ground(), ...cards.flatMap(marks)] },
}];
// #endregion

// #region marks: a dot under the band and a tick down to each card, anchored to the card
function marks(name, i) {
  const ink = col(i < 3 ? 'asia' : 'europe');
  return [
    { kind: 'rule', id: `${name}-tick`, direction: 'vertical', thickness: pt(1), color: ink,
      placement: { ...at(`#${name}`, 'top', 0, -DROP), size: { height: mm(DROP) } } },
    { kind: 'box', id: `${name}-dot`,
      placement: { ...at(`#${name}`, 'top', 0, -DROP + 0.6), size: { width: mm(4.4),
        height: mm(4.4) } },
      style: { backgroundColor: col('paper'), borderColor: ink, borderWidth: pt(1.6),
        borderRadius: mm(2.2) } },
  ];
}
// #endregion

// The cream ground under the cards: from the foot of the band down to the bleed.
function ground() {
  return { kind: 'box', id: 'ground', decorative: true,
    placement: { ...at('bleed', 'bottom-left'), size: { width: 'fill',
      height: { to: '#band-1', edge: 'bottom' } } },
    style: { backgroundColor: col('ground') } };
}

const tab = (ink) => ({ position: 'top-left', background: col(ink), color: col('paper'),
  fontFamily: SANS, fontSize: pt(10), fontWeight: 700, height: mm(6), paddingX: mm(2.6),
  offset: mm(3.5), inset: mm(0), rule: { enabled: false } });
const cardStyle = (id, ink) => ({ id, backgroundEnabled: true, background: col('paper'),
  border: { enabled: true, color: col('rule'), width: pt(0.5) }, borderRadius: mm(1.5),
  stripe: { enabled: true, side: 'top', width: pt(2.5), color: col(ink) },
  padding: { top: mm(8), right: mm(3.5), bottom: mm(3.5), left: mm(3.5) },
  label: tab(ink),
  body: { fontFamily: SERIF, fontSize: pt(JA ? 8.6 : 9.4), lineHeight: pt(JA ? 15 : 12.8),
    color: col('ink'), boldColor: col(ink), italicColor: col('ink'),
    textAlign: JA ? 'justify' : 'left', hyphenation: !JA, firstLineIndent: pt(0),
    boldFontWeight: 700 } });
const bandStyle = (id, ink) => ({ id, backgroundEnabled: true, background: col(ink),
  border: { enabled: false }, padding: { top: mm(1.6), right: mm(4), bottom: mm(1), left: mm(4) },
  body: { fontFamily: SANS, fontSize: pt(9.5), lineHeight: pt(12), fontWeight: 700,
    color: col('paper'), firstLineIndent: pt(0) } });

const head = (id, content, parity, edge, x) => ({ kind: 'text', id, content, parity,
  fontFamily: SANS, fontSize: pt(8), fontWeight: 600, letterSpacing: pt(JA ? 0 : 0.8),
  color: col('muted'), placement: at('page', edge, x, 11) });
const folio = (id, parity, edge, x) => ({ kind: 'text', id, content: '{pageNumber}', parity,
  fontFamily: SANS, fontSize: pt(9), fontWeight: 700, color: col('ink'),
  placement: at('page', edge, x, -10) });

const config = {
  locale: t({ es: 'es', en: 'en-gb', ja: 'ja' }),
  resourceTypes: [{ id: 'picture', name: t({ es: 'Ilustración', en: 'Illustration',
    ja: 'イラスト' }), shortLabel: '', numberingTemplate: '', resetOn: 'never',
  counterFormat: 'decimal', captionPrefix: '', defaultPlacement: { position: 'here' } }],
  colorPalette,
  page: {
    sizePreset: 'custom', width: mm(PAGE.w), height: mm(PAGE.h), dpi: 150,
    margins: { top: mm(PAGE.top), bottom: mm(PAGE.bottom), left: mm(PAGE.inner),
      right: mm(PAGE.outer), mirror: true },
  },
  layout: { layoutType: 'single' },
  bodyText: {
    fontFamily: SERIF, fontSize: pt(JA ? 10.5 : 12.4), lineHeight: pt(JA ? 18.5 : 17),
    paragraphSpacing: !JA,
    color: col('ink'), boldColor: col('ink'), italicColor: col('ink'),
    referenceColor: col('ink'), textAlign: JA ? 'justify' : 'left',
    firstLineIndent: JA ? em(1) : pt(0), // Japanese paragraphs open with a one-character indent
    hyphenation: { enabled: !JA },
  },
  headings: {
    fontFamily: SANS, color: col('ink'), fontWeight: 800,
    levels: [{ level: 1, fontSize: pt(JA ? 44 : 58), lineHeight: pt(JA ? 54 : 60),
      color: col('asia'), marginTop: pt(0), marginBottom: pt(0),
      breakBefore: { enabled: false } }],
  },
  orderedLists: { numberFormat: 'arabic', color: col('europe'), fontWeight: 700 },
  calloutStyles: [
    { id: 'box', backgroundEnabled: true, background: col('paper'),
      border: { enabled: true, color: col('rule'), width: pt(0.5) },
      borderRadius: mm(1.5), padding: { top: mm(9), right: mm(5), bottom: mm(4), left: mm(5) },
      label: tab('europe'),
      body: { fontFamily: SERIF, fontSize: pt(JA ? 9.5 : 10.4), lineHeight: pt(JA ? 16.5 : 14.2),
        color: col('ink'), boldColor: col('ink'), italicColor: col('ink'), textAlign: 'left',
        firstLineIndent: pt(0), paragraphSpacing: true },
      lists: { color: col('europe'), gap: mm(1.5), itemSpacing: mm(1.2) } },
    cardStyle('card-asia', 'asia'), cardStyle('card-europe', 'europe'),
    bandStyle('band-asia', 'asia'), bandStyle('band-europe', 'europe'),
    { id: 'colophon', backgroundEnabled: false, border: { enabled: false },
      padding: { top: mm(0), right: mm(0), bottom: mm(0), left: mm(0) },
      body: { fontFamily: SANS, fontSize: pt(6.5), lineHeight: pt(8), color: col('muted'),
        firstLineIndent: pt(0) } },
  ],
  header: { elements: [
    head('subject', '{attr.subject}', 'even', 'top-left', PAGE.outer),
    head('unit', '{attr.unit}', 'odd', 'top-right', -PAGE.outer),
  ] },
  footer: { elements: [
    folio('verso-folio', 'even', 'bottom-left', PAGE.outer),
    folio('recto-folio', 'odd', 'bottom-right', -PAGE.outer),
  ] },
  pageTemplates,
};
// The spread opens on a verso: page 1 of this excerpt is book page 48.
const continuation = { pageIndexOffset: 1, pageNumbering: { startAt: 48 } };

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`::::page{template="timeline" spread subject="Geografía e Historia · 2.º ESO" unit="Unidad 5 · Los caminos del comercio"}
# La ruta del papel

Hacer papel fue durante siglos un secreto de los talleres chinos. Desde allí, el oficio tardó más de mil años en llegar a los molinos de Europa.

Cada pueblo que lo aprendió cambió la receta según lo que tenía a mano: corteza de morera en China, kozo en Japón, lino y trapos en Samarcanda y en al-Ándalus y, en el siglo XIX, madera.

:::frame{slot="box" label="Así se hacía una hoja"}
1. Se trituran las fibras y se dejan en remojo hasta que forman una pasta.
2. Se mete en la tina el molde, una rejilla fina en un marco de madera, y se saca cargado de pasta.
3. Se sacude el molde: el agua escurre y las fibras se traban en una capa uniforme.
4. La hoja se prensa entre fieltros y se cuelga para que se seque.

Los hilos del molde dejan su huella en la hoja: son las líneas finas que se ven al mirar el papel a contraluz.
:::

::resource{id="forma" slot="box-picture"}

:::frame{slot="band-1"}
En Asia, del siglo II al VIII
:::

:::frame{slot="band-2"}
En el Mediterráneo y en Europa, del siglo XII al XIX
:::

:::frame{slot="c1" label="105"}
::resource{id="v105"}

**China.** Cai Lun, funcionario de la corte de los Han, presenta al emperador un papel hecho con corteza de morera, restos de cáñamo, trapos y redes de pesca viejas. Cuesta menos que la seda y pesa mucho menos que las tablillas de bambú. Los arqueólogos han encontrado papeles chinos dos siglos más antiguos, pero el de Cai Lun es el que se copia en todo el imperio.
:::

:::frame{slot="c2" label="610"}
::resource{id="v610"}

**Japón.** Según la crónica *Nihon shoki*, el monje Damjing, llegado del reino coreano de Goguryeo, enseña en la corte a fabricar papel y tinta. Con la corteza del kozo, los japoneses consiguen el *washi*, fino y muy resistente. En el Shōsōin de Nara se guardan todavía padrones de familias escritos en papel del año 702.
:::

:::frame{slot="c3" label="751"}
::resource{id="v751"}

**Samarcanda.** Una tradición cuenta que, tras la batalla de Talas, unos prisioneros chinos enseñaron el oficio en esta ciudad de la Ruta de la Seda. Los papeleros de Samarcanda usan lino y trapos de algodón. Hacia el año 800, Bagdad ya tiene talleres, y el papel sustituye al pergamino en los archivos del califa.
:::

:::frame{slot="c4" label="1150"}
::resource{id="v1150"}

**Xàtiva.** El geógrafo al-Idrisi escribe que en esta ciudad de al-Ándalus se hace un papel que no tiene igual en todo el mundo y que se vende a Oriente y a Occidente. Cuando Jaime I conquista la ciudad en 1244, los talleres siguen trabajando.
:::

:::frame{slot="c5" label="1282"}
::resource{id="v1282"}

**Fabriano.** Los molinos de esta ciudad italiana usan la fuerza del río para mover mazos que deshacen los trapos. Encolan las hojas con gelatina, que impide que la tinta se corra, y marcan los pliegos con una filigrana, un dibujo que solo se ve al trasluz. En el siglo XIV, el papel italiano se vende en media Europa.
:::

:::frame{slot="c6" label="1844"}
::resource{id="v1844"}

**Sajonia.** Después de la imprenta llegan los periódicos, y los trapos ya no bastan para tanto papel. En 1798, Louis-Nicolas Robert había construido en Francia una máquina que fabricaba una hoja continua, sin molde. En 1844, el tejedor Friedrich Gottlob Keller aprieta troncos de abeto contra una muela de piedra y obtiene pasta de madera. A partir de entonces el papel se vuelve barato y abundante, y un diario cuesta lo que una barra de pan.
:::

:::frame{slot="colophon"}
Compuesto en Literata y Archivo (SIL OFL) · Texto original (CC BY 4.0) · Ilustraciones generadas con modelos de difusión
:::
::::
`; // content.<lang>.md, inlined by the Cookbook

// #region art: seven pictures at the size they print, with what each shows
const ART = {
  v105: t({ es: 'Un funcionario de la corte Han mira cómo un artesano saca de la tina un molde '
      + 'de bambú lleno de pasta, junto a corteza, trapos y redes viejas.',
    en: 'A Han court official watches a craftsman lift a bamboo mould full of pulp from a vat, '
      + 'beside bark, rags and old nets.',
    ja: '漢の役人が見守るなか、職人が竹のすき枠を漉き舟から引き上げる。そばに樹皮、ぼろ布、古い網。' }),
  v610: t({ es: 'Un monje enseña a dos cortesanos japoneses a sostener el molde sobre una tina, '
      + 'con ramas de kozo en una estera.',
    en: 'A monk shows two Japanese courtiers how to hold the mould over a tub, with kozo '
      + 'branches on a mat.',
    ja: '僧が二人の宮廷人に、桶の上ですき枠を持つ手つきを見せる。むしろの上に楮の枝。' }),
  v751: t({ es: 'Papeleros de Samarcanda junto a un canal; las hojas se secan al sol contra un '
      + 'muro de adobe.',
    en: 'Samarkand papermakers by a canal; the sheets dry in the sun against a mud-brick wall.',
    ja: '水路のそばで働くサマルカンドの紙すき職人。日干しれんがの壁に紙が張られて乾いている。' }),
  v1150: t({ es: 'Un taller de Xàtiva bajo el castillo: un operario golpea trapos en una pila '
      + 'de piedra y las hojas cuelgan de cuerdas.',
    en: 'A workshop in Xàtiva below the castle: a worker pounds rags in a stone trough and the '
      + 'sheets hang on ropes.',
    ja: '城の下のシャティバの工房。職人が石の槽でぼろ布をたたき、紙が綱につるされている。' }),
  v1282: t({ es: 'Un molino de Fabriano con su rueda hidráulica y sus mazos; un papelero mira '
      + 'una filigrana al trasluz.',
    en: 'A Fabriano mill with its water wheel and hammers; a papermaker holds a watermark up '
      + 'to the light.',
    ja: '水車と木づちのあるファブリアーノの製紙場。職人が紙を光にかざして透かしを見ている。' }),
  v1844: t({ es: 'Un artesano aprieta un tronco de abeto contra una muela que gira; debajo se '
      + 'amontonan las fibras.',
    en: 'A craftsman presses a spruce log against a turning grindstone; the fibres pile up '
      + 'below.',
    ja: '職人がトウヒの丸太を回る砥石に押し当て、その下に木の繊維が積もっていく。' }),
  forma: t({ es: 'Dos manos sacan de la tina el molde con una capa fina de fibras.',
    en: 'Two hands lift the mould from the vat with a thin layer of fibres on it.',
    ja: '両手ですき枠を引き上げる。網の上に繊維の薄い層ができている。' }),
};
const SIZE = { forma: [800, 800, 363] }; // pixels and ppi: 56 mm wide; the cards' are 46 mm
const resources = await Promise.all(Object.entries(ART).map(async ([id, altText]) => {
  const px = SIZE[id] ?? [1000, 667, 550];
  const fileId = `${id}-${px[0]}.jpg`;
  await loadImage(fileId, asset(fileId));
  return { id, typeId: 'picture', kind: 'bitmap', caption: '', altText, createdAt: 0,
    updatedAt: 0,
    bitmap: { fileId, format: 'jpeg', width: px[0], height: px[1], resolution: px[2] } };
}));
// #endregion

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = {
  Literata: ['400', '400i', '700'], Archivo: ['400', '600', '700', '800'], // es, en
  'Noto Serif JP': ['400', '700'], 'Noto Sans JP': ['400', '600', '700', '800'], // ja
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
await loadFonts(FONTS, markdown); // the latin files of every face
await loadCjkFonts({ [SERIF]: FONTS[SERIF], [SANS]: FONTS[SANS] }, markdown); // ja only
const doc = await withLoadedFonts(
  () => buildDocument({ markdown, resources, continuation }, config),
  { ...kitFonts(FONTS), text: markdown });
showPages(doc, { title: t({ es: 'Una cronología ilustrada a doble página',
  en: 'An illustrated timeline across a double page', ja: '見開きの絵入り年表' }) });
offerPdf(() => renderToPdf(doc, { fontProvider: cjkPdfProvider, 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 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 · images v3 ── 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 as a vector image, its fonts inside (inlineSvgFonts, ≥ 1.25).
 *  `options` go to registerResourceImage: { singleInk: true } tints it on the canvas. */
async function loadSvg(fileId, svg, options) {
  if (typeof inlineSvgFonts === 'function') svg = await inlineSvgFonts(svg, svgFaces);
  const img = new Image();
  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
  await img.decode();
  registerResourceImage(fileId, img, options);
  (loadImage.bytes ??= new Map()).set(fileId, new TextEncoder().encode(svg));
}

/** A face's Fontsource files: nearest weight; latin + what the SVG sets. */
async function svgFaces(family, weight, style, { codePoints = [] } = {}) {
  const [id, m] = [fontsourceId(family), await fontsourceMeta(family)];
  const w = m?.weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a)) ?? weight;
  const s = m?.styles.includes(style) === false ? 'normal' : style;
  return Promise.all(['latin', ...kitSubsetsFor(String.fromCodePoint(...codePoints), m)].map(async (x) => new Uint8Array(
    await (await fetch(`${await fontsourceAt(id)}files/${id}-${x}-${w}-${s}.woff2`)).arrayBuffer())));
}

/** 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 · cjk v2 ── Chinese, Japanese and Korean books · postext.dev/cookbook
// Fontsource ships a CJK family as about a hundred files per weight, each
// declared in its stylesheet with the unicode-range it covers. The screen
// loads the files the sample touches; the PDF gets the same files for the
// characters its pages set in each face, and embeds each as a subset.
// A book bound on the right (vertical text) is shown with its spreads
// mirrored: page 1 alone on the left of the spine, then [3 | 2].

/** The files of a Fontsource face, read from its stylesheet: { url, range,
 *  ranges }, the last declared first (the order the browser tries them in). */
function cjkSlices(family, weight, style) {
  cjkSlices.cache ??= new Map();
  const id = fontsourceId(family);
  const css = `${id}/${weight}${style === 'italic' ? '-italic' : ''}.css`;
  if (!cjkSlices.cache.has(css)) {
    let at;
    cjkSlices.cache.set(css, fontsourceAt(id).then((a) => fetch(at = a + css.slice(id.length + 1)))
      .then((res) => {
        if (!res.ok) throw new Error(`Fontsource has no ${family} ${weight} ${style} (${res.status})`);
        return res.text();
      })
      .then((text) => [...text.matchAll(/@font-face\s*{([^}]*)}/g)].map(([, rule]) => {
        const range = /unicode-range:\s*([^;]+);/.exec(rule)?.[1].trim() ?? 'U+0-10FFFF';
        const ranges = range.split(',').map((part) => {
          const [lo, hi = lo] = part.trim().slice(2).split('-');
          return [parseInt(lo, 16), parseInt(hi, 16)];
        });
        return { url: new URL(/url\(([^)]+?\.woff2)\)/.exec(rule)[1], at).href, range, ranges };
      }).reverse()));
  }
  return cjkSlices.cache.get(css);
}

/** The file of `slices` the screen sets code point `cp` in, if any: the
 *  last one loadCjkFonts adds whose range holds it. A numbered file that
 *  repeats a letter of latin is added after latin, and wins it. */
function cjkSliceFor(slices, cp) {
  const holds = (slice) => slice.ranges.some(([lo, hi]) => cp >= lo && cp <= hi);
  return slices.reduce((last, slice) => (holds(slice) ? slice : last), undefined);
}

/** Whether Fontsource serves `family` as a Chinese, Japanese or Korean
 *  family (its subsets name the script). Fails when the API does not
 *  answer: a CJK face taken for a Latin one would paint in a system face. */
async function isCjkFamily(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?.some((subset) => /^(chinese|japanese|korean)/.test(subset));
}

/** faces = { 'Noto Serif TC': ['400', '700'] }, as for loadFonts: the
 *  whole FONTS object may be passed, its other families are left to
 *  loadFonts. Adds one FontFace per file of each CJK face with its
 *  unicodeRange, then loads the files `text` touches. `text` is what the
 *  faces set: the sample for the text face; a book in several voices calls
 *  it once per voice (loadCjkFonts({ 'LXGW WenKai TC': ['400'] }, quotes)),
 *  so the heading and quotation faces fetch and check only their own
 *  characters. Fails when a character of `text` is in no file of a face.
 *  List every weight the pages use: a weight left to the engine's later round
 *  gets the latin file only. With { vertical: true } it also loads each
 *  family's vertical forms (brackets, quotes, pause marks) for the canvas,
 *  which needs loadVerticalAlternates imported from postext. Resolves to
 *  the number of files loaded. */
async function loadCjkFonts(faces, text, { vertical = false } = {}) {
  kitStatus('Loading fonts…');
  let loaded = 0;
  try {
    if (vertical && typeof loadVerticalAlternates !== 'function') {
      throw new Error('loadCjkFonts(…, { vertical: true }) needs loadVerticalAlternates imported from postext');
    }
    for (const [family, specs] of Object.entries(faces)) {
      if (!(await isCjkFamily(family))) continue;
      const twin = [];
      for (const spec of new Set(specs)) {
        const weight = parseInt(spec, 10);
        const style = spec.endsWith('i') ? 'italic' : 'normal';
        const slices = await cjkSlices(family, weight, style);
        const missing = [...new Set(text)].filter((ch) => /\S/.test(ch) && !cjkSliceFor(slices, ch.codePointAt(0)));
        if (missing.length) {
          throw new Error(`${family} ${spec} has no file for ${missing.slice(0, 12).join(' ')}: `
            + `give each face the text it sets (loadCjkFonts({ '${family}': ['${spec}'] }, text))`);
        }
        for (const slice of slices) {
          document.fonts.add(new FontFace(family, `url(${slice.url}) format('woff2')`,
            { weight: String(weight), style, unicodeRange: slice.range }));
          twin.push({ source: slice.url, weight: String(weight), style, unicodeRange: slice.range });
        }
        const font = `${style === 'italic' ? 'italic ' : ''}${weight} 16px "${family}"`;
        loaded += (await document.fonts.load(font, text)).length;
        if (!document.fonts.check(font, text)) throw new Error(`${family} ${spec} did not load for the sample`);
      }
      // The same files under a twin name with the `vert` feature on: the
      // canvas paints the punctuation of vertical lines with it.
      if (vertical && twin.length) await loadVerticalAlternates(family, twin);
    }
  } catch (error) {
    kitFail(error);
    throw error;
  }
  return loaded;
}

/** The PDF font provider for recipes with CJK faces: a family whose
 *  Fontsource subsets are Chinese, Japanese or Korean gets the files the
 *  screen set its pages' characters in (`request.codePoints`), each marked
 *  with its unicode-range and its place in the order loadCjkFonts added
 *  them: postext-pdf sets a character two files hold in the one added
 *  last, as the browser does. Any other family gets the latin file
 *  fontsourceProvider fetches (the "pdf" block) and, when the face sets
 *  letters only latin-ext has, that file too. */
async function cjkPdfProvider(family, weight, style, request) {
  if (!(await isCjkFamily(family))) return cjkLatinPdfFiles(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 slices = await cjkSlices(family, w, s);
  const picked = new Set();
  for (const cp of request?.codePoints ?? []) {
    const slice = cjkSliceFor(slices, cp);
    if (slice) picked.add(slice);
  }
  if (!picked.size) picked.add(slices[0]);
  return Promise.all(slices.map(async (slice, order) => {
    if (!picked.has(slice)) return null;
    const res = await fetch(slice.url);
    if (!res.ok) throw new Error(`Fontsource file ${slice.url} (${res.status})`);
    const bytes = await decompressWoff2(new Uint8Array(await res.arrayBuffer()));
    return Object.assign(bytes, { unicodeRange: slice.range, order });
  })).then((files) => files.filter(Boolean));
}

/** A Latin family set next to the CJK faces: its latin file, then its
 *  latin-ext file when the face sets letters only latin-ext has (ō ū in
 *  Hepburn rōmaji, ǎ in pinyin), the file loadFonts adds on screen for
 *  them, each marked with its unicode-range and its place in that order:
 *  the PDF sets a character in the file the browser took it from. A face
 *  Fontsource ships without latin-ext, or whose file does not come, gets
 *  latin alone, and the PDF names the letters it lacks. */
async function cjkLatinPdfFiles(family, weight, style, request) {
  const meta = await fontsourceMeta(family);
  const beyond = [...(request?.codePoints ?? [])].some(cjkLatinExtOnly);
  if (!beyond || !meta?.subsets?.includes('latin-ext')) return fontsourceProvider(family, weight, style);
  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 id = fontsourceId(family);
  const url = `${await fontsourceAt(id)}files/${id}-latin-ext-${w}-${s}.woff2`;
  const [latin, ext] = await Promise.all([fontsourceProvider(family, weight, style), fetch(url)
    .then(async (res) => (res.ok ? decompressWoff2(new Uint8Array(await res.arrayBuffer())) : null), () => null)]);
  const ranges = kitRanges();
  return ext ? [Object.assign(latin, { unicodeRange: ranges.latin, order: 0 }),
    Object.assign(ext, { unicodeRange: ranges['latin-ext'], order: 1 })] : latin;
}

/** Whether code point `cp` is in Fontsource's latin-ext file and not in
 *  its latin file: Latin Extended-A and -B, IPA, the spacing modifiers and
 *  Latin Extended Additional (loadFonts's test for latin-ext), less the
 *  few latin holds too (ı Œ œ ʻ ʼ ˆ ˚ ˜). */
function cjkLatinExtOnly(cp) {
  if (!((cp >= 0x100 && cp <= 0x2ff) || (cp >= 0x1e00 && cp <= 0x1eff))) return false;
  return ![0x131, 0x152, 0x153, 0x2bb, 0x2bc, 0x2c6, 0x2da, 0x2dc].includes(cp);
}

/** showPages for a book bound on either edge. A right-bound book (the
 *  document says so: doc.binding is 'right' for page.binding 'right' and
 *  for vertical text) 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-cjk')) {
    // The pages keep direction ltr: a canvas draws text in the direction its
    // element inherits, and under rtl each run would end where the engine
    // starts it, its brackets mirrored.
    document.head.insertAdjacentHTML('beforeend', `<style id="pt-kit-cjk">
      .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 ───────────────────────────────────────────────────────────────────────
```

## تنويعات

### بطاقات بعرض واحد

مع `shrink: 0` لا تتنازل أي بطاقة عن عرضها: يطول الصف إلى الأسفل، والبطاقات الثلاث معًا، ويهبط أسفله في الصفحة.

```diff
-  shrink: 1, // a card gives width to a neighbour whose text runs past the row
+  shrink: 0,
```

## أخطاء شائعة

- البطاقة ذات `height` ثابت لا تدخل في تقاسم العرض لأنها لا تتجاوز الصف أبدًا: أعطِ البطاقات `minHeight` كما هنا، واترك الارتفاع `auto`.
- الحجم الذي يمتد إلى حافة صندوق آخر يُحسب من نقطة تثبيت العنصر نفسه: الأرضية مثبّتة بأسفل منطقة النزف وتنمو إلى الأعلى حتى `#band-1`. والحافة التي تقع خلف نقطة التثبيت تعطي ارتفاعًا يساوي 0.

## الحقوق

- الوصفة: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- النص: The paper road, a double-page timeline written for this recipe in Spanish, English and Japanese: Postext Cookbook, CC-BY-4.0
- الصور: A Han court official watches a craftsman lift a bamboo mould from a vat.: Generated With Diffusion Models, أصلي
- الصور: A monk shows two Japanese courtiers how to hold a papermaking mould.: Generated With Diffusion Models, أصلي
- الصور: Papermakers by a canal in Samarkand, sheets drying on a wall.: Generated With Diffusion Models, أصلي
- الصور: A paper workshop below the castle of Xàtiva.: Generated With Diffusion Models, أصلي
- الصور: A Fabriano mill with its water wheel; a sheet held up to the light.: Generated With Diffusion Models, أصلي
- الصور: A craftsman grinds a spruce log against a stone into wood pulp.: Generated With Diffusion Models, أصلي
- الصور: Two hands lift a papermaker's mould from a vat of pulp.: Generated With Diffusion Models, أصلي
- الخطوط: Literata (OFL-1.1), Archivo (OFL-1.1), Noto Serif JP (OFL-1.1), Noto Sans JP (OFL-1.1)
- الشيفرة: MIT · محتوى المثال: CC-BY-4.0

## وصفات ذات صلة

- [رقم 154 · صفحة قصص مصوّرة على صفحتين متقابلتين](https://postext.dev/ar/cookbook/comic-double-spread.md): التوجيه :::page مع علامة spread يبسط تقسيمًا واحدًا على صفحتين متقابلتين: تعبر اللقطة البانورامية الكعب، وينقسم الصف السفلي عند الطيّة. · المستوى 2 (متوسط) · القصص المصوّرة
- [رقم 159 · كراسة أنشطة بإطارات تطول مع نصها](https://postext.dev/ar/cookbook/activity-book-growing-boxes.md): كراسة علوم مبنية على قوالب الصفحات: إطارات الرصّة تطول مع نصها، وأسطر الإجابة على إطارات فارغة، والمشروع الطويل يستمر في صفحة مضافة. · المستوى 3 (متقدم) · كتب التمارين والتدريبات, الكتب المدرسية
- [رقم 085 · ورقة طباعة خشبية: إطار مزدوج وخطوط وشريط أوسط](https://postext.dev/ar/cookbook/woodblock-leaf.md): شرح جو شي على المختارات منضّدًا كما طبعته الألواح الخشبية: ورقة لكل صفحتين متقابلتين، وإطار مزدوج، وخط بين الأعمدة، والشريط الأوسط على الطيّة. · المستوى 2 (متوسط) · الكتب المدرسية