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

كل ما يقوله الراوي، مع وصف لما يظهر على الشاشة.

1. 0:00

   على الشاشةبطاقة داكنة كُتب عليها «ماينتس · 1455» فوق خط ذهبي رفيع. خلف العنوان «طوال خمسة قرون، تعلّمت الطباعة كيف تنضّد الصفحة.» تتصاعد السنة من 1455 إلى 2026 بأرقام مفرّغة ضخمة، وتحطّ حولها مصطلحات الطباعة: ضبط الأسطر، تقنين الأزواج، الأرامل واليتامى، الأعمدة المتوازنة، تباعد الأسطر، شبكة خطوط الأساس، hy·phen·a·tion (تقسيم الكلمات بالواصلة)، طول السطر، العناصر العائمة، الترويسات، الأنهار. تغوص الكاميرا في النقطة الأخيرة، فتغمر الشاشة باللون الذهبي.

   السردطوال خمسة قرون، تعلّمت الطباعة كيف تنضّد الصفحة.

2. 0:05

   على الشاشةالعنوان: «تعلّم الويب تخطيط الواجهات، ولم يتعلّم قط تنضيد الصفحة.» نافذة متصفح على example.com/longform/article فيها مقال مضبوط على ثلاثة أعمدة عنوانه «لماذا لا يستطيع الويب تنضيد الصفحة»؛ وتشير وسوم حمراء إلى أنهار من البياض، وأرملة، ويتيمة، وصورة تقع فوق النص، وعمود أخير غير متوازن. بجانبها شريحة شيفرة نصها «column-count: 3;» ثم «…ولا شيء يُذكر غير ذلك.» وقائمة مشطوبة بالعيوب الخمسة نفسها. ثم تضطرب النافذة وتنهار.

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

3. 0:18

   على الشاشةبعد وميض أبيض ومرور خطوط زرقاء وذهبية وحمراء، يرتفع شعار Postext واسمه إلى مكانهما مع العبارة «منضّد قابل للبرمجة للويب». وتحتها: مفتوح المصدر · رخصة MIT · v1.7.0 · يعمل في متصفحك.

   السردإليك Postext: منضّد قابل للبرمجة للويب.

4. 0:24

   على الشاشةالقسم 01 من 07، «المحتوى يدخل»: «Markdown يقول ما الأشياء.» ملف Markdown اسمه 03-why-postext.md يكتب نفسه: موجّه part، والعنوان «Why Postext» مع مقدمة، وفقرة تحيل إلى الشكل fig-flow بالموجّه :ref، وسطر ::resource، وكتلة :::callout. بجانبه ملف config.ts يستدعي buildDocument بتخطيط من عمودين ومتن مضبوط وتقسيم بالواصلة للغة en-us، تحت السطر «الإعداد يقرّر شكلها. لا شيء من الإخراج يعيش في النص.»

   السردتكتب Markdown دلاليًا، يقول ما الأشياء. ويقرّر الإعداد شكلها.

5. 0:32

   على الشاشةالقسم 02، «Pretext يقيس»: «قياس من دون لمس DOM.» عنوان وفقرة وإطار تُمسح واحدًا بعد آخر، وتعطي خطوط الأبعاد ارتفاعاتها بالنقاط؛ ولوحة شيفرة تعرض prepare(text, '25px Lora') وlayout(prepared, width, 38) يعيدان ارتفاعًا وعدد أسطر. شريطان يتسابقان عبر 10,000 فقرة: «إعادة التدفّق في المتصفح · DOM» بالكاد يتحرك، و«Pretext · مقاييس canvas + حساب» يمتلئ في الحال، وعدّاد يصعد إلى 600× فوق «قياس للنص أسرع منه في DOM، فيُعاد تدفّق كتاب كامل وأنت تكتب» و«Powered by @chenglou/pretext».

   السردتُقاس كل فقرة من دون لمس DOM، بسرعة تصل إلى ستمئة ضعف، بفضل Pretext، المكتبة التي جعلت ذلك ممكنًا.

