# كراسة خط بعشرة خطوط مدرسية

> كراسة أولى لتعلّم الكتابة بكل لغة من لغات الموقع: الخط المدرسي لكل بلد على تسطير دفاتره، ونموذج، وحروف منقّطة للتتبّع، وأسطر فارغة.

- نسخة HTML: https://postext.dev/ar/cookbook/handwriting-workbook
- وصفة رقم 161 · منشورات كاملة · المستوى 2 (متوسط) · المخرجات: Canvas, PDF
- الأنواع: كتب التمارين والتدريبات, الكتب المدرسية
- تتطلب postext ≥ 1.42.1, postext-pdf ≥ 1.42.1 · اختُبرت مع 1.43.0, postext-pdf 1.43.0 بتاريخ 2026-10-18
- الصفحات: [١](https://postext.dev/cookbook/handwriting-workbook/ar/p01.webp?v=3f3b43c3), [٢](https://postext.dev/cookbook/handwriting-workbook/ar/p02.webp?v=3f3b43c3), [٣](https://postext.dev/cookbook/handwriting-workbook/ar/p03.webp?v=3f3b43c3), [٤](https://postext.dev/cookbook/handwriting-workbook/ar/p04.webp?v=3f3b43c3), [٥](https://postext.dev/cookbook/handwriting-workbook/ar/p05.webp?v=3f3b43c3), [٦](https://postext.dev/cookbook/handwriting-workbook/ar/p06.webp?v=3f3b43c3), [٧](https://postext.dev/cookbook/handwriting-workbook/ar/p07.webp?v=3f3b43c3), [٨](https://postext.dev/cookbook/handwriting-workbook/ar/p08.webp?v=3f3b43c3), [٩](https://postext.dev/cookbook/handwriting-workbook/ar/p09.webp?v=3f3b43c3), [١٠](https://postext.dev/cookbook/handwriting-workbook/ar/p10.webp?v=3f3b43c3), [١١](https://postext.dev/cookbook/handwriting-workbook/ar/p11.webp?v=3f3b43c3), [١٢](https://postext.dev/cookbook/handwriting-workbook/ar/p12.webp?v=3f3b43c3)
- PDF: https://postext.dev/cookbook/handwriting-workbook/ar/handwriting-workbook.pdf?v=3f3b43c3
- افتح في Sandbox: https://postext.dev/ar/sandbox#recipe=handwriting-workbook&lang=ar (.postext: https://postext.dev/cookbook/handwriting-workbook/ar/handwriting-workbook.postext)
- آخر تحديث: 2026-10-18
- لغات أخرى: [en](https://postext.dev/en/cookbook/handwriting-workbook.md), [es](https://postext.dev/es/cookbook/handwriting-workbook.md), [ca](https://postext.dev/ca/cookbook/handwriting-workbook.md), [de](https://postext.dev/de/cookbook/handwriting-workbook.md), [fr](https://postext.dev/fr/cookbook/handwriting-workbook.md), [it](https://postext.dev/it/cookbook/handwriting-workbook.md), [pt](https://postext.dev/pt/cookbook/handwriting-workbook.md), [zh](https://postext.dev/zh/cookbook/handwriting-workbook.md), [ja](https://postext.dev/ja/cookbook/handwriting-workbook.md)

## باختصار

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

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

اثنتا عشرة صفحة من كراسة خط للصف الأول بقياس A4، في عشر طبعات هي عشر كراسات مختلفة. لكل لغة الخط المتصل الذي تعلّمه مدارسها، من عائلات Playwrite من Google ‏(GB J وES وFR Trad وDE VA وIT Trad وBR) أو من Playpen Sans Arabic، على الورق الذي يكتب عليه أطفالها: الـ*pauta* الإسبانية، ومربعات Seyès الفرنسية بهامشها الأحمر، والـ*Lineatur* الألمانية بشريطها الأوسط الأصفر، وأسطر *caligrafia* البرازيلية. تكتب الطبعة الصينية في مربعات 田字格 يتتبّع فيها الأطفال حروفًا بلون أحمر باهت (描红)، مع البينيين على أربعة خطوط؛ وتكتب اليابانية في مربعات マス يقطعها صليب منقّط، والتتبّع فيها بالرمادي (なぞり書き). وتتبع الدروس إملاء كل لغة: حرف ñ والـh الصامتة في الإسبانية، والـl·l في الكتالونية، وحرف ß والأسماء التي تبدأ بحرف كبير في الألمانية، والأدوات は وを وへ في اليابانية، والأشكال الأربعة للحرف والحروف التي لا تتصل بما بعدها في العربية. ينتقل كل سطر من النموذج إلى النقاط ثم إلى الفراغ. وتشترك الطبعات كلها في تسع وعشرين لوحة مولّدة بنموذج انتشار.

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

- كيف أصنع كراسة خط فيها نموذج وحروف منقّطة وأسطر فارغة على تسطير مدارس كل بلد؟
- كيف أبني صفحة ورقة عمل: أسطر للتعبئة، وإطارات إجابات، وبنوك كلمات، وقوائم تحقق؟

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

```js
// script.js, سطرًا 75–91
// ### Repasa y escribe {w="nina" model="niña"} draws four rows on the edition's ruling: the
// model and dotted copies, a row of dots, the model and one copy, and an empty row. The
// ruling and the dots are one picture per block ('trazo-' + w, drawn under #region art); the
// models are live text set on its baselines. A design text's baseline falls 0.8 of its line
// below the box top, so a box of line L set at baseline − 0.8 L puts the letters on the line.
const G = CJK ? null : geometry(ED.ruling, ED.u); // rows, baselines and the face's size
const LABEL_H = 7; // mm: the block's label above its ruling
const model = (id, row, extra = {}) => text(id, '{attr.model}', HAND, G.size / 0.3528,
  at('container', 'top-left', 0, LABEL_H + G.base[row] - 0.8 * G.line,
    { width: mm(W) }), { lineHeight: mm(G.line), overflow: 'clip', ...extra });
const wordBlock = (rows, again = true) => ({ enabled: true,
  minHeight: mm(LABEL_H + G.height(rows)), slot: { elements: [label('label'),
    image('trazo', 'trazo-{attr.w}', at('container', 'top-left', 0, LABEL_H,
      box(W, G.height(rows)))),
    model('model-1', 0),
    ...(again ? [model('model-3', 2)] : []), // a sentence is written out once
  ] } });
```

## المكونات

**تعلّم**

- [صفحات افتتاح مصمَّمة](https://postext.dev/ar/docs/configuration-headings.md#الامتداد-والتصميم-المتقدم): عنوان يُرسم تركيبًا حرًّا من النصوص والخطوط الفاصلة والمربعات والصور، ويحجز الارتفاع الذي يحتاجه فوق المتن.
- [سمات العنوان](https://postext.dev/ar/docs/document-format.md#سمات-العناوين): أزواج مفتاح–قيمة على العنوان (المؤلف، والعنوان التمهيدي، والموجز) تطبعها صفحات الافتتاح والترويسات وجدول المحتويات عبر {attr.name}.
- [الصور في تصاميم الصفحة](https://postext.dev/ar/docs/configuration-headers-footers.md#عناصر-الصورة): شعارات وصور وزخارف توضع في الرؤوس والتذييلات وصفحات الافتتاح وصفحات الأجزاء، وتُحجَّم مع الحفاظ على نسبة الأبعاد.

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

- [أنماط العناوين](https://postext.dev/ar/docs/configuration-styles.md#أنماط-العناوين)
- [الأغلفة وصفحات العنوان وبيانات النشر](https://postext.dev/ar/docs/configuration-styles.md#أنماط-العناوين)
- [النصوص والخطوط والمربعات في تصاميم الصفحة](https://postext.dev/ar/docs/configuration-headers-footers.md#رؤوس-الصفحات-وتذييلاتها)
- [الشارات داخل السطر](https://postext.dev/ar/docs/configuration-styles.md#أنماط-الشارات)
- [إطارات التنبيه](https://postext.dev/ar/docs/configuration-callouts.md#أنماط-الإطارات)
- [لوحة ألوان دلالية](https://postext.dev/ar/docs/configuration-fonts-colors-viewers.md#لوحة-الألوان)
- [تقسيم الكلمات ولغة المستند](https://postext.dev/ar/docs/justification.md#اللغات-المدعومة)
- [الترويسات بحسب دور الصفحة](https://postext.dev/ar/docs/configuration-headers-footers.md#عناصر-النص)
- [هوامش متناظرة](https://postext.dev/ar/docs/configuration-page-layout.md#الهوامش-المتناظرة)
- [الخطوط العربية](https://postext.dev/ar/docs/arabic-layout.md#الخطوط)
- [الخطوط الصينية واليابانية والكورية](https://postext.dev/ar/docs/configuration-pdf-output.md#خطوط-الصينية-واليابانية-والكورية)
- [كتب مجلّدة من اليمين](https://postext.dev/ar/docs/configuration-page-layout.md#التجليد)
- [النص من اليمين إلى اليسار](https://postext.dev/ar/docs/arabic-layout.md#الاتجاه-وخوارزمية-النص-ثنائي-الاتجاه)
- [الكانا والكانجي والروماجي](https://postext.dev/ar/docs/japanese-layout.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/configuration-language.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#الموارد)
- [ترويسات لكل قسم](https://postext.dev/ar/docs/configuration-styles.md#أنماط-العناوين)

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

- [`bodyText`](https://postext.dev/ar/docs/configuration-text.md#نص-المتن), [`calloutStyles`](https://postext.dev/ar/docs/configuration-callouts.md#أنماط-الإطارات), [`chipStyles`](https://postext.dev/ar/docs/configuration-styles.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#رؤوس-الصفحات-وتذييلاتها), [`headingStyles`](https://postext.dev/ar/docs/configuration-styles.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#تقسيم-الكلمات-بالواصلة), [`page`](https://postext.dev/ar/docs/configuration-page-layout.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#تحميل-الخطوط-قبل-الإخراج)

**الخطوط**

- Andika (OFL-1.1), Lexend (OFL-1.1), Playwrite GB J (OFL-1.1), Playwrite ES (OFL-1.1), Playwrite FR Trad (OFL-1.1), Playwrite DE VA (OFL-1.1), Playwrite IT Trad (OFL-1.1), Playwrite BR (OFL-1.1), LXGW WenKai TC (OFL-1.1), Noto Serif SC (OFL-1.1), Noto Sans SC (OFL-1.1), Klee One (OFL-1.1), Zen Maru Gothic (OFL-1.1), Playpen Sans Arabic (OFL-1.1), Noto Naskh Arabic (OFL-1.1), Baloo Bhaijaan 2 (OFL-1.1)

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

### 1 · أعطِ كل طبعة خطها المدرسي وورقها

```js
// script.js, سطرًا 33–57
// hand: the school model the children copy; ruling: the paper they copy it on; u: its
// x-height in mm (the height of an a), the unit every ruling is drawn in; rise: the room its
// capitals need above a title. The Chinese text is in Song: the Kai face, cut for Hong Kong
// and Taiwan, centres its commas, so it sets only the titles and the squares.
const EDITIONS = {
  en: { hand: 'Playwrite GB J', ruling: 'gb', u: 3.6 },
  es: { hand: 'Playwrite ES', ruling: 'pauta', u: 3.6 },
  ca: { hand: 'Playwrite ES', ruling: 'pauta', u: 3.6 },
  fr: { hand: 'Playwrite FR Trad', ruling: 'seyes', u: 3, rise: 5 },
  de: { hand: 'Playwrite DE VA', ruling: 'lineatur', u: 3.6 },
  it: { hand: 'Playwrite IT Trad', ruling: 'righe', u: 3.6 },
  pt: { hand: 'Playwrite BR', ruling: 'caligrafia', u: 3.2 },
  zh: { hand: 'LXGW WenKai TC', ruling: 'tian', text: 'Noto Serif SC',
    label: 'Noto Sans SC', pinyin: 'Andika', cell: 16 },
  ja: { hand: 'Klee One', ruling: 'masu', text: 'Klee One', label: 'Zen Maru Gothic', cell: 16 },
  ar: { hand: 'Playpen Sans Arabic', ruling: 'satr', u: 3.6,
    text: 'Noto Naskh Arabic', label: 'Baloo Bhaijaan 2' },
};
const ED = { text: 'Andika', label: 'Lexend', rise: 0, ...EDITIONS[LANG] };
const [HAND, TEXT, LABEL] = [ED.hand, ED.text, ED.label];
const CJK = ED.cell !== undefined; // a grid of squares, one character to each
const RTL = LANG === 'ar';
const LW = CJK ? 700 : 600; // the labels' weight: the CJK label faces ship no 600
// Labels in tracked capitals, where the script has capitals.
const caps = (n) => (!CJK && !RTL ? { textTransform: 'uppercase', letterSpacing: pt(n) } : {});
```

الرمز `u` هو ارتفاع x بالمليمتر، وهو الوحدة التي يُرسم بها كل تسطير: 3.6 مم في أغلب الطبعات، و3 مم في الفرنسية، لأن المسافة بين خطوط Seyès تساوي ارتفاع x واحدًا. ترسم خطوط Playwrite كلها ارتفاع x عند نصف الـem، فيكون حجم النموذج `u / 0.5`، وتقع خطوط التسطير حيث تضع نسب الخط نفسه صواعده ونوازله. والنص الصيني منضّد بخط Song ‏(Noto Serif SC)، لأن LXGW WenKai TC يضع الفواصل في وسط المربع كما تُطبع في هونغ كونغ وتايوان، فلا يُستعمل خط Kai إلا للعناوين والمربعات.

### 2 · ضع النموذج على التسطير نصًّا حيًّا

```js
// script.js, سطرًا 75–91
// ### Repasa y escribe {w="nina" model="niña"} draws four rows on the edition's ruling: the
// model and dotted copies, a row of dots, the model and one copy, and an empty row. The
// ruling and the dots are one picture per block ('trazo-' + w, drawn under #region art); the
// models are live text set on its baselines. A design text's baseline falls 0.8 of its line
// below the box top, so a box of line L set at baseline − 0.8 L puts the letters on the line.
const G = CJK ? null : geometry(ED.ruling, ED.u); // rows, baselines and the face's size
const LABEL_H = 7; // mm: the block's label above its ruling
const model = (id, row, extra = {}) => text(id, '{attr.model}', HAND, G.size / 0.3528,
  at('container', 'top-left', 0, LABEL_H + G.base[row] - 0.8 * G.line,
    { width: mm(W) }), { lineHeight: mm(G.line), overflow: 'clip', ...extra });
const wordBlock = (rows, again = true) => ({ enabled: true,
  minHeight: mm(LABEL_H + G.height(rows)), slot: { elements: [label('label'),
    image('trazo', 'trazo-{attr.w}', at('container', 'top-left', 0, LABEL_H,
      box(W, G.height(rows)))),
    model('model-1', 0),
    ...(again ? [model('model-3', 2)] : []), // a sentence is written out once
  ] } });
```

كتلة التمرين عنوان من المستوى الثالث يرسم تصميمه صورة واحدة، هي التسطير مع النسخ المنقّطة، ويضع فوقها النموذج نصًّا بالخط المدرسي. يقع خط أساس نص التصميم عند 0.8 من ارتفاع سطره تحت أعلى صندوقه، لذلك يوضع صندوق النموذج فوق خط أساس سطر الكتابة بمقدار 0.8 من ارتفاع سطره، فتقف الحروف على الخط الذي يرسمه التسطير. وارتفاع السطر عشرة أضعاف ارتفاع x، حتى لا يُقصّ الصندوق إلا على بعد 2 u تحت خط الأساس، وهو عمق يتسع لذيل حرف g. يصير نص العنوان، *تتبّع واكتب*، تسميةً للكتلة؛ ويسمّي `w` الصورة و`model` الكلمة.

### 3 · ارسم النقاط من محيطات الخط نفسه

ينضّد Postext الحرف ملوّنًا أو محدّدًا أو باهتًا، لكنه لا يرسمه صفًّا من النقاط على امتداد خطّه. لذلك تُرسم النقاط قبل تنضيد الكتاب، من محيطات الوزن Thin في كل عائلة Playwrite: نقطة كل 0.2 من ارتفاع x على امتداد كل محيط، ولا تُبقى النقطة إلا إذا لم تقع نقطة أخرى على مسافة أقل من 0.8 من هذه الخطوة، فيعطي جانبا الخط الرفيع صفًّا واحدًا. وتبقى نقطة الـi وعلامات الحركات أشكالًا صغيرة مصمتة. نقاط كل طبعة، مع عرض النسخة وعرض النموذج، في `traces-<lang>.json`، ويوزّع المثال النسخ على الأسطر: بعد النموذج، ثم على سطر كامل، ثم نسخة واحدة بعد النموذج، وفي الأخير سطر فارغ.

### 4 · تتبّع الحروف في مربعاتها

```js
// script.js, سطرًا 95–127
// ### 写一写 {c1="日" c2="月"}: each character in the first square of its row, three copies to
// trace in the pale red (描红) or grey (なぞり書き) of the next squares, then empty ones. A
// Han or kana character is one em wide, so tracking of (square − em) sets one per square.
const [CELL, EM] = [ED.cell ?? 16, (ED.cell ?? 16) * 0.72]; // mm: the square, its character
const SQUARES = Math.floor(W / CELL);
const row = (n, y, content, x, color) => text(`r${n}-${x}`, content, HAND, EM / 0.3528,
  at('container', 'top-left', x * CELL + (CELL - EM) / 2, y + (CELL - EM) / 2 + EM * 0.06,
    box(W - x * CELL, EM)),
  { lineHeight: mm(EM), letterSpacing: mm(CELL - EM), overflow: 'clip', color: col(color) });
// A sentence (####) takes three rows: written out, traced, and a row to write it alone.
const squareBlock = (rows, sentence) => ({ enabled: true, minHeight: mm(LABEL_H + rows * CELL),
  slot: { elements: [label('label'), image('grid', `squares-${rows}`,
    at('container', 'top-left', 0, LABEL_H, box(SQUARES * CELL, rows * CELL))),
  ...(sentence ? [row(0, LABEL_H, '{attr.model}', 0, 'ink'),
    row(1, LABEL_H + CELL, '{attr.model}', 0, 'trace')] : Array.from({ length: rows }, (_, n) => [
    row(n, LABEL_H + n * CELL, `{attr.c${n + 1}}`, 0, 'ink'),
    row(n, LABEL_H + n * CELL, `{attr.c${n + 1}}{attr.c${n + 1}}{attr.c${n + 1}}`, 1, 'trace'),
  ]).flat()),
  ] } });
// Pinyin on four lines and three spaces (四线三格), ##### {model="bā"}: the syllable, copies
// to trace in the pale red, the syllable again and room after it.
const P = ED.pinyin ? geometry('sixian', 3.6) : null;
const pinyin = (id, n, x, content, color) => text(id, content, ED.pinyin, P.size / 0.3528,
  at('container', 'top-left', x, LABEL_H + P.base[n] - 0.8 * P.line, { width: mm(W - x) }),
  { lineHeight: mm(P.line), overflow: 'clip', color: col(color) });
const copies = Array(5).fill('{attr.model}').join('\u00a0\u00a0\u00a0\u00a0');
const pinyinBlock = P && { enabled: true, minHeight: mm(LABEL_H + P.height(3)),
  slot: { elements: [label('label'),
    image('lines', 'sixian', at('container', 'top-left', 0, LABEL_H,
      box(W, P.height(3)))),
    pinyin('p1', 0, 0, '{attr.model}', 'ink'), pinyin('p1-copies', 0, 36, copies, 'trace'),
    pinyin('p2', 1, 0, copies, 'trace'), pinyin('p3', 2, 0, '{attr.model}', 'ink'),
  ] } };
```

عرض الحرف الصيني أو حرف الكانا em واحد، لذلك يضع تباعد حروف يساوي عرض المربع ناقصًا الـem حرفًا واحدًا في كل مربع، كما في الـ字帖. يحمل المربع الأول من السطر الحرف بالحبر، والمربعات الثلاثة التالية الحرف نفسه بالأحمر الباهت في 描红 (وبالرمادي في الطبعة اليابانية)، ويبقى الباقي فارغًا. وتشغل الجملة (`####`) ثلاثة أسطر: مكتوبة، ثم متتبَّعة، ثم فارغة، ولكل علامة ترقيم مربعها. وتستعمل أسطر البينيين الصينية تسطير الخطوط الأربعة في الطبعات اللاتينية مع خط Andika، الذي يرسم حرفي a وg بالشكل البسيط الذي يتعلمه الأطفال.

### 5 · لا تعكس شيئًا للعربية

تشترك الطبعة العربية مع غيرها في كل التصاميم. يعكس المحرّك تصميم العنوان حين يقع في تدفق صفحة من اليمين إلى اليسار، فينتقل قرص الحروف والنموذج والصورة الأولى في القاموس إلى اليمين وحدها. ولا يُرصف من الحافة اليمنى في الشيفرة إلا النسخ المنقّطة، لأنها مرسومة داخل صورة، وتجري أمواج التسخين من اليمين إلى اليسار. ويجلّد `locale: 'ar'` الكتاب على اليمين.

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

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

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

### script.js

```js
// ═══ Postext Cookbook · Nº 161 · Handwriting workbook in ten scripts ═══════════════
// https://postext.dev/en/cookbook/handwriting-workbook
// Code: MIT · Text: original (CC BY 4.0) · Pictures: generated with diffusion models
// Fonts: Playwrite, Playpen Sans Arabic, Klee One and others (SIL OFL) · Needs postext ≥ 1.42.1
import {
  buildDocument, withLoadedFonts, renderPageToCanvas, registerResourceImage,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'ar'; // @lang: the language of the workbook (en es ca fr de it pt zh ja ar)
const RECIPE = 'handwriting-workbook';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: a navy ink, one coral accent, the sun and the pale fields of the bands
const palette = {
  ink: '#22304a', // text and the models
  accent: '#bf4630', // kickers, labels, folios
  sun: '#f4b73f', // the boxes' stripe
  tint: '#fdf0da', // opener bands, boxes
  rule: '#7f9ccc', // the ruling
  dots: '#4d5b76', // the dotted letters
  trace: LANG === 'ja' ? '#b4bccb' : '#e7a9a0', // traced over: 描红 in red, なぞり書き in grey
  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: 'accent (defaults)', value: { hex: palette.accent, model: 'hex' } },
];
// #endregion

// #region editions: each language its school's script, its ruling and its faces
// hand: the school model the children copy; ruling: the paper they copy it on; u: its
// x-height in mm (the height of an a), the unit every ruling is drawn in; rise: the room its
// capitals need above a title. The Chinese text is in Song: the Kai face, cut for Hong Kong
// and Taiwan, centres its commas, so it sets only the titles and the squares.
const EDITIONS = {
  en: { hand: 'Playwrite GB J', ruling: 'gb', u: 3.6 },
  es: { hand: 'Playwrite ES', ruling: 'pauta', u: 3.6 },
  ca: { hand: 'Playwrite ES', ruling: 'pauta', u: 3.6 },
  fr: { hand: 'Playwrite FR Trad', ruling: 'seyes', u: 3, rise: 5 },
  de: { hand: 'Playwrite DE VA', ruling: 'lineatur', u: 3.6 },
  it: { hand: 'Playwrite IT Trad', ruling: 'righe', u: 3.6 },
  pt: { hand: 'Playwrite BR', ruling: 'caligrafia', u: 3.2 },
  zh: { hand: 'LXGW WenKai TC', ruling: 'tian', text: 'Noto Serif SC',
    label: 'Noto Sans SC', pinyin: 'Andika', cell: 16 },
  ja: { hand: 'Klee One', ruling: 'masu', text: 'Klee One', label: 'Zen Maru Gothic', cell: 16 },
  ar: { hand: 'Playpen Sans Arabic', ruling: 'satr', u: 3.6,
    text: 'Noto Naskh Arabic', label: 'Baloo Bhaijaan 2' },
};
const ED = { text: 'Andika', label: 'Lexend', rise: 0, ...EDITIONS[LANG] };
const [HAND, TEXT, LABEL] = [ED.hand, ED.text, ED.label];
const CJK = ED.cell !== undefined; // a grid of squares, one character to each
const RTL = LANG === 'ar';
const LW = CJK ? 700 : 600; // the labels' weight: the CJK label faces ship no 600
// Labels in tracked capitals, where the script has capitals.
const caps = (n) => (!CJK && !RTL ? { textTransform: 'uppercase', letterSpacing: pt(n) } : {});
// #endregion

const W = 176; // mm: the type area's width, and every practice block's
// A design laid in the flow of a right-to-left page is mirrored by the engine, so 'left' is
// the start side in every edition: the Arabic book needs no coordinates of its own.
const box = (width, height) => ({ width: mm(width), height: mm(height) });
const at = (to, edge, x = 0, y = 0, size) => ({ anchor: { to, edge },
  offset: { x: mm(x), y: mm(y) }, ...(size && { size }) });
const text = (id, content, fontFamily, size, placement, extra = {}) => ({ kind: 'text', id,
  content, fontFamily, fontSize: pt(size), color: col('ink'), align: 'left', placement,
  ...extra });
const image = (id, resourceId, placement) => ({ kind: 'image', id, resourceId, placement,
  decorative: true });
const label = (id) => text(id, '{titleText}', LABEL, 9, at('container', 'top-left'),
  { fontWeight: LW, color: col('accent'), ...caps(1.2) });

// #region answer: a practice block: the model in the school face, then dots, then nothing
// ### Repasa y escribe {w="nina" model="niña"} draws four rows on the edition's ruling: the
// model and dotted copies, a row of dots, the model and one copy, and an empty row. The
// ruling and the dots are one picture per block ('trazo-' + w, drawn under #region art); the
// models are live text set on its baselines. A design text's baseline falls 0.8 of its line
// below the box top, so a box of line L set at baseline − 0.8 L puts the letters on the line.
const G = CJK ? null : geometry(ED.ruling, ED.u); // rows, baselines and the face's size
const LABEL_H = 7; // mm: the block's label above its ruling
const model = (id, row, extra = {}) => text(id, '{attr.model}', HAND, G.size / 0.3528,
  at('container', 'top-left', 0, LABEL_H + G.base[row] - 0.8 * G.line,
    { width: mm(W) }), { lineHeight: mm(G.line), overflow: 'clip', ...extra });
const wordBlock = (rows, again = true) => ({ enabled: true,
  minHeight: mm(LABEL_H + G.height(rows)), slot: { elements: [label('label'),
    image('trazo', 'trazo-{attr.w}', at('container', 'top-left', 0, LABEL_H,
      box(W, G.height(rows)))),
    model('model-1', 0),
    ...(again ? [model('model-3', 2)] : []), // a sentence is written out once
  ] } });
// #endregion

// #region squares: the Chinese and Japanese blocks, a character to a square
// ### 写一写 {c1="日" c2="月"}: each character in the first square of its row, three copies to
// trace in the pale red (描红) or grey (なぞり書き) of the next squares, then empty ones. A
// Han or kana character is one em wide, so tracking of (square − em) sets one per square.
const [CELL, EM] = [ED.cell ?? 16, (ED.cell ?? 16) * 0.72]; // mm: the square, its character
const SQUARES = Math.floor(W / CELL);
const row = (n, y, content, x, color) => text(`r${n}-${x}`, content, HAND, EM / 0.3528,
  at('container', 'top-left', x * CELL + (CELL - EM) / 2, y + (CELL - EM) / 2 + EM * 0.06,
    box(W - x * CELL, EM)),
  { lineHeight: mm(EM), letterSpacing: mm(CELL - EM), overflow: 'clip', color: col(color) });
// A sentence (####) takes three rows: written out, traced, and a row to write it alone.
const squareBlock = (rows, sentence) => ({ enabled: true, minHeight: mm(LABEL_H + rows * CELL),
  slot: { elements: [label('label'), image('grid', `squares-${rows}`,
    at('container', 'top-left', 0, LABEL_H, box(SQUARES * CELL, rows * CELL))),
  ...(sentence ? [row(0, LABEL_H, '{attr.model}', 0, 'ink'),
    row(1, LABEL_H + CELL, '{attr.model}', 0, 'trace')] : Array.from({ length: rows }, (_, n) => [
    row(n, LABEL_H + n * CELL, `{attr.c${n + 1}}`, 0, 'ink'),
    row(n, LABEL_H + n * CELL, `{attr.c${n + 1}}{attr.c${n + 1}}{attr.c${n + 1}}`, 1, 'trace'),
  ]).flat()),
  ] } });
// Pinyin on four lines and three spaces (四线三格), ##### {model="bā"}: the syllable, copies
// to trace in the pale red, the syllable again and room after it.
const P = ED.pinyin ? geometry('sixian', 3.6) : null;
const pinyin = (id, n, x, content, color) => text(id, content, ED.pinyin, P.size / 0.3528,
  at('container', 'top-left', x, LABEL_H + P.base[n] - 0.8 * P.line, { width: mm(W - x) }),
  { lineHeight: mm(P.line), overflow: 'clip', color: col(color) });
const copies = Array(5).fill('{attr.model}').join('\u00a0\u00a0\u00a0\u00a0');
const pinyinBlock = P && { enabled: true, minHeight: mm(LABEL_H + P.height(3)),
  slot: { elements: [label('label'),
    image('lines', 'sixian', at('container', 'top-left', 0, LABEL_H,
      box(W, P.height(3)))),
    pinyin('p1', 0, 0, '{attr.model}', 'ink'), pinyin('p1-copies', 0, 36, copies, 'trace'),
    pinyin('p2', 1, 0, copies, 'trace'), pinyin('p3', 2, 0, '{attr.model}', 'ink'),
  ] } };
// #endregion

// #region opener: a tinted band with the lesson's letters in a disc and its picture
const BAND = 40; // mm
const opener = { enabled: true, minHeight: mm(BAND + 7), slot: { elements: [
  { kind: 'box', id: 'band', decorative: true, style: { backgroundColor: col('tint'),
    borderRadius: mm(5) }, placement: at('container', 'top-left', 0, 0, box(W, BAND)) },
  text('letters', '{attr.letras}', HAND, CJK ? 30 : 26, at('container', 'top-left', 5, 5,
    box(40, 30)),
  { align: 'center', verticalAlign: 'middle', color: col('accent'), overflow: 'clip',
    box: { backgroundColor: col('paper'), borderRadius: mm(15) } }),
  text('kicker', '{attr.kicker}', LABEL, 9, at('container', 'top-left', 52, 8),
    { fontWeight: LW, color: col('accent'), ...caps(1.2) }),
  text('title', '{titleText}', HAND, CJK ? 26 : 24, at('container', 'top-left', 52,
    15 + ED.rise, { width: mm(80) }), { lineHeight: 1.25 }),
  { kind: 'box', id: 'card', decorative: true, style: { backgroundColor: col('paper'),
    borderRadius: mm(4) }, placement: at('container', 'top-right', -4, 3, box(34, 34)) },
  image('picture', '{attr.pic}', at('container', 'top-right', -5, 4, box(32, 32))),
] } };
// #endregion

// #region pages: the cover, the certificate and the picture dictionary
// The cover: a painted scene to the bleed, the title in the school face, a line for a name.
const COVER = 178; // mm from the top edge: the foot of the painting
const cover = { id: 'portada', header: { elements: [] }, footer: { elements: [] },
  advancedDesign: { enabled: true, slot: { elements: [
    image('scene', 'cover', at('page', 'top-left', 0, 0, { width: 'fill', height: mm(COVER) })),
    text('kicker', '{attr.kicker}', LABEL, 11, at('page', 'top', 0, COVER + 10),
      { align: 'center', fontWeight: LW, color: col('accent'), ...caps(1.6) }),
    text('title', '{titleText}', HAND, CJK ? 48 : 46, at('page', 'top', 0, COVER + 18 + ED.rise),
      { align: 'center', lineHeight: 1.2 }),
    text('name', '{attr.nombre}', LABEL, 12, at('page', 'top', -W / 2 + 24, COVER + 58),
      { color: col('ink') }),
    { kind: 'rule', id: 'name-line', direction: 'horizontal', thickness: pt(1),
      color: col('rule'), placement: at('page', 'top', 14, COVER + 64, { width: mm(110) }) },
    text('colophon', '{attr.colofon}', LABEL, 7, at('page', 'top', 0, 262, { width: mm(W) }),
      { align: 'center', color: col('dots'), lineHeight: 1.4 }),
  ] } } };
// The last page: the same frame as a certificate, the child's name and the date to fill in.
const diploma = { id: 'diploma', header: { elements: [] }, footer: { elements: [] },
  advancedDesign: { enabled: true, minHeight: mm(250), slot: { elements: [
    { kind: 'box', id: 'frame', decorative: true, style: { borderColor: col('sun'),
      borderWidth: pt(5), borderRadius: mm(8), backgroundColor: col('paper') },
    placement: at('container', 'top-left', 0, 4, box(W, 244)) },
    image('picture', 'medal', at('container', 'top', 0, 22, box(70, 70))),
    text('title', '{titleText}', HAND, CJK ? 40 : 38, at('container', 'top', 0, 104,
      { width: mm(W - 20) }), { align: 'center', color: col('accent'), lineHeight: 1.2 }),
    text('body', '{attr.texto}', TEXT, 15, at('container', 'top', 0, 136, { width: mm(130) }),
      { align: 'center', lineHeight: 1.45 }),
    ...[0, 1].map((n) => text(`field-${n}`, `{attr.${['nombre', 'fecha'][n]}}`, LABEL, 11,
      at('container', 'top-left', 28, 186 + n * 22), { color: col('dots') })),
    ...[0, 1].map((n) => ({ kind: 'rule', id: `line-${n}`, direction: 'horizontal',
      thickness: pt(1), color: col('rule'),
      placement: at('container', 'top-left', 28, 192 + n * 22, { width: mm(W - 56) }) })),
  ] } } };
// The picture dictionary, ## {p1="cat" w1="gato" …}: four pictures to a row, each word under
// its picture in the school face, and a line to copy it on.
const SLOT = W / 4;
const dictionary = { enabled: true, minHeight: mm(58),
  slot: { elements: [0, 1, 2, 3].flatMap((n) => [
    image(`p${n}`, `{attr.p${n + 1}}`, at('container', 'top-left', n * SLOT + (SLOT - 34) / 2,
      0, box(34, 34))),
    text(`w${n}`, `{attr.w${n + 1}}`, HAND, CJK ? 20 : 17, at('container', 'top-left',
      n * SLOT, 36, box(SLOT, 10)), { align: 'center', overflow: 'clip' }),
    { kind: 'rule', id: `l${n}`, direction: 'horizontal', thickness: pt(0.75),
      color: col('rule'), placement: at('container', 'top-left', n * SLOT + 4, 54,
        { width: mm(SLOT - 8) }) },
  ]) } };
// #endregion

// The folio in an accent disc at the outer foot, the book's title beside it.
const foot = (parity, edge, side) => [
  text(`folio-${parity}`, '{pageNumber}', LABEL, 10, { anchor: { to: 'page', edge },
    offset: { x: mm(18 * side), y: mm(-9) }, size: box(8, 8) }, { parity, align: 'center',
    verticalAlign: 'middle', fontWeight: 700, color: col('paper'), lineHeight: 1.17,
    box: { backgroundColor: col('accent'), borderRadius: mm(4) } }),
  text(`title-${parity}`, '{title} · {subtitle}', LABEL, 7.5, { anchor: { to: 'page', edge },
    offset: { x: mm(29 * side), y: mm(-11) } },
  { parity, color: col('dots'), align: side > 0 ? 'left' : 'right', ...caps(1) }),
];

const config = {
  // Hyphenation, punctuation, direction and binding follow the edition's language.
  locale: t({ en: 'en-gb', es: 'es', ca: 'ca', fr: 'fr', de: 'de', it: 'it', pt: 'pt-BR',
    zh: 'zh-Hans', ja: 'ja', ar: 'ar' }),
  resourceTypes: [{ id: 'dibujo', name: 'Dibujo', shortLabel: '', captionPrefix: '',
    numberingTemplate: '', resetOn: 'never', counterFormat: 'decimal',
    defaultPlacement: { position: 'here' } }],
  colorPalette,
  page: { sizePreset: 'custom', width: mm(210), height: mm(297), dpi: 150,
    margins: { top: mm(16), bottom: mm(22), left: mm(18), right: mm(16), mirror: true } },
  layout: { layoutType: 'single' },
  bodyText: {
    fontFamily: TEXT, fontSize: pt(CJK ? 13.5 : 14), lineHeight: pt(RTL ? 25 : 20),
    color: col('ink'), boldColor: col('ink'), italicColor: col('ink'),
    referenceColor: col('ink'), textAlign: RTL || CJK ? 'justify' : 'left',
    firstLineIndent: pt(0), paragraphSpacing: true, hyphenation: { enabled: !CJK && !RTL },
    optimalLineBreaking: true, avoidWidows: true, avoidOrphans: true, avoidRunts: true,
  },
  headings: {
    fontFamily: HAND, color: col('ink'), fontWeight: 400,
    levels: [
      { level: 1, breakBefore: { enabled: true, parity: 'any' }, marginTop: pt(0),
        marginBottom: mm(3), advancedDesign: opener },
      { level: 2, marginTop: mm(3), marginBottom: mm(3), advancedDesign: dictionary },
      { level: 3, marginTop: mm(4), marginBottom: mm(2),
        advancedDesign: CJK ? squareBlock(4) : wordBlock(4) },
      { level: 4, marginTop: mm(4), marginBottom: mm(2),
        advancedDesign: CJK ? squareBlock(3, true) : wordBlock(3, false) },
      ...(P ? [{ level: 5, marginTop: mm(4), marginBottom: mm(2), advancedDesign: pinyinBlock }]
        : []),
    ],
  },
  headingStyles: [cover, diploma],
  chipStyles: [ // a blank to write a letter in, and a letter tile
    { id: 'hueco', fontFamily: LABEL, background: col('paper'), borderColor: col('rule'),
      borderWidth: pt(1), borderRadius: mm(1.2), paddingX: mm(4), paddingY: em(0.12) },
    { id: 'letra', fontFamily: HAND, background: col('tint'), borderColor: col('sun'),
      borderWidth: pt(1), borderRadius: mm(1.6), paddingX: mm(2), paddingY: em(0.08) }],
  calloutStyles: [{ id: 'recuerda', background: col('tint'), borderRadius: mm(3),
    stripe: { enabled: true, side: 'left', width: pt(4), color: col('sun') },
    padding: { top: mm(3), right: mm(5), bottom: mm(3.5), left: mm(5) },
    titleStyle: { fontFamily: LABEL, fontSize: pt(9), fontWeight: LW, color: col('accent'),
      ...caps(1.2) },
    body: { fontFamily: TEXT, fontSize: pt(12), lineHeight: pt(RTL ? 21 : 17),
      color: col('ink'), boldColor: col('ink'), italicColor: col('ink'),
      firstLineIndent: pt(0) } }],
  header: { elements: [] },
  footer: { elements: [...foot('even', 'bottom-left', 1), ...foot('odd', 'bottom-right', -1)] },
};

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "أَتَعَلَّمُ الكِتَابَةَ"
subtitle: "كُرَّاسَةُ الخَطِّ ١"
---

# أَتَعَلَّمُ الكِتَابَةَ {style="portada" kicker="كُرَّاسَةُ الخَطِّ · الصَّفُّ الأَوَّلُ" nombre="اِسْمِي" colofon="الخطوط: Playpen Sans Arabic وNoto Naskh Arabic وBaloo Bhaijaan 2 (SIL OFL) · نص أصلي (CC BY 4.0) · الرسوم مولّدة بنماذج الانتشار"}

# قَبْلَ أَنْ نَبْدَأَ {kicker="نُسَخِّنُ اليَدَ" letras="ب ت" pic="grip"}

اِجْلِسْ وَظَهْرُكَ مُسْتَقِيمٌ وَقَدَمَاكَ عَلَى الأَرْضِ. أَمْسِكِ القَلَمَ بِثَلَاثِ أَصَابِعَ وَلَا تَضْغَطْ عَلَيْهِ. نَكْتُبُ بِالعَرَبِيَّةِ مِنَ اليَمِينِ إِلَى اليَسَارِ، فَتَتَبَّعِ النِّقَاطَ مِنَ اليَمِينِ.

### أَمْوَاجُ البَحْرِ {w="waves"}

### حَلَقَاتٌ صَغِيرَةٌ {w="loops"}

# أَشْكَالُ الحَرْفِ {kicker="الدَّرْسُ ١" letras="ب" pic="house"}

يَتَغَيَّرُ شَكْلُ الحَرْفِ بِحَسَبِ مَكَانِهِ فِي الكَلِمَةِ: فِي أَوَّلِهَا وَفِي وَسَطِهَا وَفِي آخِرِهَا، وَلَهُ شَكْلٌ وَحْدَهُ. اُنْظُرْ إِلَى البَاءِ فِي **بَيْت** وَ**كَلْب**.

### تَتَبَّعْ وَاكْتُبْ {w="ba-forms" model="ب بـ ـبـ ـب"}

### تَتَبَّعْ وَاكْتُبْ {w="bayt" model="بَيْت"}

:::callout{type="recuerda" title="تَذَكَّرْ"}
البَاءُ فِي أَوَّلِ الكَلِمَةِ قَصِيرَةٌ وَتَتَّصِلُ بِمَا بَعْدَهَا.
:::

# النِّقَاطُ {kicker="الدَّرْسُ ٢" letras="ب ت ث" pic="bee"}

بَعْضُ الحُرُوفِ لَهَا الشَّكْلُ نَفْسُهُ، وَالنِّقَاطُ هِيَ الَّتِي تُفَرِّقُ بَيْنَهَا: **ب** نُقْطَةٌ تَحْتَهَا، **ت** نُقْطَتَانِ فَوْقَهَا، **ث** ثَلَاثُ نِقَاطٍ.

### تَتَبَّعْ وَاكْتُبْ {w="ba-ta-tha" model="ب ت ث"}

### تَتَبَّعْ وَاكْتُبْ {w="jim-ha-kha" model="ج ح خ"}

:::callout{type="recuerda" title="تَذَكَّرْ"}
اُكْتُبِ الحَرْفَ كُلَّهُ أَوَّلًا، ثُمَّ ضَعِ النِّقَاطَ.
:::

# حُرُوفٌ لَا تَتَّصِلُ بِمَا بَعْدَهَا {kicker="الدَّرْسُ ٣" letras="ا د ر و" pic="flower"}

سِتَّةُ حُرُوفٍ تَتَّصِلُ بِمَا قَبْلَهَا وَلَا تَتَّصِلُ بِمَا بَعْدَهَا: **ا د ذ ر ز و**. بَعْدَهَا نَرْفَعُ القَلَمَ وَنَبْدَأُ مِنْ جَدِيدٍ، كَمَا فِي **وَرْدَة**.

### تَتَبَّعْ وَاكْتُبْ {w="dar" model="دَار"}

### تَتَبَّعْ وَاكْتُبْ {w="warda" model="وَرْدَة"}

:::callout{type="recuerda" title="تَذَكَّرْ"}
فِي كَلِمَةِ **وَرْدَة** ثَلَاثُ قِطَعٍ، لِأَنَّ الوَاوَ وَالرَّاءَ لَا تَتَّصِلَانِ بِمَا بَعْدَهُمَا.
:::

# الحَرَكَاتُ {kicker="الدَّرْسُ ٤" letras="بَ بِ بُ" pic="kite"}

الفَتْحَةُ خَطٌّ صَغِيرٌ فَوْقَ الحَرْفِ، وَالكَسْرَةُ تَحْتَهُ، وَالضَّمَّةُ وَاوٌ صَغِيرَةٌ فَوْقَهُ. وَالسُّكُونُ دَائِرَةٌ صَغِيرَةٌ: الحَرْفُ بِلَا حَرَكَةٍ.

### تَتَبَّعْ وَاكْتُبْ {w="ba-ba-bu" model="بَ بِ بُ"}

### تَتَبَّعْ وَاكْتُبْ {w="kataba" model="كَتَبَ"}

:::callout{type="recuerda" title="تَذَكَّرْ"}
نَكْتُبُ الكَلِمَةَ أَوَّلًا، ثُمَّ نَضَعُ الحَرَكَاتِ.
:::

# المُدُودُ {kicker="الدَّرْسُ ٥" letras="ا و ي" pic="moon"}

الأَلِفُ وَالوَاوُ وَاليَاءُ تَمُدُّ الصَّوْتَ: **بَا** وَ**بُو** وَ**بِي**. نَقُولُ «نُور» وَنَمُدُّ الصَّوْتَ بِالوَاوِ.

### تَتَبَّعْ وَاكْتُبْ {w="ba-bu-bi" model="بَا بُو بِي"}

### تَتَبَّعْ وَاكْتُبْ {w="nur" model="نُور"}

:::callout{type="recuerda" title="تَذَكَّرْ"}
الفَتْحَةُ تُمَدُّ بِالأَلِفِ، وَالضَّمَّةُ بِالوَاوِ، وَالكَسْرَةُ بِاليَاءِ.
:::

# الشَّدَّةُ وَالتَّنْوِينُ {kicker="الدَّرْسُ ٦" letras="ـّ ـٌ" pic="cat"}

الشَّدَّةُ تَعْنِي أَنَّ الحَرْفَ مَكْتُوبٌ مَرَّتَيْنِ، كَمَا فِي **قِطَّة**. وَالتَّنْوِينُ حَرَكَتَانِ فِي آخِرِ الكَلِمَةِ نَقْرَؤُهُمَا نُونًا: **كِتَابٌ**.

### تَتَبَّعْ وَاكْتُبْ {w="qitta" model="قِطَّة"}

### تَتَبَّعْ وَاكْتُبْ {w="kitabun" model="كِتَابٌ"}

:::callout{type="recuerda" title="تَذَكَّرْ"}
التَّاءُ المَرْبُوطَةُ **ة** فِي آخِرِ الكَلِمَةِ لَهَا نُقْطَتَانِ: قِطَّة، وَرْدَة.
:::

# الشَّمْسُ وَالقَمَرُ {kicker="الدَّرْسُ ٧" letras="ال" pic="sun"}

فِي **الشَّمْس** لَا نَنْطِقُ اللَّامَ، وَنَشُدُّ الحَرْفَ الَّذِي بَعْدَهَا. وَفِي **القَمَر** نَنْطِقُ اللَّامَ. لَكِنَّنَا نَكْتُبُ «ال» فِي الكَلِمَتَيْنِ.

### تَتَبَّعْ وَاكْتُبْ {w="shams" model="الشَّمْس"}

### تَتَبَّعْ وَاكْتُبْ {w="qamar" model="القَمَر"}

:::callout{type="recuerda" title="تَذَكَّرْ"}
اللَّامُ الشَّمْسِيَّةُ تُكْتَبُ وَلَا تُنْطَقُ، وَاللَّامُ القَمَرِيَّةُ تُكْتَبُ وَتُنْطَقُ.
:::

# كَلِمَاتِي الأُولَى {kicker="قَامُوسٌ مُصَوَّرٌ" letras="أ ب ت" pic="tree"}

اِقْرَأْ كُلَّ كَلِمَةٍ، ثُمَّ اُكْتُبْهَا عَلَى السَّطْرِ تَحْتَهَا.

## شَمْس، قَمَر، قِطَّة، سَمَكَة {p1="sun" w1="شَمْس" p2="moon" w2="قَمَر" p3="cat" w3="قِطَّة" p4="fish" w4="سَمَكَة"}

## بَيْت، قَارِب، بَطَّة، مِفْتَاح {p1="house" w1="بَيْت" p2="boat" w2="قَارِب" p3="duck" w3="بَطَّة" p4="key" w4="مِفْتَاح"}

## حِذَاء، تُفَّاحَة، نَحْلَة، شَجَرَة {p1="shoe" w1="حِذَاء" p2="apple" w2="تُفَّاحَة" p3="bee" w3="نَحْلَة" p4="tree" w4="شَجَرَة"}

# أَنْسَخُ جُمَلًا {kicker="الدَّرْسُ ٨" letras="جُمْلَة" pic="bird"}

نَتْرُكُ بَيْنَ كُلِّ كَلِمَتَيْنِ مَسَافَةً صَغِيرَةً، وَنَضَعُ نُقْطَةً فِي آخِرِ الجُمْلَةِ.

#### اُنْسُخِ الجُمْلَةَ {w="jumla-1" model="أُحِبُّ الكِتَابَةَ."}

#### اُنْسُخِ الجُمْلَةَ {w="jumla-2" model="القِطَّةُ نَائِمَةٌ."}

#### اُنْسُخِ الجُمْلَةَ {w="jumla-3" model="طَلَعَ القَمَرُ."}

# أَنَا أَكْتُبُ! {style="diploma" texto="تَعَلَّمْتَ أَشْكَالَ الحُرُوفِ وَالنِّقَاطَ وَالحَرَكَاتِ وَالمُدُودَ وَالشَّدَّةَ وَالتَّنْوِينَ. الآنَ تَسْتَطِيعُ أَنْ تَكْتُبَ كَلِمَاتِكَ." nombre="الاِسْمُ" fecha="التَّارِيخُ"}
`; // content.<lang>.md, inlined by the Cookbook

// #region art: the edition's ruling drawn in code, the dots from the face's own outlines
// Each country's paper, in x-heights (u) above and below the baseline. lines: [height,
// weight] pairs; band: a filled band; seyes: the French grid of 1 u squares, a heavy line
// every 4 u, verticals every 4 u; Seyès and the Italian page rule a red margin where the
// writing starts.
function geometry(style, u) {
  const R = {
    pauta: { above: 2, below: 1, gap: 1, lines: [[-1, 0.4], [0, 0.9], [1, 0.9], [2, 0.4]] },
    gb: { above: 2, below: 1, gap: 0.8,
      lines: [[-0.8, 0.5], [0, 0.9], [1, 0.5, 'dash'], [1.8, 0.5]] },
    lineatur: { above: 2, below: 1, gap: 1, lines: [[-1, 0.6], [0, 0.6], [1, 0.6], [2, 0.6]],
      band: [0, 1, '#fdf3c7'] },
    righe: { above: 2, below: 1, gap: 1, lines: [[-1, 0.4], [0, 0.8], [1, 0.8], [2, 0.4]],
      margin: true },
    caligrafia: { above: 2.4, below: 1.4, gap: 0.8, lines: [[-1.3, 0.4], [0, 0.9], [1, 0.9],
      [2.3, 0.4]], band: [0, 1, '#e8f0fb'] },
    satr: { above: 2, below: 1, gap: 1, lines: [[-1, 0.4], [0, 0.9], [1, 0.5, 'dash'], [2, 0.4]] },
    seyes: { above: 4, below: 2, gap: -2, seyes: true }, // a row on every heavy line
    sixian: { above: 2, below: 1, gap: 1, lines: [[-1, 0.6], [0, 0.9], [1, 0.6], [2, 0.6]] },
  }[style];
  const pitch = (R.above + R.below + R.gap) * u;
  const base = [0, 1, 2, 3].map((n) => n * pitch + R.above * u);
  // The faces set their x-height at half the em, Playpen Sans Arabic its tooth at 0.4.
  const xh = { satr: 0.4, sixian: 0.508 }[style] ?? 0.5; // Andika's x-height for pinyin
  // line: a tall box for the models, whose clip falls 2 u under the baseline.
  return { ...R, u, pitch, base, size: u / xh, line: u * 10,
    height: (rows) => (rows - 1) * pitch + (R.above + R.below) * u };
}
const n2 = (v) => +v.toFixed(2);
function ruling(g, rows) {
  const out = [];
  const h = g.height(rows);
  const hline = (y, w, dash) => out.push(`<path d="M0 ${n2(y)}H${W}" stroke="${palette.rule}" `
    + `stroke-width="${n2(w * 0.3528)}" stroke-opacity="${w < 0.6 ? 0.55 : 1}"`
    + `${dash ? ' stroke-dasharray="1.2 1"' : ''}/>`);
  if (g.seyes) {
    for (let k = 0; k <= h / g.u + 1e-6; k++) hline(k * g.u, k % 4 === 0 ? 0.9 : 0.35);
    for (let x = 4 * g.u; x <= W; x += 4 * g.u) out.push(`<path d="M${n2(x)} 0V${n2(h)}" `
      + `stroke="${palette.rule}" stroke-width=".12"/>`);
    out.push(`<path d="M.2 0V${n2(h)}" stroke="#d9534f" stroke-width=".3"/>`);
    return out.join('');
  }
  for (const b of g.base.slice(0, rows)) {
    if (g.band) out.push(`<rect x="0" y="${n2(b - g.band[1] * g.u)}" width="${W}" `
      + `height="${n2((g.band[1] - g.band[0]) * g.u)}" fill="${g.band[2]}"/>`);
    for (const [k, w, dash] of g.lines) hline(b - k * g.u, w, dash);
  }
  if (g.margin) out.push(`<path d="M.2 0V${n2(h)}" stroke="#d9534f" stroke-width=".3"/>`);
  return out.join('');
}
// The dots of a word: TRACES holds, for each model, the dots along the outlines of the face's
// thin cut (one row of dots, the two sides of a stroke merged) as a path of zero-length,
// round-capped segments, its advance, and the model's advance in the regular cut, all in mm.
function dotted(word, x, y) {
  const t = TRACES.words[word];
  return `<g transform="translate(${n2(x)} ${n2(y)})"><path d="${t.d}" stroke="${palette.dots}" `
    + `stroke-width="${TRACES.dot}" stroke-linecap="round" fill="none"/>`
    + (t.f ? `<path d="${t.f}" fill="${palette.dots}"/>` : '') + '</g>';
}
// Warm-up strokes: curves drawn by code, dotted at the same pitch as the letters.
const PATTERNS = { // s runs along the stroke; x and y in 2 u, from the baseline up
  lines: (s) => [Math.floor(s) * 0.5, s % 1], // sticks, each drawn from the foot up
  waves: (s) => [s * 0.5, (1 - Math.cos(s * Math.PI)) / 4], // waves in the x-height band
  loops: (s) => [s * 0.5 - 0.2 * Math.sin(2 * Math.PI * s), (1 - Math.cos(2 * Math.PI * s)) / 2],
};
function pattern(name, x0, x1, base, u) {
  const f = PATTERNS[name]; const pts = [];
  let prev = null; let acc = 0;
  for (let s = 0; s < 400; s += 0.002) {
    const [px, py] = f(s); const p = [x0 + px * u * 2, base - py * u * 2];
    if (p[0] > x1) break;
    acc += prev ? Math.hypot(p[0] - prev[0], p[1] - prev[1]) : TRACES.pitch;
    prev = p;
    if (acc < TRACES.pitch) continue;
    pts.push(`M${n2(RTL ? W - p[0] : p[0])} ${n2(p[1])}h.01`); acc = 0;
  }
  return `<path d="${pts.join('')}" stroke="${palette.dots}" stroke-width="${TRACES.dot}" `
    + 'stroke-linecap="round" fill="none"/>';
}
// One block's picture: the ruling, then the dotted copies laid out from the start side. A word
// (###): copies after the model, a row of copies, one copy after the model, an empty row. A
// sentence (####): one copy under the model, then an empty row. A warm-up pattern: two rows
// of it and the start of a third.
function traceSvg(g, w, word, sentence) {
  const rows = sentence ? 3 : 4; const gap = 3 * g.u; const parts = [ruling(g, rows)];
  const copies = (row, from, count = 99) => {
    const t = TRACES.words[word];
    for (let x = from, k = 0; x + t.a <= W && k < count; x += t.a + gap, k++) {
      parts.push(dotted(word, RTL ? W - x - t.a : x, g.base[row]));
    }
  };
  if (PATTERNS[w]) {
    [W, W, W * 0.4].forEach((end, row) => parts.push(pattern(w, 2, end - 2, g.base[row], g.u)));
  } else if (sentence) copies(1, 0, 1);
  else {
    const lead = TRACES.words[word].m + gap;
    copies(0, lead); copies(1, 0); copies(2, lead, 1);
  }
  const h = g.height(rows);
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${W * 10}" height="${n2(h * 10)}" `
    + `viewBox="0 0 ${W} ${n2(h)}">${parts.join('')}</svg>`;
}
// The pictures the practice blocks name: one per block, read off the headings that ask for one,
// or the edition's squares and its pinyin lines.
async function practicePictures(add) {
  const svg = (w, h, body) => `<svg xmlns="http://www.w3.org/2000/svg" width="${W * 10}" `
    + `height="${n2(h * 10)}" viewBox="0 0 ${w} ${n2(h)}">${body}</svg>`;
  const blocks = CJK ? [] : markdown.matchAll(/^(#{3,4}) .*?w="([^"]+)"(?: model="([^"]+)")?/gm);
  for (const [, level, w, word] of blocks) {
    await loadSvg(`trazo-${w}.svg`, traceSvg(G, w, word ?? '', level === '####'));
    add(`trazo-${w}`, `trazo-${w}.svg`, 'svg', W * 10, G.height(level === '####' ? 3 : 4) * 10);
  }
  if (P) {
    await loadSvg('sixian.svg', svg(W, P.height(3), ruling(P, 3)));
    add('sixian', 'sixian.svg', 'svg', W * 10, P.height(3) * 10);
  }
  if (CJK) for (const rows of [3, 4]) {
    await loadSvg(`squares-${rows}.svg`, squaresSvg(rows));
    add(`squares-${rows}`, `squares-${rows}.svg`, 'svg', SQUARES * CELL * 10, rows * CELL * 10);
  }
}
// The squares: 田字格 in red with a dashed cross, or マス with a dotted cross in grey-blue.
function squaresSvg(rows) {
  const c = CELL; const n = SQUARES; const red = ED.ruling === 'tian';
  const ink = red ? '#d0574b' : palette.rule;
  const cross = Array.from({ length: rows }, (_, r) => Array.from({ length: n }, (_, k) =>
    `M${k * c + c / 2} ${r * c + 0.6}V${r * c + c - 0.6}M${k * c + 0.6} ${r * c + c / 2}`
    + `H${k * c + c - 0.6}`).join('')).join('');
  const grid = Array.from({ length: n + 1 }, (_, k) => `M${k * c} 0V${rows * c}`).join('')
    + Array.from({ length: rows + 1 }, (_, r) => `M0 ${r * c}H${n * c}`).join('');
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${n * c * 10}" height="${rows * c * 10}" `
    + `viewBox="0 0 ${n * c} ${rows * c}"><path d="${cross}" fill="none" stroke="${ink}" `
    + `stroke-opacity=".55" stroke-width=".2" stroke-dasharray="${red ? '.9 .6' : '.25 .55'}"/>`
    + `<path d="${grid}" fill="none" stroke="${ink}" stroke-width=".35"/></svg>`;
}
// #endregion


// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = {
  Andika: ['400', '700'], // the text: drawn for children learning to read
  Lexend: ['400', '600', '700'], // labels, kickers, folios
  // The school models, one per country: Google's Playwrite families follow each one.
  'Playwrite GB J': ['400'], 'Playwrite ES': ['400'], 'Playwrite FR Trad': ['400'],
  'Playwrite DE VA': ['400'], 'Playwrite IT Trad': ['400'], 'Playwrite BR': ['400'],
  'LXGW WenKai TC': ['400'], // 楷: the Chinese titles and squares
  'Noto Serif SC': ['400', '700'], // 宋: the Chinese text
  'Noto Sans SC': ['400', '700'], // 黑: Chinese labels
  'Klee One': ['400'], // 教科書体: the Japanese text and its squares
  'Zen Maru Gothic': ['400', '700'], // Japanese labels
  'Playpen Sans Arabic': ['400'], // the Arabic model
  'Noto Naskh Arabic': ['400', '700'], // the Arabic text, vocalised
  'Baloo Bhaijaan 2': ['400', '600', '700'], // Arabic labels
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
// The edition loads its own faces only: its school face, its text and its labels.
const used = [HAND, TEXT, LABEL, ED.pinyin];
for (const family of Object.keys(FONTS)) if (!used.includes(family)) delete FONTS[family];
await loadFonts(FONTS, markdown);
await loadCjkFonts(FONTS, markdown);
await loadArabicFonts(FONTS, markdown);
const TRACES = CJK ? null : await (await fetch({
  en: asset('traces-en.json'), es: asset('traces-es.json'), ca: asset('traces-ca.json'),
  fr: asset('traces-fr.json'), de: asset('traces-de.json'), it: asset('traces-it.json'),
  pt: asset('traces-pt.json'), ar: asset('traces-ar.json') }[LANG])).json();
const resources = []; // every picture, painted or drawn
const add = (id, fileId, kind, width, height, more = {}) => resources.push({ id, kind,
  typeId: 'dibujo', createdAt: 0, updatedAt: 0, [kind]: { fileId, width, height, ...more } });
// The paintings the edition names (pic="…", p1="…"), from one shared set, at their pixels.
const named = new Set(['medal',
  ...[...markdown.matchAll(/\b(?:pic|p\d)="(\w+)"/g)].map((m) => m[1])]);
await Promise.all([['cover', 'cover-1600.jpg', 1600, 1356],
  ...[...named].map((id) => [id, `${id}-480.jpg`, 480, 480])].map(async ([id, file, w, h]) => {
  await loadImage(file, asset(file)); add(id, file, 'bitmap', w, h, { format: 'jpeg' });
}));
await practicePictures(add); // the rulings, the dots and the squares (#region art)
const doc = await withLoadedFonts(() => buildDocument({ markdown, resources }, config),
  { ...kitFonts(FONTS), text: markdown });
showBook(doc, { title: t({ en: 'Handwriting workbook', es: 'Cuaderno de caligrafía',
  ca: 'Quadern de cal·ligrafia', fr: 'Cahier d’écriture', de: 'Schreibheft',
  it: 'Quaderno di scrittura', pt: 'Caderno de caligrafia', zh: '写字练习册',
  ja: 'かきかたれんしゅうちょう', ar: 'كراسة الخط' }) });
offerPdf(() => renderToPdf(doc, { resourceBytes: imageBytes,
  fontProvider: { zh: cjkPdfProvider, ja: cjkPdfProvider, ar: arabicPdfProvider }[LANG]
    ?? fontsourceProvider }), `${RECIPE}-${LANG}.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 · arabic v2 ── Arabic-script faces · postext.dev/cookbook
// Fontsource ships an Arabic family as one file per subset and weight: the
// `arabic` file holds the letters, the harakat, the Arabic-Indic digits, the
// Arabic punctuation and the presentation forms; `latin` and `latin-ext`
// hold the rest. loadFonts loads the latin files; this block adds the arabic
// file of every Arabic family, for the canvas and for the PDF, which shapes
// the letters with HarfBuzz from the same bytes.

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

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

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

/** The arabic file of a face. */
async function arabicFileUrl(family, weight, style) {
  const id = fontsourceId(family);
  return `${await fontsourceAt(id)}files/${id}-arabic-${weight}-${style}.woff2`;
}

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

/** The PDF font provider for recipes with Arabic faces: a family with an
 *  arabic subset gets its arabic file when its pages set Arabic letters
 *  (`request.codePoints`), then its latin file, and its latin-ext file for
 *  the letters beyond latin (transliteration: ā ḥ ʿ), each marked with its
 *  unicode-range and its place in the order the screen added them (latin
 *  and latin-ext by loadFonts, then arabic): the arabic file also has a
 *  space and brackets, which the browser takes from latin, the file whose
 *  range holds them, and postext-pdf follows it. Any other family goes to
 *  fontsourceProvider (the "pdf" block). */
async function arabicPdfProvider(family, weight, style, request) {
  if (!(await isArabicFamily(family))) return fontsourceProvider(family, weight, style, request);
  const meta = await fontsourceMeta(family);
  const weights = meta.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && !meta.styles.includes('italic') ? 'normal' : style;
  const wanted = [...(request?.codePoints ?? [])];
  const id = fontsourceId(family);
  const subsets = !wanted.length || wanted.some(inArabicRange) ? ['arabic', 'latin'] : ['latin'];
  if (meta.subsets.includes('latin-ext') && wanted.some((cp) => /[Ā-˿Ḁ-ỿ]/u.test(String.fromCodePoint(cp)))) {
    subsets.push('latin-ext');
  }
  const at = await fontsourceAt(id);
  return Promise.all(subsets.map(async (subset) => {
    const url = `${at}files/${id}-${subset}-${w}-${s}.woff2`;
    const res = await fetch(url);
    if (!res.ok) throw new Error(`Fontsource file ${url} (${res.status})`);
    const bytes = await decompressWoff2(new Uint8Array(await res.arrayBuffer()));
    return Object.assign(bytes, { unicodeRange: subset === 'arabic' ? arabicRange() : kitRanges()[subset],
      order: ['latin', 'latin-ext', 'greek', 'arabic'].indexOf(subset) });
  }));
}

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

## تنويعات

### استعمل الخط المتصل الأمريكي

لـPlaywrite عائلة لكثير من النماذج المدرسية. للخط المتصل الأمريكي، غيّر خط الطبعة الإنجليزية وولّد نقاطه من جديد.

```diff
-  en: { hand: 'Playwrite GB J', ruling: 'gb', u: 3.6 },
+  en: { hand: 'Playwrite US Trad', ruling: 'gb', u: 3.6 },
```

### اكتب على خط من كل خطين في Seyès

كثيرًا ما يكتب الأطفال في أول المدرسة على خط سميك من كل خطين. أعطِ أسطر الطبعة الفرنسية خطوة من ثمانية خطوط.

```diff
-    seyes: { above: 4, below: 2, gap: -2, seyes: true }, // a row on every heavy line
+    seyes: { above: 4, below: 2, gap: 2, seyes: true },
```

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

- يُقصّ نص التصميم عند حدود صندوقه. والصندوق الذي ارتفاعه سطر واحد يقطع ذيلي g وp في النموذج: أعطه سطرًا طويلًا وضعه انطلاقًا من خط الأساس.
- يحمّل `loadCjkFonts` كل خط للعيّنة كلها، فإذا نقص خطًّا صينيًّا حرفٌ يستعمله النص في أي موضع فشل التحميل. اكتب أسماء الخطوط بالحروف اللاتينية في بيانات النشر.

## الحقوق

- الوصفة: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- الصور: Two children writing in notebooks at a school table, a cat asleep on a chair beside them.: Generated With Diffusion Models, أصلي
- الصور: A smiling sun.: Generated With Diffusion Models, أصلي
- الصور: A crescent moon with three stars.: Generated With Diffusion Models, أصلي
- الصور: A ginger cat sitting.: Generated With Diffusion Models, أصلي
- الصور: A brown and white puppy.: Generated With Diffusion Models, أصلي
- الصور: An orange fish with blue stripes.: Generated With Diffusion Models, أصلي
- الصور: A honey bee flying.: Generated With Diffusion Models, أصلي
- الصور: A little black spider on a thread.: Generated With Diffusion Models, أصلي
- الصور: A red apple.: Generated With Diffusion Models, أصلي
- الصور: A golden key.: Generated With Diffusion Models, أصلي
- الصور: A red child's shoe.: Generated With Diffusion Models, أصلي
- الصور: A small house with a red roof.: Generated With Diffusion Models, أصلي
- الصور: A small sailing boat.: Generated With Diffusion Models, أصلي
- الصور: A yellow duckling.: Generated With Diffusion Models, أصلي
- الصور: A colourful kite.: Generated With Diffusion Models, أصلي
- الصور: A birthday cake with three candles.: Generated With Diffusion Models, أصلي
- الصور: A penguin.: Generated With Diffusion Models, أصلي
- الصور: An owl on a branch.: Generated With Diffusion Models, أصلي
- الصور: A red umbrella in the rain.: Generated With Diffusion Models, أصلي
- الصور: An ice-cream cone with two scoops.: Generated With Diffusion Models, أصلي
- الصور: A blue and orange butterfly.: Generated With Diffusion Models, أصلي
- الصور: A leafy tree.: Generated With Diffusion Models, أصلي
- الصور: A snowy mountain.: Generated With Diffusion Models, أصلي
- الصور: A daisy.: Generated With Diffusion Models, أصلي
- الصور: A small blue bird on a twig.: Generated With Diffusion Models, أصلي
- الصور: Splashing water.: Generated With Diffusion Models, أصلي
- الصور: A small campfire.: Generated With Diffusion Models, أصلي
- الصور: A child's hand holding a pencil with the tripod grip.: Generated With Diffusion Models, أصلي
- الصور: A golden star medal with coloured pencils.: Generated With Diffusion Models, أصلي
- الصور: The dotted letters of the en edition, traced along the outlines of Playwrite GB J Thin.: Ignacio Ferro, أصلي
- الصور: The dotted letters of the es edition, traced along the outlines of Playwrite ES Thin.: Ignacio Ferro, أصلي
- الصور: The dotted letters of the ca edition, traced along the outlines of Playwrite ES Thin.: Ignacio Ferro, أصلي
- الصور: The dotted letters of the fr edition, traced along the outlines of Playwrite FR Trad Thin.: Ignacio Ferro, أصلي
- الصور: The dotted letters of the de edition, traced along the outlines of Playwrite DE VA Thin.: Ignacio Ferro, أصلي
- الصور: The dotted letters of the it edition, traced along the outlines of Playwrite IT Trad Thin.: Ignacio Ferro, أصلي
- الصور: The dotted letters of the pt edition, traced along the outlines of Playwrite BR Thin.: Ignacio Ferro, أصلي
- الصور: The dotted letters of the ar edition, traced along the outlines of Playpen Sans Arabic Thin.: Ignacio Ferro, أصلي
- الخطوط: Andika (OFL-1.1), Lexend (OFL-1.1), Playwrite GB J (OFL-1.1), Playwrite ES (OFL-1.1), Playwrite FR Trad (OFL-1.1), Playwrite DE VA (OFL-1.1), Playwrite IT Trad (OFL-1.1), Playwrite BR (OFL-1.1), LXGW WenKai TC (OFL-1.1), Noto Serif SC (OFL-1.1), Noto Sans SC (OFL-1.1), Klee One (OFL-1.1), Zen Maru Gothic (OFL-1.1), Playpen Sans Arabic (OFL-1.1), Noto Naskh Arabic (OFL-1.1), Baloo Bhaijaan 2 (OFL-1.1)
- الشيفرة: MIT · محتوى المثال: CC-BY-4.0

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

- [رقم 060 · كتاب قراءة مبكرة بشارات المقاطع](https://postext.dev/ar/cookbook/reading-primer-syllables.md): وحدة الحرف M من كتاب لتعليم القراءة: أصوات الكلمة شارات بلون حرفها الصوتي، وشبكة كلمات مصوّرة في كل خلية منها لوحة مائية. · المستوى 2 (متوسط) · كتب التمارين والتدريبات
- [رقم 159 · كراسة أنشطة بإطارات تطول مع نصها](https://postext.dev/ar/cookbook/activity-book-growing-boxes.md): كراسة علوم مبنية على قوالب الصفحات: إطارات الرصّة تطول مع نصها، وأسطر الإجابة على إطارات فارغة، والمشروع الطويل يستمر في صفحة مضافة. · المستوى 3 (متقدم) · كتب التمارين والتدريبات, الكتب المدرسية
- [رقم 122 · نص 漢文 بعلامات قراءته، وقراءته اليابانية](https://postext.dev/ar/cookbook/kanbun-kundoku.md): ثلاثة أقوال من «المختارات» ورباعية من عصر تانغ كما ينضّدها كتاب قراءة ياباني: علامات العودة والـokurigana بلون الزنجفر، والقراءة بالكانا تحت كل مقطع. · المستوى 2 (متوسط) · الكتب المدرسية