Pretext: مكتبة صغيرة تجعل تنسيق النصوص على الويب أسرع بـ 500 مرة

لمدة 30 عاماً، تعامل الويب مع النصوص كعنصر ثانوي. بينما تمكّن مصممو الطباعة منذ زمن طويل من تدفيق الفقرات حول الصور ولفّها في أعمدة وتكييف الخطوط مع أشكال متنوعة، لم تقدّم المتصفحات أياً من ذلك دون إعادة حسابات DOM المكلفة. مكتبة Pretext، المشروع الجديد مفتوح المصدر من المهندس Cheng Lou العامل في Midjourney، تغيّر هذا الواقع — بقياس وتنسيق النصوص متعددة الأسطر بسرعة تفوق الطرق التقليدية بـ 500 مرة، وبمعدل سلس يبلغ 120 إطاراً في الثانية.

أبرز النقاط

بدون إعادة حساب DOM: تنفّذ Pretext منطق قياس النصوص الخاص بها باستخدام محرك خطوط المتصفح عبر Canvas، متجاوزة تماماً العمليات المكلفة مثل getBoundingClientRect و offsetHeight
عمليتان أساسيتان: تحلّل prepare() وتخزّن قياسات النصوص مؤقتاً في حوالي 19 مللي ثانية لـ 500 فقرة، بينما تحسب layout() الارتفاعات في 0.09 مللي ثانية فقط لنفس الدفعة
طباعة بجودة المجلات: تتدفق النصوص حول العوائق وتلتف في أعمدة وتتكيف مع أشكال عشوائية — قدرات كانت تُعتبر مستحيلة على الويب
عرض شامل: تعمل مع DOM و Canvas و SVG، مع دعم مخطط للتشغيل على الخادم
دعم كامل للغات: تتعامل مع جميع أنظمة الكتابة بما في ذلك النصوص من اليمين لليسار والرموز التعبيرية والمحتوى ثنائي الاتجاه

كيف تعمل

الفكرة الجوهرية وراء Pretext بسيطة لكنها قوية. بدلاً من إدراج النص في DOM وقياس النتيجة — مما يُطلق إعادة حساب تخطيط المتصفح، وهي من أكثر العمليات تكلفة في العرض — تستخدم Pretext واجهة measureText() في Canvas لبناء ذاكرة تخزين مؤقت للقياسات. من تلك الذاكرة، يمكنها حساب ارتفاعات الفقرات وإرجاع كائنات الأسطر الفردية وحتى تنسيق النص سطراً بسطر بعروض متغيرة.

تقدّم المكتبة واجهة برمجة تطبيقات تدريجية. في أبسط صورها، استدعاء prepare() ثم layout() يعطيك ارتفاع الفقرة دون لمس DOM. للاستخدامات المتقدمة، تُرجع layoutWithLines() كائنات الأسطر الفردية، وتُمكّن walkLineRanges() من إنشاء فقاعات نصية مُحكمة، وتتيح layoutNextLine() تغذية عروض مختلفة لكل سطر — مما يجعل تدفق النص حول العوائق أمراً بسيطاً.

ما الذي تتيحه

تعرض صفحة العروض التوضيحية للمشروع سبعة أمثلة تفاعلية توضّح الإمكانيات الجديدة:

تخطيطات تحريرية مع كرات متحركة وإعادة تدفق نصوص حية واقتباسات بارزة وتدفق متعدد الأعمدة — كل ذلك بدون قياس DOM واحد
فقاعات رسائل محكمة تحافظ على عدد الأسطر مع أقل مساحة مهدرة، مشابهة لتطبيقات المراسلة
تخطيطات Masonry حيث يُتنبأ بارتفاعات البطاقات من محتوى النص بدلاً من قياسها بعد العرض
عناوين واعية بالعوائق تُوجّه النص حول الصور في الوقت الفعلي
تنسيق غني مضمّن مع مقاطع برمجية وروابط وشرائح تلتف بشكل طبيعي

هذه الأنماط كانت معيارية في تصميم الطباعة والتطبيقات الأصلية منذ عقود، لكنها ظلت غير عملية على الويب بسبب قيود الأداء.

لماذا هذا مهم

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

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

الخلفية

Cheng Lou، المعروف في مجتمع React بعمله على React Motion و Reason (ReasonML)، بنى Pretext أثناء عمله في Midjourney. تستند المكتبة إلى مفاهيم أساسية من مشروع Sebastian Markbage السابق text-layout. تُصدر تحت رخصة MIT وحصلت بالفعل على أكثر من 6,000 نجمة على GitHub خلال أيام من إطلاقها العام.

تدعم المكتبة سلوكيات النصوص القياسية بما في ذلك white-space: normal و word-break: normal و overflow-wrap: break-word، مع وضع pre-wrap اختياري يحافظ على المسافات وعلامات الجدولة وفواصل الأسطر.

ما التالي

دعم العرض على الخادم مدرج في خارطة الطريق، مما سيتيح حسابات تنسيق النصوص أثناء البناء أو على الخادم — لتقليل العمل على جانب العميل بشكل أكبر. المكتبة مكتوبة بـ TypeScript بدون أي تبعيات، مما يجعل دمجها في أي مشروع ويب أمراً سهلاً.

المصدر: Pretext على GitHub