مدخل إلى Postext

منضّد للويب قابل للبرمجة.

افتح أي كتاب أُحسن تنضيده، وتأمّل كيف يستقر النص على الصفحة: أعمدة متوازنة تمامًا، وصور تندسّ في مجرى النص، ولا فراغات نافرة، ولا أسطر وحيدة عالقة في رأس عمود. وراء هذا الإحساس بالسهولة قرون من الصنعة.

ثم افتح صفحة ويب. حتى أفضل الصفحات تترك انطباعًا آخر: النص يرتطم بالصور، والأعمدة تفيض أو تبقى نصف فارغة، والحواشي تنزل إلى أسفل الصفحة بدل أن تبقى قرب الكلمات التي تحيل إليها. أعطانا الويب التخطيط المتجاوب (responsive)، لكنه لم يعطنا قط الإخراج التحريري.

يسدّ Postext هذه الهوّة. إنه محرّك إخراج يأخذ محتواك، أي نصًا مكتوبًا بـ Markdown مع موارد مصرَّح بها (صور نقطية ومخططات SVG وجداول) تُدرج بالإحالة إليها، ويطبّق عليه القواعد نفسها التي يطبّقها منضّد محترف: منع الأسطر اليتيمة (orphans) والأسطر الأرامل (widows)، وموازنة الأعمدة، وتدفّق النص حول العوائق، وتباعدًا مدروسًا. والناتج هندسة صفحات بجودة النشر، لـ HTML وPDF معًا.

يعتمد Postext على @chenglou/pretext لقياس النص بمعزل عن DOM، بسرعة تجعل كل ذلك ممكنًا.

#الهوّة بين الطباعة والويب

اتّبع المنضّدون طوال قرون قواعد تجعل النص مريحًا للقراءة. هذه القواعد ليست ذوقًا جماليًا؛ إنها مبادئ دُفع ثمنها غاليًا، وصُقلت عبر أجيال من الكتب والصحف والمجلات المطبوعة:

• لا أسطر يتيمة (سطر واحد من فقرة يبقى معزولًا في رأس عمود).
• لا أسطر أرامل (سطر واحد من فقرة يتخلّف وحده في أسفل العمود).
• أعمدة متوازنة (ارتفاع متقارب لكل الأعمدة في الصفحتين المتقابلتين).
• نص يتدفّق حول الأشكال والاقتباسات البارزة (pull quotes) والصور المُقحمة في المتن.
• حواشٍ سفلية في موضعها الصحيح: أسفل العمود الذي تُذكر فيه.
• حواشٍ جانبية تقف بمحاذاة الفقرة التي تحيل إليها.
• تباعد ثابت ومقصود حول العناوين والاقتباسات الكتلية والأشكال.
• تقسيم للكلمات بالواصلة يتجنّب «الأنهار» البيضاء (rivers) والتعرّج المفرط في نهايات الأسطر.

وإلى جانب هذه القواعد، يكشف بُعدان ملموسان قابلان للقياس مدى ابتعاد الويب عن الطباعة:

• طول السطر (measure). يحدّد Bringhurst النطاق المريح بين 45 و75 حرفًا في السطر حين يكون العمود واحدًا (وبين 40 و50 في الأعمدة المتعددة)، ويضع إرشاد إتاحة الوصول WCAG 1.4.8 حدًا أقصى قدره 80. أما معظم المواقع فتترك الأسطر تمتد إلى 100 حرف أو 120 أو أكثر، أي إلى ما بعد الحد الذي تستطيع عنده العين أن تتبع السطر دون أن تضلّ موضعها.
• تباعد الأسطر (leading). يوصي العرف الطباعي بأن يكون بين 1.3 و1.5 ضعف حجم الخط، ويشترط WCAG 1.4.12 أن يبقى المحتوى صالحًا للاستعمال عند 1.5× أو أكثر. لكن القيمة الصحيحة تتوقف على طول السطر: تباعد يريح القراءة عند 50 حرفًا يبدو ضيقًا عند 90. يضبط المنضّدون أحدهما على الآخر، ولا تقدّم CSS طريقة تلقائية لذلك.

وهنا تنفد قدرات CSS: تحصل على column-count وقليل غيره. لا تحكّم في مواضع الموارد، ولا إدراك لما يفيض عن مساحته، ولا منع للأسطر اليتيمة والأرامل عبر الأعمدة، ولا وسيلة أصيلة لتدفيق النص حول عائق بأي شكل كان. ما زال الإخراج التحريري متعدد الأعمدة على الويب يُصنع يدويًا: تصاميم ثابتة تنكسر لحظة يتغيّر حجم الشاشة.

