# مسافات متساوية بين الكلمات في أعمدة ضيقة مضبوطة
> تقسيم الأسطر وفق Knuth–Plass مع حصر المسافات بين 0.8 و1.6 من المسافة العادية، بجوار نسخة جشعة تُعلَّم أسطرها المتخلخلة والمعزولة وكلماتها المعزولة من الـVDT.
- نسخة HTML: https://postext.dev/ar/cookbook/justification-lab
- وصفة رقم 014 · الحروف والنص · المستوى 3 (متقدم) · المخرجات: Canvas
- الأنواع: المجلات والمجلات المستقلة
- تتطلب postext ≥ 1.4.1 · اختُبرت مع 1.4.1 بتاريخ 2026-09-26
- الصفحات: [1](https://postext.dev/cookbook/justification-lab/en/p01.webp?v=4e2eaa90), [2](https://postext.dev/cookbook/justification-lab/en/p02.webp?v=4e2eaa90), [3](https://postext.dev/cookbook/justification-lab/en/p03.webp?v=4e2eaa90)
- افتح في Sandbox: https://postext.dev/ar/sandbox#recipe=justification-lab&lang=en (.postext: https://postext.dev/cookbook/justification-lab/en/justification-lab.postext)
- آخر تحديث: 2026-09-26
- لغات أخرى: [en](https://postext.dev/en/cookbook/justification-lab.md), [es](https://postext.dev/es/cookbook/justification-lab.md), [ca](https://postext.dev/ca/cookbook/justification-lab.md), [zh](https://postext.dev/zh/cookbook/justification-lab.md)
## باختصار
مجلة صغيرة عن الحروف، منضّدة في أعمدة ضيقة بحافتي نص مستويتين. تبيّن كيف تبقى الفجوات بين الكلمات متساوية، بجوار نسخة عُلّمت أسطرها غير المتساوية بالأصفر.
## ما الذي ستنضده
العدد 12 من *Galley*، مجلة مختبر حروف، منضّدًا على قياس A5 في عمودين من نحو أربعين حرفًا، حيث لا يملك السطر المضبوط إلا خمس مسافات أو ستًّا بين الكلمات لتمتص الفائض. ترسم صفحة الافتتاح نموذج Knuth–Plass على شريط رمادي غرافيتي: سطر من مربعات الكلمات تتمدد نوابضه الصفراء من «الغراء» لتملأ عرض السطر. وتشرح المقالة لماذا ترتخي الأعمدة الضيقة، وتطبع الإعدادات التي وراء كل قاعدة بخط أحادي المسافة بين فقراتها. وفي أسفل الصفحة 3 ينضّد اختبار مقارنة فقرة واحدة بحافة حرّة، ومضبوطة بلا واصلات، ومضبوطة بها. وينضّد المثال العدد أيضًا بالتقسيم بأول ملاءمة مع إيقاف حماية الأسطر الأرامل واليتيمة، ويعرض الصفحتين الثانيتين متجاورتين فوق الصفحات، كما في بطاقة هذه الوصفة، والأسطر المتخلخلة مغسولة بأصفر قلم التظليل، والأسطر المعزولة والكلمات المعزولة موسومة في الهامش.
**تجيب هذه الوصفة عن:**
- كيف أحصل على ضبط متساوٍ للأسطر في أعمدة ضيقة، مع تقسيم الكلمات الصحيح لكل لغة؟
- كيف أتجنب الأسطر الأرامل والأسطر اليتيمة والأسطر الأخيرة ذات الكلمة الواحدة، وأبقي العنوان مع نصه؟
- لماذا يُنضَّد سطر واحد غير مضبوط أو متمددًا أكثر من اللازم (عناوين URL، كلمات مركّبة طويلة، كلمات طويلة في الخلايا)؟
- كيف أعرف ما الخطأ في مستندي (تحذيرات، فيض، إخراج لا يستقر)؟
## الجواب المختصر
```js
// script.js, سطرًا 39–57
// Knuth–Plass breaking, hyphenation and the widow, orphan and runt penalties are all on by
// default. A narrow column also needs a tighter fence round the glue, in multiples of a
// normal word space (defaults 0.6 and 2): lines past the upper fence cost more than any
// hyphen, so the breaker hyphenates or re-breaks the paragraph before it stretches that far.
const FENCES = { minWordSpacing: 0.8, maxWordSpacing: 1.6 };
const bodyText = { // config().bodyText
fontFamily: TEXT, fontSize: pt(BODY), lineHeight: pt(LEAD), color: col('ink'),
boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
firstLineIndent: mm(4), indentAfterHeading: false, // justified and hyphenated by default
...FENCES,
};
// Hyphenation follows the document's locale, by exact code (gotcha: hyphenation-locales):
const locale = t({ en: 'en-us', es: 'es' }); // config().locale; 'es-ES' would be English
// The control: first-fit breaking, which sets each line once and moves on, with the widow and
// orphan guards off (runts are priced inside Knuth–Plass only). Same text, fonts and measure;
// a fresh object on every call, like config() itself, because the engine caches resolved
// configs by identity (gotcha: config-cache-identity).
const GREEDY = { optimalLineBreaking: false, avoidWidows: false, avoidOrphans: false };
const control = () => ({ ...config(), bodyText: { ...bodyText, ...GREEDY } });
```
## المكونات
**تعلّم**
- [التقسيم الأمثل للأسطر (Knuth–Plass)](https://postext.dev/ar/docs/justification.md#knuth-plass-النظر-إلى-الفقرة-كاملة): يقسّم كل فقرة إلى أسطر بوصفها كلًّا واحدًا لتتساوى المسافات بين الكلمات، ضمن حدود تباعد الكلمات، بدل ملء الأسطر سطرًا سطرًا.
- [الأسطر الأرامل والأسطر اليتيمة والكلمات المعزولة](https://postext.dev/ar/docs/configuration.md#الأسطر-اليتيمة-والأرامل-والكلمات-المعزولة-وقواعد-الإبقاء-معًا): تُبعد الأسطر المنفردة عن رؤوس الأعمدة وأسافلها، والأسطر الأخيرة ذات الكلمة الواحدة عن الفقرات؛ وتُبقي العنوان مع نصه، والفقرة المنتهية بنقطتين رأسيتين مع القائمة التي تمهّد لها.
- [التحذيرات والتشخيص](https://postext.dev/ar/docs/configuration.md#التصحيح): تحذيرات الإخراج ومشكلات التحليل والتقارب، وأداتا «إبراز الأسطر المرتخية» و«سالب الصفحة»، ولوحة «الفحوص» في Sandbox.
**تستخدم أيضًا**
- [تقسيم الكلمات ولغة المستند](https://postext.dev/ar/docs/justification.md#اللغات-المدعومة)
- [المسافات البادئة والمحاذاة والتباعد بين الفقرات](https://postext.dev/ar/docs/configuration.md#نص-المتن)
- [أعمدة داخل الإطار](https://postext.dev/ar/docs/document-format.md#columns)
- [إطارات متداخلة](https://postext.dev/ar/docs/configuration.md#الحاوية-callout)
- [إطارات التنبيه](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/document-format.md#سمات-العناوين)
- [أنماط الفقرات](https://postext.dev/ar/docs/configuration.md#أنماط-الفقرات)
- [صفحات على اللوحة (Canvas)](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#عناصر-النص)
- [شريط فصل بعرض الصفحة](https://postext.dev/ar/docs/configuration.md#الامتداد-والتصميم-المتقدم)
**الإعدادات في لمحة**
- [`bodyText`](https://postext.dev/ar/docs/configuration.md#نص-المتن), [`calloutStyles`](https://postext.dev/ar/docs/configuration.md#أنماط-الإطارات), [`colorPalette`](https://postext.dev/ar/docs/configuration.md#لوحة-الألوان), [`footer`](https://postext.dev/ar/docs/configuration.md#رؤوس-الصفحات-وتذييلاتها), [`header`](https://postext.dev/ar/docs/configuration.md#رؤوس-الصفحات-وتذييلاتها), [`headings`](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**
- [`buildDocument`](https://postext.dev/ar/docs/configuration.md#بناء-مستند), [`clearMeasurementCache`](https://postext.dev/ar/docs/configuration.md#ذاكرة-القياس-المؤقتة), [`parseMarkdownWithIssues`](https://postext.dev/ar/docs/configuration.md#التحليل), [`registerResourceImage`](https://postext.dev/ar/docs/architecture.md#واجهة-البرمجة-المتاحة-api), [`renderPageToCanvas`](https://postext.dev/ar/docs/configuration.md#رسم-صفحة-في-صورة-نقطية)
**الخطوط**
- Petrona (OFL-1.1), Bricolage Grotesque (OFL-1.1), Source Code Pro (OFL-1.1)
## طريقة التحضير
### 1 · ضيّق الحدود، وأبقِ الحماية
شيفرة هذه الخطوة هي [الجواب المختصر](#الجواب-المختصر) أعلاه. [Knuth–Plass](/ar/docs/justification#knuth-plass-النظر-إلى-الفقرة-كاملة)، وتقسيم الكلمات بالواصلة، وجزاءات الأرملة واليتيمة والكلمة المعزولة، وإبقاء العناوين مع ما يليها، كلها مفعّلة افتراضيًا، فلا تفعل الطبعة المنشورة سوى تضييق [حدود المسافات بين الكلمات](/ar/docs/justification#حدود-التباعد-بين-الكلمات) إلى 0.8 و1.6 من المسافة العادية (القيمتان الافتراضيتان 0.6 و2). السطر الذي يتجاوز الحد الأعلى يكلّف أكثر من أي واصلة أو كلمة معزولة، فيجرّب المقسِّم مواضع كسر أخرى أولًا؛ احذف الحدين فتنضّد هذه المقالة سطرين يتجاوزان 1.6. ويتبع تقسيم الكلمات `locale` بالرمز الدقيق: `'es'` و`'fr'` و`'de'` تأخذ أنماط TeX الخاصة بها، أما `'es-ES'` فيُقسَّم كالإنجليزية الأمريكية بلا أي تحذير.
### 2 · علّم الأسطر المتخلخلة من شجرة الإخراج
```js
// script.js, سطرًا 303–345
// debug.looseLineHighlight is Sandbox-only (gotcha: sandbox-only-warnings), so the pen reads the
// VDT: justified lines carry justifiedSpaceRatio; a paragraph cut by a column is two blocks.
function marks(doc, page) {
const body = doc.pages.flatMap((p) => p.columns.flatMap((c) => c.blocks)).filter((b) =>
b.type === 'paragraph' && b.containerId === undefined && b.textAlign === 'justify');
const out = [];
for (const column of page.columns) {
for (const b of column.blocks.filter((x) => body.includes(x))) {
const parts = body.filter((o) => o.contentIndex === b.contentIndex);
b.lines.forEach((line) => {
const at = { x: b.bbox.x, y: line.bbox.y, w: b.bbox.width, h: line.bbox.height, column };
if (line.justifiedSpaceRatio > FENCES.maxWordSpacing || line.ragged) {
out.push({ ...at, kind: 'loose' }); // ragged: past 3×, so the engine set it ragged
}
if (b.lines.length === 1 && parts.length > 1) { // Postext's names (see the essay):
out.push({ ...at, kind: b === parts[0] ? 'widow' : 'orphan' }); // foot : head
} else if (line.isLastLine && !/\s/.test(line.text.trim())) {
out.push({ ...at, kind: 'runt' }); // one word alone on a paragraph's last line
}
});
}
}
return out;
}
const TAGS = t({ en: { widow: 'widow', orphan: 'orphan', runt: 'runt' },
es: { widow: 'viuda', orphan: 'huérfana', runt: 'corta' } });
function paintMarks(canvas, list, scale) {
const ctx = canvas.getContext('2d');
ctx.setTransform(scale, 0, 0, scale, 0, 0); // page px from here on
for (const m of list) { // loose lines: a wash; lone lines and runts: a tag in the margin
const loose = m.kind === 'loose';
ctx.globalCompositeOperation = loose ? 'multiply' : 'source-over'; // the ink shows through
ctx.fillStyle = loose ? palette.marker : palette.graphite;
if (loose) { ctx.fillRect(m.x - 2, m.y + 1, m.w + 4, m.h - 1); continue; }
ctx.font = `600 ${m.h * 0.48}px "${MONO}"`;
const w = ctx.measureText(TAGS[m.kind]).width + m.h * 0.5;
const x = m.column.index === 0 ? m.x - w - m.h * 0.35 : m.x + m.w + m.h * 0.35;
ctx.fillRect(x, m.y + m.h * 0.12, w, m.h * 0.8);
ctx.fillStyle = palette.marker;
ctx.fillText(TAGS[m.kind], x + m.h * 0.25, m.y + m.h * 0.7);
}
ctx.setTransform(1, 0, 0, 1, 0, 0);
}
```
لا يحترم `debug.looseLineHighlight` إلا Sandbox، ولا يسرد `doc.warnings` أي سطر متخلخل، لذا يقرأ `marks()` [الـVDT](/ar/docs/justification#كشف-الأسطر-المتخلخلة) بنفسه. كل سطر مضبوط يحمل `justifiedSpaceRatio`، والفقرة المنقسمة بين عمودين تعود كتلةً لكل جزء، والسطر الذي يتجاوز 3 أضعاف لا نسبة له، لأن المحرّك [ينضّده بحافة حرّة](/ar/docs/justification#أسطر-يعجز-مقسِّم-الأسطر-عن-ملئها) ويوسمه بـ`line.ragged` بدلًا من ذلك. عند أربعين حرفًا لا تكفي الحدود وحدها لإبقاء كل سطر تحت 1.6؛ وفي أثناء ضبط نص المقالة على الصفحات، أظهرت العلامات أي الجمل ينبغي إعادة صياغتها.
### 3 · ضع النسخة الضابطة بجوار الصفحة المنشورة
```js
// script.js, سطرًا 349–383
function compare(pairs) {
document.head.insertAdjacentHTML('beforeend', ``);
const section = Object.assign(document.createElement('section'), { id: 'compare' });
section.innerHTML = `${t({ en: 'Same text · same design · page 2',
es: 'El mismo texto · el mismo diseño · página 2' })}
${t({
en: 'Two line breakers', es: 'Dos formas de cortar' })}
`;
for (const [name, doc] of pairs) {
const page = doc.pages[1];
const list = marks(doc, page); // one walk per edition: the counts and the paint share it
const n = (...kinds) => list.filter((m) => kinds.includes(m.kind)).length;
const counts = `${t({ en: 'loose', es: 'flojas' })} ${n('loose')} · `
+ `${t({ en: 'lone', es: 'solas' })} ${n('widow', 'orphan')} · `
+ `${t({ en: 'runts', es: 'cortas' })} ${n('runt')}`;
const figure = document.createElement('figure');
figure.innerHTML = `${name}${counts}`;
const canvas = figure.appendChild(document.createElement('canvas'));
canvas.setAttribute('role', 'img');
canvas.setAttribute('aria-label', `${name}, ${t({ en: 'page', es: 'página' })} 2: ${counts}`);
renderPageToCanvas(page, doc, canvas, { scale: 1000 / page.width });
paintMarks(canvas, list, 1000 / page.width);
section.querySelector('.pair').append(figure);
}
document.getElementById('pages').before(section); // #pages: the desk showPages() builds
}
```
الطبعتان تتقاسمان تصميمًا واحدًا، فكل فرق بين الصفحتين الثانيتين يأتي من مقسِّم الأسطر وحمايته. بالإنجليزية تترك النسخة الجشعة الضابطة 47 من أسطرها المضبوطة الـ110 فوق 1.6 و30 فوق 2، ثلاثة منها فوق 3 أضعاف ينضّدها المحرّك بحافة حرّة، بينما تُبقي طبعة Knuth–Plass أسطرها الـ105 كلها بين 0.80 و1.60. وفي الصفحة 2 تحمل النسخة الضابطة أيضًا السطر الأخير من فقرة وحده إلى رأس عمود، وهو ما يسمح به `avoidOrphans: false`، وتنهي فقرة أخرى بكلمة معزولة.
### 4 · أعطِ كل إعداد إطارًا خاصًا به
```js
// script.js, سطرًا 109–132
// A box sets all its :::columns in one body style, so each setting is a nested box; breaks="3"
// counts a nested box as one block (gotcha: callout-columns). The bench floats to a page foot.
const [SLIP_GAP, FRAME] = [3, 4]; // mm: between slips; the bench's frame round them
const slip = (id, body) => ({ id, background: col('paper'), marginBottom: mm(SLIP_GAP),
padding: { top: mm(2.2), right: mm(2.6), bottom: mm(2.4), left: mm(2.6) },
titleStyle: { fontFamily: MONO, fontSize: pt(6.6), fontWeight: 600, color: col('muted'),
gap: mm(1.6) }, // code keeps its case: textAlign, not TEXTALIGN
body: { fontSize: pt(8.6), lineHeight: pt(11.6), firstLineIndent: pt(0), ...body } });
const calloutStyles = [
{ id: 'bench', span: 'page', placement: 'bottom', background: col('graphite'),
columnGap: mm(FRAME), // the foot needs a FRAME too: the last slip's marginBottom is dropped
padding: { top: mm(3.4), right: mm(FRAME), bottom: mm(FRAME), left: mm(FRAME) },
titleStyle: { ...caps(7.5, 600), color: col('marker'), gap: mm(2.4) },
body: { fontSize: pt(8.6), lineHeight: pt(11.6), color: col('paper'), textAlign: 'left',
firstLineIndent: pt(0) } },
slip('ragged', { textAlign: 'left' }), // never hyphenated (gotcha: ragged-no-hyphenation)
slip('unhyphenated', { hyphenation: false }), // justified, like the body text
slip('justified', {}), // justified and hyphenated: the body text's own settings
{ id: 'settings', backgroundEnabled: false, marginTop: pt(3), marginBottom: pt(3), // config
stripe: { enabled: true, side: 'left', width: pt(2), color: col('graphite') },
padding: { top: pt(1), right: pt(0), bottom: pt(1), left: mm(3) },
body: { fontFamily: MONO, fontSize: pt(7), lineHeight: pt(9.5), color: col('graphite'),
firstLineIndent: pt(0) } },
];
```
ينضّد الإطار كل أعمدة مجموعة [`:::columns`](/ar/docs/document-format#columns) بنمط متن واحد، لذا كل قصاصة إطار متداخل له `body` خاص به، ويرصّ `breaks="3"` القصاصة ذات الحافة الحرّة والقصاصة غير المقسّمة بالواصلة في العمود الأول. ولا تحتاج القصاصة ذات الحافة الحرّة إلى `hyphenation: false`، لأن النص ذا الحافة الحرّة لا يُقسَّم بالواصلة أبدًا. ويطفو اختبار المقارنة إلى أسفل الصفحة 3 بـ`placement: 'bottom'`، ويكرر حشوه السفلي الإطار البالغ 4 مم لأن `marginBottom` للقصاصة الأخيرة يُسقَط في نهاية الإطار.
### 5 · ارسم النموذج في صفحة الافتتاح
```js
// script.js, سطرًا 61–89
const BAND = 104; // mm from the trim's top edge to the band's foot
const DIAGRAM = { y: 64, w: MEASURE + 8, h: 34 }; // mm: its top on the page, width, height
const LABEL = 7; // pt: the diagram's labels, tracked less than caps() so the legend fits
const text = (id, content, family, size, color, x, y, extra) => ({ kind: 'text', id, content,
fontFamily: family, fontSize: pt(size), color: col(color), align: 'left', overflow: 'wrap',
placement: { anchor: { to: 'page', edge: 'top-left' }, offset: { x: mm(x), y: mm(y) },
size: { width: mm(MEASURE) } }, ...extra });
const opener = () => ({ // a function: the diagram's constants are defined further down
enabled: true,
slot: { elements: [
// The band box reserves the opener's height, and the H1's default marginBottom adds a line
// of white: the body starts on the second grid line under the band. The diagram could not
// reserve it, as images never count (gotcha: opener-image-no-reserve).
{ kind: 'box', id: 'band', style: { backgroundColor: col('graphite') },
placement: { anchor: { to: 'bleed', edge: 'top-left' },
size: { width: 'fill', height: mm(BAND) } } },
text('kicker', '{attr.kicker}', MONO, 7.5, 'marker', INNER, TOP, caps(7.5, 600)),
text('title', '{titleText}', DISPLAY, 29, 'paper', INNER, TOP + 5, // one line in both
{ fontWeight: 800, lineHeight: 1.02 }), // a multiple (gotcha: design-lineheight-multiple)
text('standfirst', '{attr.standfirst}', TEXT, 10.5, 'haze', INNER, TOP + 19,
{ italic: true, lineHeight: 1.3 }),
{ kind: 'image', id: 'diagram', resourceId: 'diagram', placement: { anchor: { to: 'page',
edge: 'top-left' }, offset: { x: mm(INNER), y: mm(DIAGRAM.y) },
size: { width: mm(DIAGRAM.w), height: mm(DIAGRAM.h) } } },
// An SVG image cannot use web fonts (gotcha: svg-no-webfonts): its labels are design text.
...diagramLabels().map(([id, words, x, y]) => text(id, words, MONO, LABEL, 'haze',
INNER + x, DIAGRAM.y + y, { ...caps(LABEL), letterSpacing: pt(0.5) })),
] },
});
```
الرسم البياني [عنصر صورة](/ar/docs/configuration#عناصر-الصورة) في تصميم الـH1. لو كان شكلًا لكان عنصرًا عائمًا `top` بعرض الصفحة، والعنصر العائم `top` المستشهَد به في الصفحة 1 يفتتح الصفحة 2. والشريط إطار، والإطارات تُحتسب في الارتفاع الذي تحجزه صفحة الافتتاح أما الصور فلا، فيبدأ النص تحت الشريط بلا `minHeight`، أدنى بسطر بسبب `marginBottom` الافتراضي للـH1. والتسميات نص تصميم موضوع على إحداثيات الرسم نفسه، لأن ملف SVG المرسوم صورةً لا يستطيع استعمال خطوط الويب في الصفحة.
## الوصفة كاملة
ملف واحد، مركّب من مجلد الوصفة ومعه نص المثال وأدوات دليل الوصفات المشتركة مضمّنة؛ وهو ينشئ صفحته بنفسه. لتشغيله، ضعه داخل `