6. 0:42

   على الشاشةالقسم 03، «Postext يقرّر»: «كل سطر يُوضع قبل أن يُرسم أي بكسل.» حلقة من سبعة أجزاء تضيء تباعًا، البنية والقياس والوضع والتعويم والتحسين والموازنة والإيقاع، مع وصف من سطر واحد لكل منها، بينما تتجمّع بجانبها صفحة من عمودين من دليل Postext: كتل موسومة تطير إلى أعمدتها، ويستقر شكل في مكانه تحت الملاحظة «:ref{id="fig-flow"} → column foot»، وينزل شريط الافتتاح، وتظهر الأسطر، وتتساوى الأعمدة، وتمسح شبكة خطوط الأساس الصفحة نزولًا. تدور الحلقة في التكرارات من 1 إلى 3 وتعرض «استقر في 3 تكرارات» مع علامة صح؛ ويعرض إطار مربع إحاطة سطر واحد وخط أساسه.

   السردثم يقرّر Postext. سبع مراحل تضع كل سطر، وتعوّم كل شكل، وتوازن كل عمود، وتتكرر حتى لا يتحرك شيء.

7. 0:54

   على الشاشةالقسم 04، «المستند الافتراضي»: «غيّر كلمة، فلا يُنضَّد من جديد إلا ما تغيّر.»، مع الملاحظة «مثل DOM الافتراضي في React، لكن للصفحات: VDT، شجرة المستند الافتراضية.» سبع صفحات، من p. 7 إلى p. 13، مصفوفة في صف؛ مؤشر كتابة يعلّم تعديلًا في p. 11، فيتحوّل باقي ذلك العمود إلى الذهبي بوسم DIRTY، وينسكب جزء يسير إلى p. 12 التي تنال علامة صح ووسم SETTLED، بينما تحمل الصفحات السابقة وسم SKIPPED واللاحقة وسم UNTOUCHED. ثلاث نقاط تعرض القاعدة، ولوحة عنوانها renderToHtmlIndexed() تعلّم العقد المتغيّرة في شجرة المستند بوسم PATCHED.

   السردكل ذلك يعيش في مستند افتراضي، مثل DOM الافتراضي في React. غيّر كلمة، فلا يُنضَّد من جديد إلا ما تغيّر.

8. 1:03

   على الشاشة«مستند طويل؟ لا يُرسم إلا ما على الشاشة.» عمود من صفحات كتاب يمرّ عبر إطار ذهبي اسمه VIEWPORT، مع هامش 200 بكسل فوقه وتحته: الصفحات داخله مرسومة كاملة، والصفحات خارجه حدود متقطعة. عدّاد كبير يعرض عدد الصفحات المرسومة في تلك اللحظة من أصل 48 (IntersectionObserver · +200 px)، بجانب «الهندسة: كل صفحة. البكسلات: ما تراه فقط.»

   السردوفي الكتاب الطويل، لا تُرسم أبدًا إلا الصفحات الظاهرة على الشاشة.

9. 1:10

   على الشاشةالقسم 05، «ضبط الأسطر بخوارزمية Knuth–Plass»: «كل طرق تقسيم الفقرة. دفعة واحدة.» على اليسار فقرة عن تقسيم الأسطر منضّدة بطريقة أول ما يتسع، كما يفعل المتصفح، وتتحوّل أرخى أسطرها إلى الأحمر. وتحتها تصير كل كلمة نقطة على خط: أقواس حمراء تعلّم مواضع القطع الجشعة، وأقواس زرقاء باهتة تجرّب كل قطع ممكن، ومسار ذهبي يختار أفضل مجموعة. وعلى اليمين نسخة Knuth–Plass متساوية التباعد، مع رداءة كل سطر، والصيغة «(1 + badness + penalty)²»، ومجموع أدنى من نقاط العيب.

   السرديقسم المتصفح الأسطر بجشع، سطرًا بعد سطر. أما Postext فيستعمل Knuth–Plass، الخوارزمية التي يقوم عليها TeX. تزن كل طرق تقسيم الفقرة كاملة، وتحتفظ بأكثرها انتظامًا.