يعرف الويب التخطيط المتجاوب منذ أكثر من عقد: flexbox وgrid وحاويات تتكيّف مع أي شاشة. أما ما لم يعرفه قط فهو الإخراج التحريري المتجاوب، الذي يعيد فيه المحتوى توزيع نفسه بذكاء عبر الأعمدة وحول الصور ومرورًا بالحواشي، ملتزمًا القواعد التي تجعل النص مريحًا للقراءة.

#عقد من البحث عن القطعة الناقصة

بدأ مشروع Content First عام 2014 محاولةً مبكرة لنقل جودة الإخراج التحريري إلى الويب. تخطيطات قائمة على الأعمدة، وتجارب على تدفّق النص، ونماذج أولية متعاقبة، وفي كل مرة الجدار نفسه: لا يمكنك أن تتخذ قرارات إخراج جيدة دون أن تعرف بدقة كم من المساحة سيشغل النص.

يبدو هذا بسيطًا، لكنه المشكلة كلها. في كل مرة تسأل فيها المتصفح «ما ارتفاع هذه الفقرة عند هذا العرض؟» تطلق إعادة حساب كاملة لتخطيط الصفحة (reflow). كرّر ذلك بضع مئات من المرات في مستند معقّد متعدد الأعمدة فتتجمّد الصفحة. لم يُصمَّم المتصفح قط لهذا النوع من القياس التجريبي: أن تجرّب عشرة عروض مختلفة للأعمدة لتجد أفضلها، وأن تختبر أين تقسم فقرة، وأن تتحقق هل تتسع صورة في هذا الموضع أم يجب نقلها إلى العمود التالي.

ما كان ينقص هو وسيلة لقياس النص بسرعة تكفي للتجريب بحرية، دون شلّ الخيط الرئيسي (main thread). وطوال عقد لم تكن هذه الأداة موجودة.

#القطعة الناقصة

في عام 2025 أصدر Cheng Lou مكتبة Pretext، وهي مكتبة لقياس النص بمعزل عن DOM، أسرع من reflow المتصفح بما بين 300 و600 مرة، ودقيقة حتى البكسل في Chrome وSafari وFirefox. تعتمد على مقاييس الخطوط في canvas وعلى الحساب المحض لتحديد ارتفاع النص ومواضع كسر الأسطر، دون أن تلمس DOM أبدًا.

مع Pretext يزول عنق الزجاجة الذي عطّل هذا العمل عشر سنوات. صار بالإمكان قياس آلاف الكتل النصية في أجزاء من الألف من الثانية، وتجربة عشرة ترتيبات مختلفة للأعمدة والاحتفاظ بأفضلها، وتشغيل خوارزمية الإخراج كاملة عند كل تغيير لحجم النافذة دون حجب الخيط الرئيسي.

وPostext هو ما يأتي بعد ذلك.

#Pretext + Postext

التسمية مقصودة: نصفان لعملية واحدة. والفصل بينهما مهم لأنهما مسؤوليتان متمايزتان، إحداهما تقيس والأخرى تقرّر، وعزل القياس يتيح لأي مُخرِج (backend) أن يستعمله دون أن ترتبط بالقواعد التحريرية.

Pretext هو ما يحدث قبل وضع النص: قياس المساحة التي سيحتاجها. بمعزل عن DOM، وقائم على canvas، ويعمل بأرقام محضة.

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

import { prepare, layout } from '@chenglou/pretext';
import { buildDocument, renderToCanvas, renderToHtml } from 'postext';
import { renderToPdf } from 'postext-pdf';
 
// pretext: measure (the "pre" work)
const prepared = prepare(paragraphText, '16px/1.5 Inter');
const { height } = layout(prepared, columnWidth, 24);
// => "This paragraph is 144px tall at this column width."
 
// postext: decide (the "post" work)
const vdt = buildDocument(content, config);
// => A complete Virtual Document Tree with every paragraph,
//     heading, and resource placed at exact coordinates.
 
// One VDT, three output modes:
const canvases = renderToCanvas(vdt);                       // pixel-accurate bitmap per page
const html = renderToHtml(vdt);                             // selectable DOM for the web
const pdfBytes = await renderToPdf(vdt, { fontProvider });  // print-ready PDF

يعطيك Pretext القياسات، ويعطيك Postext الإخراج.

أنشأ Cheng Lou مكتبة Pretext، ويقوم Postext عليها.

#كيف يعمل

