# كراسة تمارين عربية من اليمين إلى اليسار

> وحدة من كراسة تمارين عربية للمرحلة الابتدائية من اليمين إلى اليسار: خيارات أ ب ج، وعمودان للوصل، وبنك كلمات، وخانتا صح وخطأ، وأرقام مشرقية.

- نسخة HTML: https://postext.dev/ar/cookbook/arabic-workbook-rtl
- وصفة رقم 173 · الكتب المدرسية · المستوى 2 (متوسط) · المخرجات: Canvas, PDF
- الأنواع: كتب التمارين والتدريبات, الكتب المدرسية
- تتطلب postext ≥ 1.59.0, postext-pdf ≥ 1.59.0 · اختُبرت مع 1.59.0, postext-pdf 1.59.0 بتاريخ 2026-10-24
- الصفحات: [١](https://postext.dev/cookbook/arabic-workbook-rtl/ar/p01.webp?v=cd08e1dc), [٢](https://postext.dev/cookbook/arabic-workbook-rtl/ar/p02.webp?v=cd08e1dc), [٣](https://postext.dev/cookbook/arabic-workbook-rtl/ar/p03.webp?v=cd08e1dc), [٤](https://postext.dev/cookbook/arabic-workbook-rtl/ar/p04.webp?v=cd08e1dc), [1](https://postext.dev/cookbook/arabic-workbook-rtl/ar/p05.webp?v=cd08e1dc), [2](https://postext.dev/cookbook/arabic-workbook-rtl/ar/p06.webp?v=cd08e1dc), [3](https://postext.dev/cookbook/arabic-workbook-rtl/ar/p07.webp?v=cd08e1dc), [4](https://postext.dev/cookbook/arabic-workbook-rtl/ar/p08.webp?v=cd08e1dc)
- افتح في Sandbox: https://postext.dev/ar/sandbox#recipe=arabic-workbook-rtl&lang=ar (.postext: https://postext.dev/cookbook/arabic-workbook-rtl/ar/arabic-workbook-rtl.postext)
- آخر تحديث: 2026-10-24
- لغات أخرى: [en](https://postext.dev/en/cookbook/arabic-workbook-rtl.md), [es](https://postext.dev/es/cookbook/arabic-workbook-rtl.md), [ca](https://postext.dev/ca/cookbook/arabic-workbook-rtl.md), [de](https://postext.dev/de/cookbook/arabic-workbook-rtl.md), [fr](https://postext.dev/fr/cookbook/arabic-workbook-rtl.md), [it](https://postext.dev/it/cookbook/arabic-workbook-rtl.md), [pt](https://postext.dev/pt/cookbook/arabic-workbook-rtl.md), [zh](https://postext.dev/zh/cookbook/arabic-workbook-rtl.md), [ja](https://postext.dev/ja/cookbook/arabic-workbook-rtl.md)

## باختصار

صفحات من كراسة عربية للأطفال عن حديقة المدرسة: اختيار الإجابة، والوصل بين العمودين، وملء الفراغ من صندوق كلمات، ووضع علامة صح أو خطأ، وترتيب الكلمات، والبحث عن الكلمات في شبكة حروف.

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

وحدة من كراسة تمارين في اللغة العربية للصف الثاني الابتدائي، على صفحة 17 × 24 سم، موضوعها حديقة المدرسة. يفتتحها شريط من لوحة مائية، وتحته لسان الوحدة وعنوانها، وسطر منقّط لكل من الاسم والصف والتاريخ. ثم تأتي التمارين التي يطبعها كتاب عربي للمرحلة الابتدائية: «اختر الإجابة الصحيحة» والخيارات أ) ب) ج) ثلاثة في السطر؛ و«صل بين العمودين»؛ و«أكمل الفراغ» من بنك الكلمات؛ وضع علامة في خانة صح أو خطأ؛ ورتّب الكلمات واكتب الجملة على السطر؛ وابحث عن سبع كلمات من الحديقة في شبكة الحروف. وتُختم الوحدة بالحلول. ويُنضَّد النص نفسه مرتين: طبعة المشرق ترقّم كل شيء بالأرقام العربية المشرقية ١ ٢ ٣، وطبعة المغرب بالأرقام الأوروبية. وكلتاهما تُقرأ من اليمين وتُجلَّد على اليمين.

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

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

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