10. 1:24

    على الشاشةالقسم 06، «إخراج واحد، ثلاثة مُخرِجات»: «ما تراه هو ما يذهب إلى المطبعة.» تحت سطر الشيفرة const vdt = buildDocument(content, config); تنقسم صفحة واحدة إلى ثلاث. Canvas (renderToCanvas()، صور نقطية دقيقة حتى البكسل) تمرّ فوق شبكة بكسلاتها عدسة مكبّرة؛ وHTML (renderToHtml()، نص قابل للتحديد، يتكيّف مع تغيير الحجم) تُحاط كل كتلة فيه بإطار وتُوسم <h1> و<p> و<figure> وغيرها؛ وPDF (renderToPdf()، جاهز للطباعة، PDF/UA، CMYK) تنزلق فيه أربعة ألواح ألوان حتى تتطابق، ثم تظهر علامات القص وشريط الألوان.

    السردإخراج واحد وثلاثة مُخرِجات: Canvas وHTML وPDF جاهز للطباعة. ما تراه هو ما يذهب إلى المطبعة.

11. 1:35

    على الشاشةالقسم 07، «لماذا معيار مفتوح»: «وضع LaTeX المعيار للطباعة. والنشر اليوم يعيش أيضًا على كل شاشة.» بطاقتان: LaTeX، 1984، مع علامات خطأ أمام «مصمَّم للصفحة المطبوعة» و«بناء مقيّد بخطوط جهاز واحد وحزمه» و«ترجم، انتظر، كرّر» و«لا إخراج تحريري على الويب المتجاوب»؛ وPostext، 2026، مع علامات صح أمام «الويب وCanvas وPDF جاهز للطباعة من إخراج واحد» و«ملف .postext محمول واحد يحمل كل شيء» و«يُعاد تدفّقه مباشرةً وأنت تكتب» و«يعمل في أي متصفح · بلا خوادم · MIT». وتضيء بطاقة Postext.

    السردوضع LaTeX المعيار للطباعة. لكن النشر اليوم يعيش على كل شاشة.

12. 1:41

    على الشاشةالعنوان التمهيدي «ملف واحد، الكتاب كله»، والعنوان «معيار مفتوح للنشر، يبلغ ما لا يبلغه LaTeX.» تنفجر أيقونة ملف .postext إلى خمسة أجزاء: preset.json (الإعدادات والتصميم)، وchapters/*.md (ملف Markdown لكل فصل)، وfonts/*.woff2 (الخطوط نفسها)، وimages/ · SVG (كل صورة، مضمّنة)، وresources (الجداول والأشكال والتعليقات). والتعليق: «ملف ZIP عادي: مفتوح، موثّق، برخصة MIT. يمكن لأي أداة قراءته وكتابته.»

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

13. 1:51

    على الشاشة«المعرض · نضّده المحرّك الحقيقي»: جدار من صفحات الكتب يبتعد في منظور بينما يبلغ عدّاد 48 صفحة. النص: «12 فصلًا، و3 أجزاء، وغلاف، أُخرجت في نحو نصف ثانية. كل صفحة من دليل Postext حسبها postext v1.7.0 في المتصفح لهذا الفيلم. لا شيء وُضع باليد.» ثم وسوم: كتب مدرسية، مجلات، طبعات أدبية، كتالوجات.

    السردلهذا يستطيع إخراج كتب من مئات الصفحات في أعشار من الثانية.

14. 1:58

    على الشاشةبطاقة الختام: شعار Postext مع العبارة «منضّد قابل للبرمجة للويب»، والعنوان postext.dev، وسطر طرفية يكتب «$ pnpm add postext»، والتذييل «مفتوح المصدر · MIT · github.com/drnachio/postext».

    السردPostext. مفتوح المصدر، على postext.dev.