تمرّ العملية بثلاث مراحل:

1. تقدّم أنت المحتوى. نص بصيغة Markdown مع موارد مصرَّح بها: صور نقطية، ومخططات SVG، وجداول. الإحالة السطرية :ref{id="..."} ترقّم المورد وتجعله يطفو في الوقت نفسه إلى شريط في أعلى الصفحة أو أسفلها قرب أول إحالة إليه، كما يضع المنضّد في المطبعة الأشكال. يبقى المحتوى دلاليًا خالصًا: يصف ماذا يُعرض لا كيف، ولا تُكتب قرارات الإخراج في المصدر أبدًا. يشرح قسم «الموارد» في صفحة صيغة المستند الصيغة كاملة.

2. يتخذ المحرّك القرارات. يحلّل Postext المحتوى، ويستدعي Pretext لقياس النص بدقة البكسل دون لمس DOM، ثم يشغّل سلسلة إخراج متعددة المراحل (multi-pass): يوازن الأعمدة، ويرقّم الموارد ويعوّمها، ويمنع الأسطر الأرامل واليتيمة، ويحاذي خطوط الأساس، ويحسّن التباعد. كل قرار تحكمه الإعدادات: أبعاد الصفحة وتخطيطها، ونص المتن والعناوين، ومعها tableStyle لتنضيد خلايا الجداول، وcaptionStyle لتعليقات الأشكال، وdiagramStyle مع singleInk الذي يعيد تلوين مخططات SVG بدرجات من حبر واحد تُشتق من نصوع (luminance) كل لون، للطباعة بلون خاص واحد (spot color). أنت تضع القواعد، والمحرّك يطبّقها.

3. تحصل على إخراج كامل. إحداثيات وأبعاد دقيقة لكل عنصر في كل صفحة. تنقل المُخرِجات (renderers) هذه الهندسة إلى الصيغة المطلوبة: اللوحة (Canvas) لمعاينة نقطية دقيقة حتى البكسل (renderToCanvas، renderPage)، وHTML لتنضيد قابل للتحديد يتكيّف مع تغيّر الحجم على الويب (renderToHtml، renderToHtmlIndexed)، وPDF لمخرجات جاهزة للطباعة بخطوط مضمّنة (renderToPdf، من الحزمة postext-pdf). المحتوى نفسه، والقواعد نفسها، وثلاثة مخرجات يحلّ أحدها محل الآخر.

لنظرة مفصّلة في داخل المحرّك، أي شجرة المستند الافتراضية (Virtual Document Tree) وسلسلة المراحل المتعددة وحلقة التقارب، اقرأ صفحة البنية. ولمرجع كامل لكل خيار من خيارات الإعدادات، من هندسة الصفحة إلى أنماط الجداول والتعليقات والمخططات، انظر صفحة الإعدادات. ولتجربة كل ذلك مباشرة افتح Sandbox، بيئة التجربة في المتصفح: فيه محرّر لنص الفصول، ولوحة «الموارد» فيها محرّر جداول ورفع للصور وملفات SVG، ولوحة «التصميم» التي تعرض كل إعداد بلغة أهل النشر، ومعاينات حيّة بصيغ Canvas وHTML وPDF.

#شكر وتقدير

Pretext من Cheng Lou: مكتبة قياس النص التي يقوم عليها Postext وتجعله ممكنًا. فلولا القياس الدقيق حتى البكسل بمعزل عن DOM، وبسرعة تقل عن جزء من الألف من الثانية، لما كان شيء من هذا قابلًا للتطبيق.

Content First (نحو 2014): أول استكشاف للإخراج التحريري عالي الجودة على الويب. عقد من الاصطدام بالجدران، ومن تعلّم ما لا ينجح، ومن ترسّخ القناعة بأن هذه المشكلة تستحق حلًا حقيقيًا.

يقف Postext على قرون من التقاليد الطباعية. لم يخترع Postext القواعد التي يطبّقها؛ ورثها عن عمل المنضّدين وخبراء الطباعة والمصممين الذين صقلوا فنّ جعل النص مقروءًا قبل ظهور الشاشات بزمن طويل. من الحروف المتحركة التي ابتكرها Gutenberg، إلى الطباعة غير المتناظرة عند Tschichold، إلى كتاب Bringhurst Elements of Typographic Style (عناصر الأسلوب الطباعي)، ظلّت صنعة ترتيب النص على الصفحة تتطور أكثر من خمسمئة عام. ويحمل Postext هذه الحكمة المتراكمة إلى الويب، حيث ظلّ غيابها لافتًا.