```js
// script.js, سطرًا 34–53
// The locale sets the direction, the binding and the digits: 'ar' writes the exercise
// numbers, the items and the key in Arabic-Indic digits (١ ٢ ٣), 'ar-MA' in European ones.
// Options take the abjad letters (أ ب ج), true/false the words صح / خطأ, both from the
// language. Nothing below names a side: the engine sets every part from the right.
const tamrin = {
  id: 'tamrin',
  number: { shape: 'disc', fontFamily: LABEL, background: col('accent') },
  instruction: { fontFamily: LABEL, bold: false, color: col('ink') },
  options: { layout: 'row' }, // أ) ب) ج) side by side, three to a row (columns=3)
  blank: { look: 'dots', color: col('muted') }, // a dotted line, as Arab workbooks print it
  match: { color: col('accent') },
  bank: { box: 'sunduq', order: 'shuffle' },
  area: { kind: 'lines', color: col('rule') },
  grid: { fontFamily: TEXT, rule: col('leaf'), uppercase: false }, // Arabic has no capitals
  answers: { color: col('leaf'), fontFamily: TEXT },
  solutions: { box: 'hulul' },
  marginTop: em(1.1), marginBottom: em(0.5),
};
// The solutions where :::solutions stands: at the end of the unit.
const exercises = { solutions: { placement: 'directive' } };
```

## المكونات

**تعلّم**

