# بحث عربي محكَّم بحواشٍ واستشهادات وفهرس

> بحث في مجلة عربية: حواشٍ «(١)» مرقّمة لكل صفحة، واستشهادات CSL بينها بالإعدادات المحلية العربية، وفهرس مرتّب دون اعتبار «ال» التعريف.

- نسخة HTML: https://postext.dev/ar/cookbook/arabic-research-article
- وصفة رقم 107 · بنية الكتاب · المستوى 3 (متقدم) · المخرجات: Canvas, PDF
- الأنواع: الأوراق البحثية والأكاديمية
- تتطلب postext ≥ 1.15.0, postext-pdf ≥ 1.15.0 · اختُبرت مع 1.15.0, postext-pdf 1.15.0 بتاريخ 2026-10-04
- الصفحات: [٨٧](https://postext.dev/cookbook/arabic-research-article/en/p01.webp?v=47b8aa2d), [٨٨](https://postext.dev/cookbook/arabic-research-article/en/p02.webp?v=47b8aa2d), [٨٩](https://postext.dev/cookbook/arabic-research-article/en/p03.webp?v=47b8aa2d), [٩٠](https://postext.dev/cookbook/arabic-research-article/en/p04.webp?v=47b8aa2d), [٩١](https://postext.dev/cookbook/arabic-research-article/en/p05.webp?v=47b8aa2d)
- PDF: https://postext.dev/cookbook/arabic-research-article/en/arabic-research-article.pdf?v=47b8aa2d
- افتح في Sandbox: https://postext.dev/ar/sandbox#recipe=arabic-research-article&lang=en (.postext: https://postext.dev/cookbook/arabic-research-article/en/arabic-research-article.postext)
- آخر تحديث: 2026-10-04
- لغات أخرى: [en](https://postext.dev/en/cookbook/arabic-research-article.md), [es](https://postext.dev/es/cookbook/arabic-research-article.md), [ca](https://postext.dev/ca/cookbook/arabic-research-article.md), [zh](https://postext.dev/zh/cookbook/arabic-research-article.md)

## باختصار

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

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

خمس صفحات من عدد لمجلة عربية متخيَّلة، بقياس 17 × 24 سم، تبدأ من الصفحة 87: بحث يسأل هل يُبطئ الضبط بالكشيدة القراءة، منضّد بخط Amiri بحجم 12 pt، وعناوين أقسامه بخط Noto Kufi Arabic. تقع حواشيه أسفل كل صفحة، وتُرقَّم «(١)»، «(٢)» ابتداءً من الواحد في كل صفحة، كما ترقّمها المجلات العربية؛ والاستشهادات، المكتوبة `[@ayalon2016]` في Markdown، حواشٍ هي الأخرى، ينسّقها نمط Chicago للحواشي بالإعدادات المحلية العربية لـ CSL. تتبعها قائمة مراجع، العربية منها أولًا، ويختم البحثَ فهرسٌ بعمودين. يضع الفهرس «الكشيدة» تحت الكاف و«الصحف اليومية» تحت الصاد: «ال» التعريف لا تُحتسب. ويفعل [مقال التاريخ بحواشي Chicago](https://postext.dev/ar/cookbook/history-essay-chicago-notes.md) الشيء نفسه بالإنجليزية.

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

- كيف أوثّق المصادر في بحث عربي، بحواشٍ سفلية وقائمة مراجع؟
- كيف أستشهد بالمصادر في مقال عربي، بحواشٍ سفلية وقائمة مراجع؟

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

```js
// script.js, سطرًا 35–58
// Citations are written [@ayalon2016, 45] in the text; a note style puts each one in a
// footnote, numbered with the author's own [^notes]. The CSL locale is Arabic: ص for a page.
registerCitationEngine(createCiteprocEngine({ styles: STYLES, locales: LOCALES }));
const citations = {
  style: 'chicago-notes-bibliography', notes: 'footnote', locale: 'ar',
  bibliography: { fontSize: em(0.9), lineHeight: pt(17), hangingIndent: em(2),
    entrySpacing: pt(2) },
};
const footnotes = {
  markerTemplate: '({n})', // «(١)», in the document's digits
  numbering: 'page', // from (١) again on every page, as Arabic journals number them
  noteNumberPosition: 'inline', // the note opens with (١) on the line, not raised
  fontSize: pt(10), lineHeight: pt(18), spaceBetween: pt(2), // 1.8 ×: tanwīn clears the line
  textAlign: 'start', // ragged from the right: a Latin title would open wide gaps
  separator: { width: 0.3, lineWidth: pt(0.5), color: col('red') }, // on the start side
};
// The index sorts by the word after the article: الكشيدة files under ك, not under ا.
// ignoreArticle is already true for an Arabic index; it is written out to be seen.
const index = {
  ignoreArticle: true,
  fontFamily: TEXT, fontSize: pt(10.5), lineHeight: pt(16), indent: em(1.2),
  main: { bold: true }, // the page that defines the term
  groups: { fontFamily: LABEL, fontSize: pt(10), fontWeight: 700, color: col('red') },
};
```

## المكونات

**تعلّم**

- [العربية لغةً للمستند](https://postext.dev/ar/docs/arabic-layout.md#البدء-بكتاب-عربي): تعطي locale 'ar' (مع أي منطقة) التعليقات وعبارات الاستمرار بالعربية (شكل، جدول، يتبع)، والتواريخ مكتوبة بالعربية، وlocale العربية في CSL للاستشهادات، والترتيب العربي في الفهرس، ولا تقسيم للكلمات بالواصلة.
- [فهرس يُرتَّب دون أداة التعريف](https://postext.dev/ar/docs/configuration.md#الفهرس-الأبجدي): يرتّب index.ignoreArticle (المفعَّل للعربية) المداخل ويجمّعها كأن أداة التعريف ال غير موجودة: تُصنَّف البصرة تحت ب، بين بدر وبغداد، وتُطبع كما كُتبت؛ وتُرتَّب صور الهمزة والألف معًا.
- [الاستشهادات في الحواشي](https://postext.dev/ar/docs/document-format.md#الاستشهادات-وقائمة-المراجع): يضع نمط الحواشي (Chicago notes، OSCOLA، حواشي GB/T 7714) كل استشهاد حاشيةً سفلية، مع صيغ مختصرة للاستشهادات اللاحقة، أو تعليقًا بصفين داخل السطر الصيني.

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

- [الحواشي السفلية](https://postext.dev/ar/docs/document-format.md#الحواشي-السفلية)
- [الاستشهادات بأسلوب توثيق](https://postext.dev/ar/docs/document-format.md#الاستشهادات-وقائمة-المراجع)
- [قائمة المراجع من البيانات المرجعية](https://postext.dev/ar/docs/document-format.md#الاستشهادات-وقائمة-المراجع)
- [الفهرس الأبجدي في آخر الكتاب](https://postext.dev/ar/docs/document-format.md#الفهرس-الأبجدي)
- [النص من اليمين إلى اليسار](https://postext.dev/ar/docs/arabic-layout.md#الاتجاه-وخوارزمية-النص-ثنائي-الاتجاه)
- [الخطوط العربية](https://postext.dev/ar/docs/arabic-layout.md#الخطوط)
- [أشكال الأرقام في الأعداد المولَّدة](https://postext.dev/ar/docs/configuration.md#لغة-المستند)
- [العناوين المرقّمة](https://postext.dev/ar/docs/configuration.md#تجاوزات-كل-مستوى)
- [أنماط العناوين](https://postext.dev/ar/docs/configuration.md#أنماط-العناوين)
- [صفحات افتتاح مصمَّمة](https://postext.dev/ar/docs/configuration.md#الامتداد-والتصميم-المتقدم)
- [الترويسات وأرقام الصفحات](https://postext.dev/ar/docs/configuration.md#رؤوس-الصفحات-وتذييلاتها)
- [إطارات التنبيه](https://postext.dev/ar/docs/configuration.md#أنماط-الإطارات)
- [التصدير إلى PDF](https://postext.dev/ar/docs/configuration.md#توليد-ملفات-pdf)
- [فقرات بالاتجاه المعاكس](https://postext.dev/ar/docs/arabic-layout.md#اتجاه-المستند-والكتلة-والنص-داخل-السطر)
- [موازنة الأعمدة](https://postext.dev/ar/docs/configuration.md#موازنة-الأعمدة)
- [سمات العنوان](https://postext.dev/ar/docs/document-format.md#سمات-العناوين)
- [لون الورق](https://postext.dev/ar/docs/configuration.md#الصفحة)
- [الترويسات بحسب دور الصفحة](https://postext.dev/ar/docs/configuration.md#عناصر-النص)
- [أنماط الفقرات](https://postext.dev/ar/docs/configuration.md#أنماط-الفقرات)
- [الخطوط المضمَّنة في PDF](https://postext.dev/ar/docs/configuration.md#لماذا-مزوّد-الخطوط)
- [كتب مجلّدة من اليمين](https://postext.dev/ar/docs/configuration.md#التجليد)
- [ترقيم روماني للصفحات التمهيدية](https://postext.dev/ar/docs/document-format.md#numbering)
- [هندسة القسم](https://postext.dev/ar/docs/configuration.md#أنماط-العناوين)
- [فصول بلا أرقام](https://postext.dev/ar/docs/configuration.md#أنماط-العناوين)

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

- [`bodyText`](https://postext.dev/ar/docs/configuration.md#نص-المتن), [`calloutStyles`](https://postext.dev/ar/docs/configuration.md#أنماط-الإطارات), [`citations`](https://postext.dev/ar/docs/configuration.md#الاستشهادات), [`colorPalette`](https://postext.dev/ar/docs/configuration.md#لوحة-الألوان), [`footer`](https://postext.dev/ar/docs/configuration.md#رؤوس-الصفحات-وتذييلاتها), `footnotes`, [`header`](https://postext.dev/ar/docs/configuration.md#رؤوس-الصفحات-وتذييلاتها), [`headingStyles`](https://postext.dev/ar/docs/configuration.md#أنماط-العناوين), [`headings`](https://postext.dev/ar/docs/configuration.md#العناوين), [`index`](https://postext.dev/ar/docs/configuration.md#الفهرس-الأبجدي), [`layout`](https://postext.dev/ar/docs/configuration.md#التخطيط), [`locale`](https://postext.dev/ar/docs/configuration.md#تقسيم-الكلمات-بالواصلة), [`page`](https://postext.dev/ar/docs/configuration.md#الصفحة), [`paragraphStyles`](https://postext.dev/ar/docs/configuration.md#أنماط-الفقرات)

**واجهات API**

- [`LOCALES`](https://postext.dev/ar/docs/document-format.md#الاستشهادات-وقائمة-المراجع), [`STYLES`](https://postext.dev/ar/docs/document-format.md#الاستشهادات-وقائمة-المراجع), [`buildDocument`](https://postext.dev/ar/docs/configuration.md#بناء-مستند), [`clearMeasurementCache`](https://postext.dev/ar/docs/configuration.md#ذاكرة-القياس-المؤقتة), [`createCiteprocEngine`](https://postext.dev/ar/docs/document-format.md#الاستشهادات-وقائمة-المراجع), [`decompressWoff2`](https://postext.dev/ar/docs/configuration.md#مزوّد-الخطوط-في-المتصفح-fontsource--woff2), [`registerCitationEngine`](https://postext.dev/ar/docs/document-format.md#الاستشهادات-وقائمة-المراجع), [`renderPageToCanvas`](https://postext.dev/ar/docs/configuration.md#رسم-صفحة-في-صورة-نقطية), [`renderToPdf`](https://postext.dev/ar/docs/configuration.md#توليد-ملفات-pdf)

**الخطوط**

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

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

### 1 · الحواشي والاستشهادات والفهرس في موضع واحد

الكود هو [الجواب المختصر](#الجواب-المختصر) أعلاه. إعدادات الحواشي هي الثلاثة التي تطلبها الكتب العربية: `markerTemplate: '({n})'` للقوسين، و`numbering: 'page'` ليبدأ الترقيم من جديد في كل صفحة، و`noteNumberPosition: 'inline'` لتبدأ الحاشية بـ «(١)» على سطرها؛ والأرقام أرقام المستند، والخط الفاصل يقع على اليمين ([الحواشي السفلية](/ar/docs/arabic-layout#الحواشي-السفلية)). وتشترك الاستشهادات مع الحواشي في ترقيمها. ويعطي `citations.locale: 'ar'` مصطلحات CSL بالعربية، مثل «عدد» لرقم العدد. ويرتّب `index.ignoreArticle` كل مدخل بالكلمة التي تلي «ال» ويوحّد صور الهمزة، فتذهب «أميري» و«الأعمدة» كلتاهما تحت الألف ([المحتويات والفهرس](/ar/docs/arabic-layout#المحتويات-والفهرس)). وهو مفعّل افتراضيًا في الفهرس العربي، وكُتب هنا صراحةً ليُرى.

![Opening page ٩١: فهرس الأعلام والموضوعات.](https://postext.dev/cookbook/arabic-research-article/en/p05.webp?v=47b8aa2d)

*الفهرس: عمودان من اليمين، والحروف بالأحمر، و«الكشيدة» تحت الكاف ومعها «انظر أيضًا».*

### 2 · ترويسة مجلة بلا شريط

```js
// script.js, سطرًا 62–75
const centred = (y, extra = {}) => ({ anchor: { to: 'container', edge: 'top' },
  offset: { y: mm(y) }, size: { width: 'fill' }, ...extra });
const line = (id, content, family, size, colour, y, extra = {}) => ({ kind: 'text', id,
  content, fontFamily: family, fontSize: pt(size), color: col(colour), align: 'center',
  overflow: 'wrap', placement: centred(y), ...extra });
const masthead = { enabled: true, minHeight: mm(70), slot: { elements: [
  line('journal', JOURNAL, LABEL, 9, 'red', 0, { fontWeight: 700 }),
  line('issue', '{attr.issue}', LABEL, 8, 'muted', 6),
  { kind: 'rule', id: 'rule', thickness: pt(0.5), color: col('rule'),
    placement: centred(13) },
  line('title', '{titleText}', TEXT, 22, 'ink', 18, { fontWeight: 700, lineHeight: 1.45 }),
  line('author', '{attr.author}', TEXT, 13, 'ink', 45),
  line('affiliation', '{attr.affiliation}', TEXT, 10, 'muted', 52),
] } };
```

عنوان البحث هو العنوان من المستوى الأول، يرسمه تصميم: اسم المجلة ورقم العدد، وخط رفيع، والعنوان في سطرين موسّطين، والمؤلفة. كُتب سطر العدد بالأرقام العربية المشرقية، لأن سمة التصميم نصّ كتبه المؤلف ولا يعيد المحرّك كتابته. ويبدأ ترقيم الصفحات من 87 (`page.pageNumbering.startAt`)، فتُظهر أرقام الصفحات موضع البحث في العدد.

### 3 · ترويسات من الزاوية الخارجية

```js
// script.js, سطرًا 79–89
const head = (id, content, parity, edge, x) => ({ kind: 'text', id, content, parity,
  pages: 'body', fontFamily: LABEL, fontSize: pt(7.5), color: col('muted'), align: edge,
  placement: { anchor: { to: 'page', edge: `top-${edge}` }, offset: { x: mm(x), y: mm(13) } } });
const folio = (id, parity, edge, x) => ({ ...head(id, '{pageNumber}', parity, edge, x),
  fontWeight: 700, color: col('red') });
const header = { elements: [
  folio('r-folio', 'even', 'right', -SIDE.outer),
  head('r-head', JOURNAL, 'even', 'right', -(SIDE.outer + 9)),
  head('l-head', 'سلمى الخطيب: أثر الكشيدة في سرعة القراءة', 'odd', 'left', SIDE.outer + 9),
  folio('l-folio', 'odd', 'left', SIDE.outer),
] };
```

تحمل الصفحات اليمنى اسم المجلة، واليسرى اسم المؤلفة وعنوانًا مختصرًا، ولكل منها رقم صفحتها عند الزاوية الخارجية. تحتفظ عناصر الترويسة بجوانبها الفعلية، فالصفحة الزوجية، الواقعة على اليمين في هذا التجليد، تُثبَّت إلى `top-right`.

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

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

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

### script.js

```js
// ═══ Postext Cookbook · Nº 107 · An Arabic research article with notes, citations and an index ═══
// https://postext.dev/en/cookbook/arabic-research-article
// Code: MIT · Text: original Arabic prose (CC BY 4.0) · Pictures: none
// Fonts: Amiri, Noto Kufi Arabic (SIL OFL 1.1) · Needs postext ≥ 1.15.0
import {
  buildDocument, renderPageToCanvas, clearMeasurementCache, registerCitationEngine,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';
import { createCiteprocEngine, STYLES, LOCALES } from 'https://esm.sh/postext-citeproc';

const LANG = 'en'; // @lang: the language of the frame; the article is Arabic in both editions
const RECIPE = 'arabic-research-article';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: a journal's dark red on a warm white
const palette = {
  ink: '#1d1a19', // text
  red: '#7d2028', // the accent: the journal's name, section numbers, the notes' rule
  rose: '#f1e4e1', // the abstract's ground
  rule: '#c8bcb5', // hairlines
  muted: '#655d58', // running heads, the colophon
  paper: '#fffdfa',
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = Object.entries({ ...palette, 'main-color': palette.red })
  .map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } }));
// #endregion
const [TEXT, LABEL] = ['Amiri', 'Noto Kufi Arabic'];
const [BODY, LEAD] = [12, 20]; // pt: Amiri, partly vocalised, at 1.67 × the size
const TRIM = { width: 170, height: 240 }; // mm: 17 × 24 cm, the Arab journal
const SIDE = { inner: 22, outer: 18 }; // mm
const JOURNAL = 'مجلة دراسات الكتاب والنشر';

// #region answer: notes «(١)» per page, the citations among them, an index without ال
// Citations are written [@ayalon2016, 45] in the text; a note style puts each one in a
// footnote, numbered with the author's own [^notes]. The CSL locale is Arabic: ص for a page.
registerCitationEngine(createCiteprocEngine({ styles: STYLES, locales: LOCALES }));
const citations = {
  style: 'chicago-notes-bibliography', notes: 'footnote', locale: 'ar',
  bibliography: { fontSize: em(0.9), lineHeight: pt(17), hangingIndent: em(2),
    entrySpacing: pt(2) },
};
const footnotes = {
  markerTemplate: '({n})', // «(١)», in the document's digits
  numbering: 'page', // from (١) again on every page, as Arabic journals number them
  noteNumberPosition: 'inline', // the note opens with (١) on the line, not raised
  fontSize: pt(10), lineHeight: pt(18), spaceBetween: pt(2), // 1.8 ×: tanwīn clears the line
  textAlign: 'start', // ragged from the right: a Latin title would open wide gaps
  separator: { width: 0.3, lineWidth: pt(0.5), color: col('red') }, // on the start side
};
// The index sorts by the word after the article: الكشيدة files under ك, not under ا.
// ignoreArticle is already true for an Arabic index; it is written out to be seen.
const index = {
  ignoreArticle: true,
  fontFamily: TEXT, fontSize: pt(10.5), lineHeight: pt(16), indent: em(1.2),
  main: { bold: true }, // the page that defines the term
  groups: { fontFamily: LABEL, fontSize: pt(10), fontWeight: 700, color: col('red') },
};
// #endregion

// #region masthead: the journal's name, the article's title and its author, centred
const centred = (y, extra = {}) => ({ anchor: { to: 'container', edge: 'top' },
  offset: { y: mm(y) }, size: { width: 'fill' }, ...extra });
const line = (id, content, family, size, colour, y, extra = {}) => ({ kind: 'text', id,
  content, fontFamily: family, fontSize: pt(size), color: col(colour), align: 'center',
  overflow: 'wrap', placement: centred(y), ...extra });
const masthead = { enabled: true, minHeight: mm(70), slot: { elements: [
  line('journal', JOURNAL, LABEL, 9, 'red', 0, { fontWeight: 700 }),
  line('issue', '{attr.issue}', LABEL, 8, 'muted', 6),
  { kind: 'rule', id: 'rule', thickness: pt(0.5), color: col('rule'),
    placement: centred(13) },
  line('title', '{titleText}', TEXT, 22, 'ink', 18, { fontWeight: 700, lineHeight: 1.45 }),
  line('author', '{attr.author}', TEXT, 13, 'ink', 45),
  line('affiliation', '{attr.affiliation}', TEXT, 10, 'muted', 52),
] } };
// #endregion

// #region heads: the journal on the right-hand page, the author and title on the left
const head = (id, content, parity, edge, x) => ({ kind: 'text', id, content, parity,
  pages: 'body', fontFamily: LABEL, fontSize: pt(7.5), color: col('muted'), align: edge,
  placement: { anchor: { to: 'page', edge: `top-${edge}` }, offset: { x: mm(x), y: mm(13) } } });
const folio = (id, parity, edge, x) => ({ ...head(id, '{pageNumber}', parity, edge, x),
  fontWeight: 700, color: col('red') });
const header = { elements: [
  folio('r-folio', 'even', 'right', -SIDE.outer),
  head('r-head', JOURNAL, 'even', 'right', -(SIDE.outer + 9)),
  head('l-head', 'سلمى الخطيب: أثر الكشيدة في سرعة القراءة', 'odd', 'left', SIDE.outer + 9),
  folio('l-folio', 'odd', 'left', SIDE.outer),
] };
// #endregion

const config = () => ({ // a factory: the engine caches resolved configs per object
  locale: 'ar', // written out, never LANG (gotcha: arabic-locale-tag)
  colorPalette, citations, footnotes, index,
  page: { width: mm(TRIM.width), height: mm(TRIM.height), dpi: 150,
    backgroundColor: col('paper'), pageNumbering: { startAt: 87 },
    margins: { top: mm(24), bottom: mm(22), left: mm(SIDE.inner), right: mm(SIDE.outer),
      mirror: true } },
  layout: { layoutType: 'single' },
  bodyText: { fontFamily: TEXT, fontSize: pt(BODY), lineHeight: pt(LEAD), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    textAlign: 'justify', firstLineIndent: em(1.5), indentAfterHeading: false,
    optimalLineBreaking: true, avoidWidows: true, avoidOrphans: true },
  headings: { fontFamily: LABEL, fontWeight: 700, color: col('ink'),
    balancing: { enabled: false }, // no space added over the heads to fill a page
    levels: [
    // Restated: any headings object drops the H1 break (gotcha: headings-drop-h1-break).
    { level: 1, breakBefore: { enabled: true, parity: 'any' }, marginTop: pt(0),
      marginBottom: pt(0), advancedDesign: masthead },
    // ١- المقدمة: the section number in the document digits, a hyphen after it.
    { level: 2, fontSize: pt(12), lineHeight: pt(LEAD), numberingTemplate: '{2}-',
      numberSeparator: ' ', color: col('red'), marginTop: pt(LEAD), marginBottom: pt(4) },
  ] },
  headingStyles: [
    { id: 'unnumbered', numbered: false }, // the abstract, the references, the index
    // The index: a title across the page and two columns, the first on the right.
    { id: 'index', numbered: false, span: 'page', breakBefore: { enabled: true, parity: 'any' },
      advancedDesign: { enabled: false }, fontSize: pt(18), lineHeight: pt(30),
      marginBottom: pt(LEAD),
      layout: { layoutType: 'double', gutterWidth: mm(8) } },
  ],
  calloutStyles: [{ id: 'abstract', background: col('rose'),
    padding: { top: mm(3.5), right: mm(5), bottom: mm(3.5), left: mm(5) },
    marginTop: pt(0), marginBottom: pt(0),
    titleStyle: { fontFamily: LABEL, fontSize: pt(9), fontWeight: 700, color: col('red') },
    body: { fontSize: pt(10.5), lineHeight: pt(17), firstLineIndent: pt(0) } }],
  paragraphStyles: [{ id: 'colophon', fontFamily: TEXT, fontSize: pt(9), lineHeight: pt(13),
    color: col('muted'), textAlign: 'left', firstLineIndent: pt(0), marginTop: pt(LEAD) }],
  header, footer: { elements: [] },
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "أثر الكشيدة في سرعة قراءة النص العربي المطبوع"
---

# أثر الكشيدة في سرعة قراءة النص العربي المطبوع: تجربة على قرّاء جامعيين {issue="المجلد ١٤ · العدد ٣ · خريف ٢٠٢٦" author="سلمى الخطيب" affiliation="قسم علوم المعلومات والنشر، جامعة المثال"}

:::callout{type="abstract" title="ملخص"}
تبحث هذه الدراسة في أثر ضبط السطور بالكشيدة في سرعة قراءة النص العربي المطبوع وفي فهمه. قرأ ستون طالبًا جامعيًا نصوصًا مضبوطة بثلاث طرق: بالمسافات وحدها، وبالكشيدة وحدها، وبمزيج منهما. ولم تختلف سرعة القراءة اختلافًا ذا دلالة بين الطرق الثلاث، غير أن القرّاء فضّلوا الطريقة المختلطة، وكانت أخطاء الفهم في الكشيدة الكثيفة أعلى قليلًا.
:::

## المقدمة

يملأ :index[الطابع]{term="الطباعة العربية"} العربي السطر حتى نهايته بإحدى وسيلتين: أن يوسّع المسافات بين الكلمات، أو أن يمدّ بعض الحروف المتصلة بما يسمّى :index[الكشيدة]{main}:index{term="الكشيدة" seealso="المسافات بين الكلمات"} أو :index[التطويل]{see="الكشيدة"}. والوسيلة الثانية قديمة قِدم الخط نفسه، عرفها :index[النسّاخ] قبل المطبعة، ثم نقلها صانعو :index[الحروف المعدنية] إلى صناديقهم في صورة قطع خاصة تُدسّ بين أجزاء الكلمة.[@nemeth2017] وحين انتقلت الطباعة العربية إلى الحاسوب، صار المدّ عملية آلية يقوم بها البرنامج، وصار السؤال عن مقداره ومواضعه سؤالًا تقنيًا قبل أن يكون جماليًا.[^raqim]

[^raqim]: تُبنى قواعد المواضع الجائزة للمدّ في البرامج الحديثة على ما وصفه الخطاطون في خط :index[النسخ]، ولا سيما المنع بعد الكاف واللام، وقبل الحروف المستديرة في آخر الكلمة.

ولا يكاد يُختلف في أن الكشيدة جزء من :index[جماليات الصفحة العربية]، لكن أثرها في القراءة لم يُدرس إلا قليلًا. فالدراسات القليلة المتاحة اعتمدت على تقدير القرّاء للنص، لا على قياس قراءتهم له،[@hashimi2019, ٧٧; @attar2021] والمعايير الدولية تكتفي بوصف المواضع التي يجوز فيها المدّ دون أن تحدد مقداره.[@alreq] ويحاول هذا البحث أن يقيس الأثر قياسًا مباشرًا.

## الكشيدة في الطباعة العربية

حين أُنشئت :index[مطبعة بولاق]{term="بولاق، مطبعة"} في عشرينيات القرن التاسع عشر، سُبكت حروفها على نماذج من الخط الذي يكتبه النسّاخ، وصار الكتاب المطبوع بعد ذلك بعقود سلعة يقرؤها جمهور واسع.[@ayalon2016] وكان صفّاف الحروف يضبط السطر بقطع من المدّ يدسّها بين أجزاء الكلمة، إلى أن ظهرت آلات :index[الصف الآلي] في القرن العشرين فقلّصت عدد أشكال الحروف تقليصًا كبيرًا.[@nemeth2017]

وقد عادت الكشيدة في :index[الصحف اليومية] بعد انتشار :index[الصف الرقمي]، لأنها تسمح بضبط :index[الأعمدة الضيقة] دون أن تتسع المسافات اتساعًا ظاهرًا. غير أن بعض المصممين يرون أن الإكثار منها يجعل الصفحة مضطربة، وأن العين تتعثر بالكلمات الممدودة كما تتعثر بالفجوات الواسعة.[@attar2021, ٥٢]

## منهج التجربة

شارك في التجربة ستون طالبًا وطالبة من :index[جامعة المثال]، تتراوح أعمارهم بين ١٩ و٢٦ سنة، وكلهم يقرأ العربية لغةً أولى. وقرأ كل منهم تسعة نصوص قصيرة من المقالات الصحفية، طول كل منها نحو ٣٠٠ كلمة، على صفحات مطبوعة بخط :index[أميري]{term="أميري، خط"} بحجم ١٣ نقطة.[^font]

[^font]: اختير خط أميري لأنه يرسم الكشيدة منحنية، كما في الطباعة البولاقية، فيكون الفرق بين الطرق الثلاث أوضح مما هو في الخطوط التي ترسمها خطًا مستقيمًا.

وضُبطت النصوص بثلاث طرق: بالمسافات وحدها، وبالكشيدة وحدها مع مسافات ثابتة، وبمزيج يوسّع :index[المسافات بين الكلمات] بمقدار الربع أولًا ثم يمدّ الحروف. وقيس زمن القراءة بالثواني، ثم أجاب القارئ عن خمسة أسئلة في الفهم، وأخيرًا رتّب الطرق الثلاث بحسب تفضيله.:index{term="تفضيل القرّاء"}

## النتائج والمناقشة

لم تختلف :index[سرعة القراءة] اختلافًا ذا دلالة بين الطرق الثلاث: كان المتوسط ٢١٤ كلمة في الدقيقة للمسافات، و٢٠٩ للكشيدة، و٢١٧ للطريقة المختلطة. أما :index[أخطاء الفهم]{term="الفهم، أخطاء"} فكانت أعلى قليلًا في الكشيدة وحدها، ولا سيما في السطور التي مُدّت فيها ثلاث كلمات أو أكثر.

وفضّل ٣٨ مشاركًا الطريقة المختلطة، و١٤ المسافات وحدها، و٨ الكشيدة وحدها. وهذا يتفق مع ما يذهب إليه الطابعون من أن الكشيدة تحسن قليلًا ولا تحسن كثيرًا،[@hashimi2019, ٨١] ومع ما تقترحه الإرشادات الحديثة من توزيع الفراغ على المسافات والمدّ معًا.[@alreq]

ولهذه النتائج حدود واضحة: فالنصوص قصيرة، والقرّاء من فئة عمرية واحدة، والخط واحد. ويحتاج الأمر إلى تجارب على :index[خطوط أخرى]{term="الخطوط الطباعية"}، وعلى :index[القراءة على الشاشة]، حيث يتغير عرض السطر بتغير الجهاز.

## المراجع {style="unnumbered"}

:::bibliography{title=""}

:::paragraphs{style="colophon" dir=ltr}
A specimen article written in Arabic for the Postext Cookbook. The journal, its author, her experiment and the Arabic works by al-Hashimi and al-Attar are invented; the books by Ayalon and Nemeth and the W3C document are real.
:::

# فهرس الأعلام والموضوعات {style="index"}

:::index

:::references{format=csl-yaml}
- id: nemeth2017
  type: book
  language: en
  author: [{family: Nemeth, given: Titus}]
  title: "Arabic type-making in the machine age: the influence of technology on the form of Arabic type, 1908–1993"
  publisher: Brill
  publisher-place: Leiden
  issued: 2017
- id: ayalon2016
  type: book
  language: en
  author: [{family: Ayalon, given: Ami}]
  title: "The Arabic print revolution: cultural production and mass readership"
  publisher: Cambridge University Press
  publisher-place: Cambridge
  issued: 2016
- id: alreq
  type: webpage
  language: en
  author: [{literal: W3C}]
  title: "Arabic & Persian layout requirements"
  URL: https://www.w3.org/TR/alreq/
- id: hashimi2019
  type: book
  language: ar
  author: [{literal: منى الهاشمي}]
  title: "الحرف العربي على الشاشة: دراسة في المقروئية"
  publisher: دار المثال
  publisher-place: بيروت
  issued: {literal: "٢٠١٩"}
- id: attar2021
  type: article-journal
  language: ar
  author: [{literal: كريم العطار}]
  title: "التطويل في الصحف اليومية العربية"
  container-title: مجلة دراسات الكتاب والنشر
  volume: "٩"
  issue: "٢"
  page: "٤٥-٦٨"
  issued: {literal: "٢٠٢١"}
:::
`; // content.<lang>.md: the same Arabic article in both

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = { // every face the pages use, loaded before the build (gotcha: fonts-first)
  Amiri: ['400', '700'], // TEXT: the article, notes, references, index; bold emphasis
  'Noto Kufi Arabic': ['400', '700'], // LABEL: masthead, section heads, running heads
};

// ─── 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);
const doc = await buildWithFonts(() => buildDocument({ markdown }, config()), markdown);
showBook(doc, { title: t({ en: 'An Arabic research article',
  es: 'Un artículo académico árabe' }) });
offerPdf(() => renderToPdf(doc, { fontProvider: arabicPdfProvider }), `${RECIPE}.pdf`);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ─── Kit · pdf v1 ── the same in every recipe that exports a PDF ──────────────
/** postext-pdf embeds TrueType bytes. Fetch the Fontsource file the screen
 *  used, snapping to a weight the family ships and falling back to upright
 *  when it has no italic: the PDF asks for every face a block could use. */
async function fontsourceProvider(family, weight, style) {
  const id = fontsourceId(family);
  const meta = await fontsourceMeta(family);
  const weights = meta?.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && meta && !meta.styles.includes('italic') ? 'normal' : style;
  const res = await fetch(`https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-latin-${w}-${s}.woff2`);
  if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} (${res.status})`);
  return decompressWoff2(new Uint8Array(await res.arrayBuffer()));
}

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

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

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

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

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

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

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

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

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

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

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

## تنويعات

### رقّم الحواشي على امتداد البحث

كثيرًا ما ترقّم المجلات العربية الحديثة الحواشي لكل بحث لا لكل صفحة.

```diff
-  numbering: 'page', // from (١) again on every page, as Arabic journals number them
+  numbering: 'chapter',
```

### وثّق بالمؤلف والتاريخ

```diff
-  style: 'chicago-notes-bibliography', notes: 'footnote', locale: 'ar',
+  style: 'apa', locale: 'ar',
```

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

- **اوسم الكتاب العربي بـ 'ar'، لا بـ LANG.** نسختا الوصفة هما en وes، لكن المثال العربي عربي في كلتيهما: `locale: LANG` سيجعله من اليسار إلى اليمين، ويجلّده على اليسار، ويرقّم صفحاته 1 2 3، ويسمّي أشكاله Figure أو Figura. اكتب الوسم بنفسك: '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.
- **أي كائن headings يُلغي فاصل الصفحة قبل H1.** ينتقل H1 افتراضيًا إلى صفحة فردية (always-odd)، لكن تمرير أي كائن headings يعيد ضبط هذا الافتراض، فتتوالى الفصول دون فاصل ولا يفعل span: 'page' شيئًا. أعد كتابة headings.levels[0].breakBefore: { enabled: true, parity } في كل إعداد.
- **يرث نمط العنوان فاصل الصفحة من مستواه.** يأخذ مُدخل headingStyles كل حقل يتركه من مستوى عنوانه، بما فيه breakBefore. فصفحة المحتويات أو صفحة بيانات النشر المنسّقة على H1 بعد :::pagebreak ترث الزوجية 'odd' وتقع بعد صفحة فارغة. أعطِ هذا النمط breakBefore: { enabled: false }.
- **حمّل كل أوجه الخط قبل الإخراج.** يقيس الإخراج النص بأوجه الخط التي حمّلها المتصفح ويخزّن العروض مؤقتًا، فالوجه الذي يصل بعد البناء الأول يترك فواصل أسطر خاطئة وملف PDF لم يعد يطابق الشاشة. حمّل كل وزن وكل نمط أولًا، واستدعِ clearMeasurementCache() قبل إعادة البناء إذا تأخر وصول أحدها.

- علامات الترقيم التي يكتبها نمط CSL هي علامات النمط: الفواصل والفواصل المنقوطة وعلامات التنصيص بين أجزاء الحاشية لاتينية، كما في الهاشمي, الحرف العربي. أما التواريخ والأعداد فتأتي من البيانات، فتحمل المؤلفات العربية `issued: {literal: "٢٠١٩"}` ومواضع مثل `[@hashimi2019, ٧٧]`؛ وتحتفظ المؤلفات اللاتينية بالأرقام 0–9.
- الحاشية أو المرجع الخاص بعمل لاتيني يجري في اتجاه الصفحة العربية: تقع نقطته الأخيرة عند الطرف الأيسر من السطر.

## الحقوق

- الوصفة: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- النص: A research article written in Arabic for the recipe; its journal, author, experiment and Arabic sources are invented: Postext Cookbook, أصلي
- الخطوط: Amiri (OFL-1.1), Noto Kufi Arabic (OFL-1.1)
- الشيفرة: MIT · محتوى المثال: CC-BY-4.0

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

- [رقم 089 · مقالة تاريخية بحواشي شيكاغو](https://postext.dev/ar/cookbook/history-essay-chicago-notes.md): مقالة تاريخية من أربع صفحات تصير فيها استشهادات [@key, 87] حواشيَ شيكاغو أسفل الصفحة: كاملة في المرة الأولى ومختصرة بعدها، مع قائمة مراجع. · المستوى 2 (متوسط) · الأوراق البحثية والأكاديمية
- [رقم 072 · فهرس أبجدي لكتاب مدرسي يتبع النص](https://postext.dev/ar/cookbook/back-of-book-index.md): مصطلحات تُعلَّم حيث يشرحها النص، ويطبعها :::index في عمودين مع الصفحات التي يجدها لها buildBundle، والنطاقات والإحالات المتبادلة. · المستوى 3 (متقدم) · الكتب المدرسية
- [رقم 109 · طبعة مغاربية لنص عربي بالأرقام الأوروبية](https://postext.dev/ar/cookbook/maghreb-edition-european-digits.md): فصل عربي مطبوع للمغرب: اللغة 'ar-MA' تُبقي النص من اليمين إلى اليسار والتجليد على اليمين، وتكتب كل عدد يولّده المحرّك هكذا: 1، 2، 3. · المستوى 1 (أساسي) · الأدلة والمراجع