- [التمارين](https://postext.dev/ar/docs/exercises.md#التمارين): سياج :::exercise: نشاط تُكتب تعليمته وبنوده وإجاباته في Markdown، ويُرقَّم ويُصفّ كما يقول نمط التمرين، على الورق وعلى الشاشة.
- [النص من اليمين إلى اليسار](https://postext.dev/ar/docs/arabic-layout.md#الاتجاه-وخوارزمية-النص-ثنائي-الاتجاه): يحدّد direction الاتجاه الأساسي للمستند: تأخذه القيمة 'auto' (الافتراضية) من نظام كتابة locale، فتجري 'ar' و'fa' و'he' من اليمين إلى اليسار؛ وترتّب الخوارزمية ثنائية الاتجاه (UAX #9) الكلمات اللاتينية والأرقام داخل كل سطر، ويُجلَّد الكتاب من اليمين.
- [أشكال الأرقام في الأعداد المولَّدة](https://postext.dev/ar/docs/configuration-language.md#لغة-المستند): يختار numerals ('auto'، 'latn'، 'arab'، 'arabext') أرقام كل عدد يكتبه المحرّك: أرقام الصفحات، وأرقام القوائم والحواشي، وعدّادات العناوين والأشكال، وصفحات جدول المحتويات والفهرس. وتتبع 'auto' قيمة locale: ١٢٣ للعربية، و1 2 3 في المغرب العربي (ar-MA، ar-DZ، ar-TN). ولا يُمَسّ نص المؤلف نفسه أبدًا.

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

- [أنماط التمارين](https://postext.dev/ar/docs/exercises.md#أنماط-التمارين)
- [الاختيار والصواب والخطأ](https://postext.dev/ar/docs/exercises.md#الاختيار-من-متعدد-وصح-أو-خطأ)
- [الفراغات وبنوك الكلمات](https://postext.dev/ar/docs/exercises.md#ملء-الفراغات-وبنك-الكلمات)
- [التوصيل والتصنيف](https://postext.dev/ar/docs/exercises.md#التوصيل-والتصنيف)
- [الترتيب](https://postext.dev/ar/docs/exercises.md#إعادة-الترتيب)
- [البحث عن الكلمات والكلمات المتقاطعة](https://postext.dev/ar/docs/exercises.md#البحث-عن-الكلمات-والكلمات-المتقاطعة)
- [الحلول](https://postext.dev/ar/docs/exercises.md#الحلول)
- [الخطوط العربية](https://postext.dev/ar/docs/arabic-layout.md#الخطوط)
- [أنماط الترقيم العربية](https://postext.dev/ar/docs/arabic-layout.md#الأرقام-وأنماط-الترقيم)
- [كتب مجلّدة من اليمين](https://postext.dev/ar/docs/configuration-page-layout.md#التجليد)
- [الشارات داخل السطر](https://postext.dev/ar/docs/configuration-styles.md#أنماط-الشارات)
- [إطارات التنبيه](https://postext.dev/ar/docs/configuration-callouts.md#أنماط-الإطارات)
- [صفحات افتتاح مصمَّمة](https://postext.dev/ar/docs/configuration-headings.md#الامتداد-والتصميم-المتقدم)
- [سمات العنوان](https://postext.dev/ar/docs/document-format.md#سمات-العناوين)
- [الصور في تصاميم الصفحة](https://postext.dev/ar/docs/configuration-headers-footers.md#عناصر-الصورة)
- [لوحة ألوان دلالية](https://postext.dev/ar/docs/configuration-fonts-colors-viewers.md#لوحة-الألوان)
- [التصدير إلى PDF](https://postext.dev/ar/docs/configuration-pdf-output.md#توليد-ملفات-pdf)
- [إطارات تنقسم أو تبقى كاملة](https://postext.dev/ar/docs/configuration-callouts.md#الحاوية-callout)
- [موازنة الأعمدة](https://postext.dev/ar/docs/configuration-page-flow.md#موازنة-الأعمدة)
- [الأسئلة المفتوحة ومساحات الكتابة](https://postext.dev/ar/docs/exercises.md#الأسئلة-المفتوحة-ومساحات-الكتابة)
- [الترويسات بحسب دور الصفحة](https://postext.dev/ar/docs/configuration-headers-footers.md#عناصر-النص)
- [أنماط الفقرات](https://postext.dev/ar/docs/configuration-styles.md#أنماط-الفقرات)
- [الخطوط المضمَّنة في PDF](https://postext.dev/ar/docs/configuration-pdf-output.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#أنماط-الإطارات), [`chipStyles`](https://postext.dev/ar/docs/configuration-styles.md#أنماط-الشارات), [`colorPalette`](https://postext.dev/ar/docs/configuration-fonts-colors-viewers.md#لوحة-الألوان), `exerciseStyles`, `exercises`, [`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#الصفحة), [`paragraphStyles`](https://postext.dev/ar/docs/configuration-styles.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#تحميل-الخطوط-قبل-الإخراج)

**الخطوط**

- Noto Naskh Arabic (OFL-1.1), Baloo Bhaijaan 2 (OFL-1.1)

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

### 1 · لا تسمِّ أي جهة

الشيفرة هي [الجواب المختصر](https://postext.dev/ar/cookbook/arabic-workbook-rtl.md#الجواب-المختصر) أعلاه. يجعل `locale: 'ar'` النص من اليمين إلى اليسار، ويجلّد الكتاب على اليمين، ويختار الأرقام؛ ويأخذ نمط التمارين من اللغة حروف الأبجد للخيارات، وكلمتي صح وخطأ لأسئلة الصواب والخطأ. أما عمودا الوصل وبنك الكلمات وشبكة البحث وأسطر الكتابة فمرسومة تصاميمَ إطار، والصفحة التي تجري من اليمين إلى اليسار تعكسها: فيقف العمود الأول على اليمين، وتجري الكلمة المقروءة أفقيًّا في الشبكة من اليمين إلى اليسار، وتتقابل نقاط الوصل في الوسط.

### 2 · افتتاحية الحديقة

```js
// script.js, سطرًا 58–73
const BAND = 170 / 2.4; // mm: the painting's height at the page's width
const opener = { enabled: true, minHeight: mm(BAND - 20 + 21), slot: { elements: [
  { kind: 'image', id: 'picture', resourceId: '{attr.pic}', decorative: true, reserve: false,
    placement: { anchor: { to: 'page', edge: 'top-left' },
      size: { width: mm(170), height: mm(BAND) } } },
  // In the flow of a right-to-left page 'left' is the start of the line: the right.
  { kind: 'text', id: 'unit', content: '{attr.kicker}', fontFamily: LABEL, fontSize: pt(11),
    fontWeight: 700, color: col('paper'), align: 'left',
    box: { backgroundColor: col('accent'), borderRadius: mm(1.5),
      padding: { top: mm(0.6), bottom: mm(0.4), left: mm(2.4), right: mm(2.4) } },
    placement: { anchor: { to: 'container', edge: 'top-left' },
      offset: { x: mm(0), y: mm(BAND - 20 + 3) } } },
  { kind: 'text', id: 'title', content: '{titleText}', fontFamily: LABEL, fontSize: pt(30),
    fontWeight: 700, color: col('ink'), align: 'left',
    placement: { anchor: { to: '#unit', edge: 'right-of' }, offset: { x: mm(4), y: mm(-5) } } },
] } };
```

اللوحة مثبّتة إلى الصفحة وتحتفظ بمكانها. أما اللسان والعنوان فيوضعان في تدفق الصفحة، حيث `left` هو بداية السطر، فيقفان على اليمين دون إحداثيات خاصة بهما. وتبقى أرقام الصفحات مثبّتة إلى الصفحة الفعلية، كالترويسات، وتسمّي كل جهة باسمها.

### 3 · طبعتان ونظاما أرقام

```js
// script.js, سطرًا 227–232
// Both are bound on the right and read from the right; only the locale changes.
const build = () => withLoadedFonts(() => buildDocument({ markdown, resources }, config()),
  { ...kitFonts(FONTS), text: markdown });
const mashriq = await build();
edition = { locale: 'ar-MA' }; // the same book for Morocco: European digits, still right to left
const docs = [mashriq, await build()];
```

الإعداد دالة، فيحصل كل تنضيد على كائنه الخاص، ولا يغيّر التنضيد الثاني إلا اللغة. يكتب `ar-MA` أرقام التمارين والبنود والحلول والصفحات بالأرقام الأوروبية، ويترك كل ما عداها على حاله: الاتجاه، والتجليد، وحروف الأبجد، وكلمات الحلول.

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

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

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

### script.js

```js
// ═══ Postext Cookbook · Nº 173 · An Arabic workbook, right to left ═══════════════
// https://postext.dev/en/cookbook/arabic-workbook-rtl
// Code: MIT · Text: original (CC BY 4.0) · Pictures: generated with diffusion models
// Fonts: Noto Naskh Arabic, Baloo Bhaijaan 2 (SIL OFL 1.1) · Needs postext ≥ 1.59.0
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 frame; the workbook is Arabic in all
const RECIPE = 'arabic-workbook-rtl';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: a garden workbook: ink, a terracotta accent, a leaf green, sand
const palette = {
  ink: '#22282e', // text
  accent: '#b9542a', // the one accent: exercise numbers, the unit tab, the word bank
  leaf: '#4f7d3a', // the second: rules and the word search's ruling
  sand: '#f8eedf', // the bank's ground, the answers box
  rule: '#c8b49b', // writing lines
  muted: '#6f655c', // folios, the name line, 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: 'accent (defaults)', value: { hex: palette.accent, model: 'hex' } },
];
// #endregion
// Naskh for the text, a rounded Arabic for the labels a child reads first.
const [TEXT, LABEL] = ['Noto Naskh Arabic', 'Baloo Bhaijaan 2'];

// #region answer: one exercise style read right to left, in the edition's digits
// The locale sets the direction, the binding and the digits: 'ar' writes the exercise
// numbers, the items and the key in Arabic-Indic digits (١ ٢ ٣), 'ar-MA' in European ones.
// Options take the abjad letters (أ ب ج), true/false the words صح / خطأ, both from the
// language. Nothing below names a side: the engine sets every part from the right.
const tamrin = {
  id: 'tamrin',
  number: { shape: 'disc', fontFamily: LABEL, background: col('accent') },
  instruction: { fontFamily: LABEL, bold: false, color: col('ink') },
  options: { layout: 'row' }, // أ) ب) ج) side by side, three to a row (columns=3)
  blank: { look: 'dots', color: col('muted') }, // a dotted line, as Arab workbooks print it
  match: { color: col('accent') },
  bank: { box: 'sunduq', order: 'shuffle' },
  area: { kind: 'lines', color: col('rule') },
  grid: { fontFamily: TEXT, rule: col('leaf'), uppercase: false }, // Arabic has no capitals
  answers: { color: col('leaf'), fontFamily: TEXT },
  solutions: { box: 'hulul' },
  marginTop: em(1.1), marginBottom: em(0.5),
};
// The solutions where :::solutions stands: at the end of the unit.
const exercises = { solutions: { placement: 'directive' } };
// #endregion


// #region opener: the garden to the bleed, the unit's tab and its title under it
const BAND = 170 / 2.4; // mm: the painting's height at the page's width
const opener = { enabled: true, minHeight: mm(BAND - 20 + 21), slot: { elements: [
  { kind: 'image', id: 'picture', resourceId: '{attr.pic}', decorative: true, reserve: false,
    placement: { anchor: { to: 'page', edge: 'top-left' },
      size: { width: mm(170), height: mm(BAND) } } },
  // In the flow of a right-to-left page 'left' is the start of the line: the right.
  { kind: 'text', id: 'unit', content: '{attr.kicker}', fontFamily: LABEL, fontSize: pt(11),
    fontWeight: 700, color: col('paper'), align: 'left',
    box: { backgroundColor: col('accent'), borderRadius: mm(1.5),
      padding: { top: mm(0.6), bottom: mm(0.4), left: mm(2.4), right: mm(2.4) } },
    placement: { anchor: { to: 'container', edge: 'top-left' },
      offset: { x: mm(0), y: mm(BAND - 20 + 3) } } },
  { kind: 'text', id: 'title', content: '{titleText}', fontFamily: LABEL, fontSize: pt(30),
    fontWeight: 700, color: col('ink'), align: 'left',
    placement: { anchor: { to: '#unit', edge: 'right-of' }, offset: { x: mm(4), y: mm(-5) } } },
] } };
// #endregion

// Folios at the foot's outer corner: running heads stay physical, so each side is named.
const foot = (id, content, parity, edge, x, extra = {}) => ({ kind: 'text', id, content, parity,
  pages: 'body', fontFamily: LABEL, fontSize: pt(9), color: col('muted'),
  placement: { anchor: { to: 'page', edge }, offset: { x: mm(x), y: mm(-11) } }, ...extra });
const footer = { elements: [
  foot('folio-v', '{pageNumber}', 'even', 'bottom-left', 16,
    { fontWeight: 700, color: col('accent') }),
  foot('title-v', '{title}', 'even', 'bottom-left', 24),
  foot('folio-r', '{pageNumber}', 'odd', 'bottom-right', -16,
    { fontWeight: 700, color: col('accent'), align: 'right' }),
  foot('title-r', '{chapterTitle}', 'odd', 'bottom-right', -24, { align: 'right' }),
] };

let edition = {}; // what the second build below changes: the Maghreb edition's locale
const config = () => ({
  locale: 'ar', // the Mashriq edition: ١ ٢ ٣
  colorPalette,
  exerciseStyles: [tamrin],
  exercises,
  page: { sizePreset: 'custom', width: mm(170), height: mm(240), dpi: 150,
    margins: { top: mm(20), bottom: mm(20), left: mm(18), right: mm(16), mirror: true } },
  layout: { layoutType: 'single' },
  bodyText: { fontFamily: TEXT, fontSize: pt(13), lineHeight: pt(22), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    textAlign: 'justify', firstLineIndent: pt(0), hyphenation: { enabled: false },
    avoidWidows: true, avoidOrphans: true },
  headings: { fontFamily: LABEL, color: col('ink'), fontWeight: 700,
    balancing: { enabled: false },
    levels: [{ level: 1, fontSize: pt(30), breakBefore: { parity: 'any' },
      advancedDesign: opener }] },
  orderedLists: { numberFormat: 'arabic', color: col('ink'), fontWeight: 700 },
  paragraphStyles: [
    { id: 'ism', fontFamily: LABEL, fontSize: pt(11), color: col('muted'), firstLineIndent: pt(0),
      textAlign: 'left', marginBottom: mm(3) },
    { id: 'colophon', fontFamily: LABEL, fontSize: pt(8), lineHeight: pt(13), color: col('muted'),
      textAlign: 'left', firstLineIndent: pt(0), marginTop: mm(6) },
  ],
  chipStyles: [{ id: 'khatt', backgroundEnabled: false, underline: 'dotted', borderWidth: pt(1),
    borderColor: col('muted'), minWidth: mm(26), paddingX: pt(0), paddingY: pt(0) }],
  calloutStyles: [
    { id: 'sunduq', background: col('sand'), border: { enabled: true, color: col('accent'),
      width: pt(1), style: 'dashed' }, borderRadius: mm(2.5),
    padding: { top: mm(2), right: mm(4), bottom: mm(2.5), left: mm(4) },
    body: { fontFamily: LABEL, fontSize: pt(12), textAlign: 'center' },
    marginTop: mm(1.5), marginBottom: mm(2.5) },
    { id: 'hulul', background: col('sand'), borderRadius: mm(2),
      stripe: { enabled: true, side: 'left', width: pt(3), color: col('leaf') },
      padding: { top: mm(3), right: mm(4), bottom: mm(3.5), left: mm(4) },
      titleStyle: { fontFamily: LABEL, fontSize: pt(13), fontWeight: 700, color: col('leaf') },
      body: { fontSize: pt(11), lineHeight: pt(19), color: col('ink'), firstLineIndent: pt(0) },
      marginTop: mm(6), marginBottom: mm(2), keepTogether: false },
  ],
  header: { elements: [] },
  footer,
  ...edition,
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "كراسة التمارين · الصف الثاني"
---

# في الحديقة {kicker="الوحدة الثالثة" pic="garden"}

:::paragraphs{style="ism"}
الاسم: :chip[ ]{style="khatt"}  الصف: :chip[ ]{style="khatt"}  التاريخ: :chip[ ]{style="khatt"}
:::

:::exercise{columns=3}
اخترِ الإجابة الصحيحة.

1. تحتاج النبتة كي تنمو إلى:
   - [ ] الحجارة
   - [x] الماء
   - [ ] الرمل
2. نسقي الحديقة في الصباح الباكر لأنّ الشمس فيه:
   - [x] ليست حارّة
   - [ ] شديدة الحرارة
   - [ ] غائبة
3. يصنع النحل العسل من:
   - [ ] أوراق الشجر
   - [ ] حبّات التراب
   - [x] رحيق الأزهار
:::

:::exercise
صِلْ كلّ كلمة في العمود الأول بما يناسبها في العمود الثاني.

- النحلة -> تصنع العسل
- الشمس -> تمنح الضوء والدفء
- الجذور -> تمتصّ الماء من التربة
- الفراشة -> تنتقل من زهرة إلى زهرة
:::

:::exercise{bank}
أكمِلِ الفراغ بالكلمة المناسبة من الصندوق.

زرعت سلمى بذرة [[الليمون]] في أصيص صغير، ووضعته قرب [[النافذة]] حتى يصله الضوء، وصارت [[تسقيه]] كلّ يومين. وبعد أسبوعين ظهرت ورقتان [[خضراوان]].

::bank[الملح | السيّارة]
:::

:::exercise{type=truefalse}
ضع علامة في المربّع المناسب.

- [x] تصنع النحلة العسل من رحيق الأزهار.
- [ ] تنمو شجرة الليمون في يوم واحد.
- [x] الجذور تثبّت النبتة في التربة.
- [ ] نسقي النباتات بالحليب.
:::

:::exercise{type=scramble}
رتّبِ الكلمات لتكوّن جملة مفيدة، ثمّ اكتبها على السطر.

- تسقي / سلمى / الأزهار / في / الصباح
- يحمل / خالد / أصيص / النعناع
:::

:::exercise{type=wordsearch size=8}
ابحث في الشبكة عن أسماء الأشياء التي نراها في الحديقة، ثمّ لوّنها.

- شجرة
- زهرة
- تربة
- بذرة
- ورقة
- نحلة
- غصن
:::

:::solutions

:::paragraphs{style="colophon"}
الحروف: Noto Naskh Arabic وBaloo Bhaijaan 2 (رخصة SIL OFL) · الرسم: مولَّد بنماذج الانتشار · التمارين: نصّ أصليّ للكتاب (CC BY 4.0)
:::
`; // content.ar.md: one text for both editions

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = {
  'Noto Naskh Arabic': ['400', '700'], // the text, the word search's letters
  'Baloo Bhaijaan 2': ['400', '700'], // instructions, numbers, the title
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
await loadFonts(FONTS, markdown);
// Each Arabic face's letters live in a file of their own (gotcha: arabic-fonts-subset).
await loadArabicFonts(FONTS, markdown);
await loadImage('garden-1600.jpg', asset('garden-1600.jpg'));
const resources = [{ id: 'garden', typeId: 'figure', kind: 'bitmap', createdAt: 0, updatedAt: 0,
  bitmap: { fileId: 'garden-1600.jpg', format: 'jpeg', width: 1600, height: 667 } }];
// #region editions: one text, two editions: Mashriq digits, then Maghreb digits
// Both are bound on the right and read from the right; only the locale changes.
const build = () => withLoadedFonts(() => buildDocument({ markdown, resources }, config()),
  { ...kitFonts(FONTS), text: markdown });
const mashriq = await build();
edition = { locale: 'ar-MA' }; // the same book for Morocco: European digits, still right to left
const docs = [mashriq, await build()];
// #endregion
showBook(docs, { title: t({ ar: 'كراسة تمارين عربية', en: 'An Arabic workbook, right to left',
  es: 'Un cuaderno de ejercicios árabe, de derecha a izquierda' }) });
offerPdf(() => renderToPdf(docs, { fontProvider: arabicPdfProvider, resourceBytes: imageBytes }),
  `${RECIPE}.pdf`);

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

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

// ─── Kit · fonts v3 ── the same in every recipe · postext.dev/cookbook
// Postext loads the faces a config asks for before layout and asks the kit
// for Fontsource's files, the ones the PDF embeds too.

/** buildDocumentWithFonts' options: the resolver, and FONTS' faces loaded
 *  with the config's. 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 files with their ranges: latin, then latin-ext and greek when
 *  `text` needs them (kitSubsetsFor). Null for a face Fontsource lacks. */
async function fontsourceResolver(family, weight, style, { text = '' } = {}) {
  const id = fontsourceId(family);
  const meta = await fontsourceMeta(family);
  if (meta && !(await fontsourceWeights(family, style)).includes(weight)) 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],
  }));
}

/** Each file's unicode-range (a function: the kit runs after the pen's code). */
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: loads `faces` (as FONTS) for the
 *  sample `text`; `optional` skips a face Fontsource lacks. Files are added in
 *  the order asked, the last winning a shared character. Resolves to the count. */
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 && (await fontsourceWeights(family, style)).includes(weight))) 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 face (fonts.check() says yes to any family). */
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, id = fontsourceId(family)) {
  return (fontsourceMeta.c ??= {})[id] ??= fetch(`https://api.fontsource.org/v1/fonts/${id}`)
    .then((res) => (res.ok ? res.json() : null), () => null);
}

/** The weights the package ships in `style`: the API pairs none (no Libre
 *  Caslon 700 italic file), so italics are read from latin-italic.css. */
function fontsourceWeights(family, style, id = fontsourceId(family)) {
  return (fontsourceWeights.c ??= {})[id + style] ??= fontsourceMeta(family).then(async (m) => {
    if (!m?.styles.includes(style)) return m ? [] : [400, 700];
    const css = style === 'italic' ? await fetch(`${await fontsourceAt(id)}latin-italic.css`).then((r) => (r.ok ? r.text() : ''), () => '') : '';
    const w = [...css.matchAll(/weight: (\d+)/g)].map((x) => +x[1]);
    return w.length ? w : m.weights;
  });
}

// ─── 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 in that style, 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 s = style === 'italic' && meta && !meta.styles.includes('italic') ? 'normal' : style;
  const shipped = meta ? await fontsourceWeights(family, s) : [];
  const weights = shipped.length ? shipped : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  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 · arabic v2 ── Arabic-script faces · postext.dev/cookbook
// Fontsource ships an Arabic family as one file per subset and weight: the
// `arabic` file holds the letters, the harakat, the Arabic-Indic digits, the
// Arabic punctuation and the presentation forms; `latin` and `latin-ext`
// hold the rest. loadFonts loads the latin files; this block adds the arabic
// file of every Arabic family, for the canvas and for the PDF, which shapes
// the letters with HarfBuzz from the same bytes.

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

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

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

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

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

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

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

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

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

## تنويعات

### اطبع كتاب المعلم

تُطبع الإجابات عندئذ في أماكنها بلون `answers`: النقاط موصولة، والكلمات في فراغاتها، والخانات الصحيحة مملوءة، والكلمات محاطة بدوائر في الشبكة.

```diff
-const exercises = { solutions: { placement: 'directive' } };
+const exercises = { edition: 'teacher', solutions: { placement: 'none' } };
```

### اكتب التمارين بالصينية

تنضّد [كراسة التمارين الصينية](https://postext.dev/ar/cookbook/chinese-exercise-book.md) الأنواع نفسها من التمارين بأقواسها وأرقامها.

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

- **اوسم الكتاب العربي بـ 'ar'، لا بـ LANG.** نسختا الوصفة هما en وes، لكن المثال العربي عربي في كلتيهما: `locale: LANG` سيجعله من اليسار إلى اليمين، ويجلّده على اليسار، ويرقّم صفحاته 1 2 3، ويسمّي أشكاله Figure أو Figura. ومنذ postext 1.30 صار الوسم أيضًا اللغة التي يُشكَّل بها النص (يُقاس ويُرسم ويُضمَّن بها)، فتحت وسم إنجليزي أو إسباني لا يرسم خط مثل Markazi Text الأشكال العربية لعلامتَي التنصيص « » وللنقطة، وتنكسر الأسطر في مواضع أخرى. اكتب الوسم بنفسك: 'ar' (الأرقام العربية المشرقية، عُرف المشرق)، أو منطقة مثل 'ar-EG' أو 'ar-SA'، أو 'ar-MA' أو 'ar-DZ' أو 'ar-TN' لنسخة مغاربية بالأرقام الأوروبية. أما الصفحة اللاتينية التي تقتبس العربية فقط فتحتفظ بلغتها.
- **الخطوط العربية تحتاج إلى ملفها arabic، عبر الكتلة arabic.** يقدّم Fontsource الخطوط Amiri وNoto Naskh Arabic وScheherazade New في ملف لكل مجموعة فرعية، والحروف العربية في ملف arabic. لا يجلب loadFonts إلا latin (وlatin-ext)، فيأتي النص العربي على الشاشة من خط النظام ويُقاس خطأً، ويسلّم fontsourceProvider ملف latin ذاك إلى PDF، فيطبع مربعات فارغة. اذكر كتلة الأدوات arabic، واستدعِ loadArabicFonts(FONTS, markdown) بعد loadFonts، مع ذكر كل وزن تضع به الصفحاتُ نصًا عربيًا في FONTS، وأعطِ renderToPdf القيمة fontProvider: arabicPdfProvider.

- أغلب الخطوط العربية تخلو من ✓ و✗، لذلك تُكتب الإجابة في أسئلة الصواب والخطأ بكلمتي صح وخطأ، ويطلب نص السؤال وضع علامة في الخانة.
- تملأ شبكة البحث خاناتها الفارغة بحروف كلماتها نفسها، في صورتها المنفصلة. فاختر كلمات متنوعة الحروف، وإلا امتلأت الشبكة بالتاء المربوطة ة.

## الحقوق

- الوصفة: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- الصور: A school garden in an Arab town: date palms, a fountain, lemon trees, a girl watering plants and a boy carrying a pot of mint.: Generated With Diffusion Models, أصلي
- الخطوط: Noto Naskh Arabic (OFL-1.1), Baloo Bhaijaan 2 (OFL-1.1)
- الشيفرة: MIT · محتوى المثال: CC-BY-4.0

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

- [رقم 161 · كراسة خط بعشرة خطوط مدرسية](https://postext.dev/ar/cookbook/handwriting-workbook.md): كراسة أولى لتعلّم الكتابة بكل لغة من لغات الموقع: الخط المدرسي لكل بلد على تسطير دفاتره، ونموذج، وحروف منقّطة للتتبّع، وأسطر فارغة. · المستوى 2 (متوسط) · كتب التمارين والتدريبات, الكتب المدرسية
- [رقم 109 · طبعة مغاربية لنص عربي بالأرقام الأوروبية](https://postext.dev/ar/cookbook/maghreb-edition-european-digits.md): فصل عربي مطبوع للمغرب: اللغة 'ar-MA' تُبقي النص من اليمين إلى اليسار والتجليد على اليمين، وتكتب كل عدد يولّده المحرّك هكذا: 1، 2، 3. · المستوى 1 (أساسي) · الأدلة والمراجع
- [رقم 171 · كراسة تمارين صينية للتلميذ وللمعلّم](https://postext.dev/ar/cookbook/chinese-exercise-book.md): كراسة 练习册 في اللغة والرياضيات: أقسام 一、二、، وأقواس （　）، ومربعات 田字格، وعمليات في أعمدة، منضّدة مرتين من نص واحد، للتلميذ وللمعلّم. · المستوى 2 (متوسط) · كتب التمارين والتدريبات, الكتب المدرسية