Pretext.js: مكتبة 15 كيلوبايت تجعل تخطيط النصوص أسرع 500 مرة

ملخص سريع

Pretext.js هي مكتبة TypeScript خالية من التبعيات تقيس وتضع النصوص متعددة الأسطر من خلال العمليات الحسابية البحتة بدلاً من عمليات DOM. إنها تقضي على إعادة التدفق المتزامنة القسرية، وتوفر قياس نص أسرع بحوالي 500 مرة من getBoundingClientRect()، وتدعم كل نظام كتابة رئيسي على هذا الكوكب. إذا كنت تقوم ببناء متصفحات افتراضية، أو واجهات مستخدم للدردشة، أو شبكات بيانات، فإن هذه المكتبة تحل مشكلة تجاهلتها المتصفحات لمدة 30 عامًا.

مقدمة

في كل مرة تستدعي فيها JavaScript الدالة getBoundingClientRect() أو تقرأ offsetHeight، يتوقف المتصفح عن كل شيء. يقوم بمسح تغييرات الأنماط المعلقة، ويعيد حساب التخطيط، ويفرض تمرير عرض كامل. هذا يسمى إعادة التدفق المتزامنة القسرية، وهي العملية الأكثر تكلفة التي يمكن للمتصفح أن يؤديها.

الآن، اضرب ذلك في 1000 فقاعة دردشة في قائمة افتراضية. أو 10000 صف في شبكة بيانات. ما هي النتيجة؟ إطارات متقطعة، تشويش، ومستخدمون يعتقدون أن تطبيقك معطل.

قام Cheng Lou، المطور الذي يقف وراء react-motion (أكثر من 21,700 نجمة على GitHub) ومساهم رئيسي في React و ReasonML في Meta، ببناء Pretext.js لإصلاح هذا. تم إطلاق المكتبة في مارس 2026، وحصلت على أكثر من 14,000 نجمة على GitHub في غضون أيام، وأثارت واحدة من أكبر سلاسل Hacker News لهذا العام.

تتناول هذه المقالة ما يفعله Pretext.js، وكيف يعمل داخليًا، ومتى يجب عليك استخدامه، وأين يقصر. ستتعرف على ما إذا كانت هذه المكتبة تنتمي إلى حزمة أدواتك.

ما هو Pretext.js؟

Pretext.js هو محرك تخطيط نصي نقي يعتمد على JavaScript/TypeScript. يقيس ويضع النصوص متعددة الأسطر بالكامل من خلال العمليات الحسابية؛ لا يوجد getBoundingClientRect()، ولا offsetHeight، ولا إعادة تدفق، ولا إجهاد.

الفكرة الأساسية بسيطة. بدلاً من سؤال المتصفح "ما هو ارتفاع هذا النص؟" (مما يجبر المتصفح على عرضه أولاً)، يحسب Pretext.js الإجابة رياضيًا باستخدام مقاييس الخط من Canvas API.

إليك واجهة الـ API بأكملها:

import { prepare, layout } from '@chenglou/pretext';

// الخطوة 1: تحضير النص (مرة واحدة، قابل للتخزين المؤقت)
const handle = prepare('Hello, pretext.js', '16px "Inter"');

// الخطوة 2: التخطيط بأي عرض (حسابي بحت، ميكروثانية)
const { height, lineCount } = layout(handle, 400, 24);

هذا كل شيء. دالتان. إحداهما تقيس أجزاء النص وتخزنها مؤقتًا. والأخرى تقوم بعمليات حسابية لحساب التخطيط. استدعاء prepare() هو العملية الوحيدة التي تتصل بالمتصفح (عبر Canvas measureText()). بعد ذلك، layout() هو رياضيات بحتة.

لماذا يعتبر هذا مهمًا للتطبيقات كثيفة استخدام الـ API

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

يمنحك Pretext.js هذا الارتفاع في ميكروثواني بدلاً من ميلي ثانية. الفرق يتراكم بسرعة.

المشكلة التي يحلها Pretext.js

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

شرح إعادة التدفق المتزامنة القسرية

عندما تكتب هذا الكود:

const elements = document.querySelectorAll('.text-block');
elements.forEach(el => {
  const height = el.getBoundingClientRect().height; // إعادة تدفق!
  // استخدم الارتفاع للتحديد...
});

كل استدعاء لـ getBoundingClientRect() يجبر المتصفح على:

1. إيقاف تنفيذ JavaScript مؤقتًا
2. مسح جميع تغييرات الأنماط المعلقة
3. إعادة حساب التخطيط للمستند بأكمله (أو شجرة فرعية)
4. إرجاع القيمة المحسوبة

يسمى هذا "Layout thrashing". في حلقة تقيس 1000 عنصر، يقوم المتصفح بـ 1000 عملية إعادة حساب تخطيط كاملة. التكلفة؟ حوالي 94 ميلي ثانية، مما يعني 6 إطارات متقطعة عند 60 إطارًا في الثانية.

مشكلة التمرير الافتراضي

مكتبات التمرير الافتراضي (مثل react-window أو tanstack-virtual) تحتاج إلى معرفة ارتفاع كل عنصر لحساب مواقع التمرير. بالنسبة للعناصر ذات الارتفاع الثابت، هذا تافه. أما بالنسبة لمحتوى النص ذي الارتفاع المتغير، فهو كابوس.

الحل البديل القياسي هو عرض العناصر خارج الشاشة، ثم قياسها، ثم تحديد موضعها. هذا يعمل ولكنه يهزم الغرض من التمرير الافتراضي؛ فأنت تقوم بعرض عقد DOM تحاول تجنب عرضها.

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

Pretext.js يلغي هذه الفئة الكاملة من الحلول البديلة. يمكنك حساب ارتفاع النص الدقيق قبل وجود أي عقدة DOM.

أرقام حقيقية

نشرت Pretext.js نتائج الاختبار المعيارية على موقعها:

تحسين السرعة يكون أكثر دراماتيكية مع الدفعات الأصغر لأن التكلفة الثابتة لكل استدعاء لقياس DOM تظل ثابتة بينما تتزايد تكلفة العمليات الحسابية في Pretext.js بشكل خطي.

كيف يعمل Pretext.js داخليًا

تعمل المكتبة في ثلاث مراحل متميزة. يساعدك فهمها على تحسين طريقة استخدامك لها.

المرحلة 1: تجزئة النص

عندما تستدعي prepare()، يقوم Pretext.js أولاً بتطبيع نص الإدخال الخاص بك. يتعامل مع المسافات البيضاء، ويطبق قواعد فواصل الأسطر في Unicode (UAX #14)، ويجزئ النص إلى وحدات قابلة للتقسيم.

هذا هو المكان الذي يأتي فيه دعم اللغات المتعددة. يتعامل محرك التجزئة بشكل صحيح مع:

• أحرف CJK (الصينية، اليابانية، الكورية): كل حرف هو نقطة فاصلة صالحة.
• العربية والعبرية: نص من اليمين إلى اليسار مع علامات ثنائية الاتجاه.
• التايلاندية: لا توجد مسافات بين الكلمات، تتطلب تجزئة تعتمد على القواميس.
• الهندية/الديفاناغارية: أحرف مركبة وحروف متصلة معقدة.
• الرموز التعبيرية (Emoji): يتعامل بشكل صحيح مع تسلسلات الرموز التعبيرية متعددة النقاط الرمزية (الأعلام، درجات لون البشرة، تسلسلات ZWJ).
• الواصلات اللينة: يحترم فرص الفصل ­.

المرحلة 2: قياس Canvas

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

// داخليًا: كيف يقيس Pretext النص
const ctx = offscreenCanvas.getContext('2d');
ctx.font = '16px "Inter"';
const metrics = ctx.measureText('Hello'); // لا يوجد إعادة تدفق!
const width = metrics.width; // عرض تقدم الحرف

يتم تخزين القياسات مؤقتًا حسب تركيبة الجزء والخط. إذا استدعيت prepare() بنفس النص والخط مرتين، فإن الاستدعاء الثاني يعيد استخدام البيانات المخزنة مؤقتًا.

المرحلة 3: تخطيط حسابي بحت

تأخذ الدالة layout() عروض الأجزاء المخزنة مؤقتًا وعرض الحاوية، ثم تحسب فواصل الأسطر باستخدام خوارزمية جشعة:

1. تجمع عروض الأجزاء حتى يتجاوز المجموع عرض الحاوية.
2. تكسر إلى سطر جديد.
3. تكرر حتى يتم وضع جميع الأجزاء.
4. تضرب عدد الأسطر في ارتفاع السطر للحصول على الارتفاع الكلي.

لا يوجد DOM. لا يوجد Canvas. فقط عمليات جمع ومقارنة بحتة.

لهذا السبب layout() سريع جدًا؛ إنه يقوم بنفس العمليات الحسابية التي قد تكتبها على الورق باستخدام مسطرة وآلة حاسبة.

نمط المعالج القابل لإعادة الاستخدام

أحد أفضل قرارات التصميم في Pretext.js هو أن prepare() تعيد معالجًا قابلاً لإعادة الاستخدام. يعمل استدعاء prepare() واحد عبر جميع عروض الحاويات:

const handle = prepare(longArticleText, '16px "Inter"');

// حساب الارتفاع للجوال، الجهاز اللوحي، وسطح المكتب في ميكروثواني
const mobile = layout(handle, 375, 24);   // { height: 2400, lineCount: 100 }
const tablet = layout(handle, 768, 24);   // { height: 1200, lineCount: 50 }
const desktop = layout(handle, 1200, 24); // { height: 720, lineCount: 30 }

هذا النمط مثالي لحسابات التصميم المتجاوب. تقوم بالقياس مرة واحدة وتضع التصميم بأي عرض على الفور.

حالات الاستخدام العملي

1. التمرير الافتراضي مع نصوص متغيرة الارتفاع

هذه هي حالة الاستخدام الأساسية. إليك كيفية دمج Pretext.js مع متصفح افتراضي:

import { prepare, layout } from '@chenglou/pretext';

interface TextItem {
  id: string;
  content: string;
}

function computeHeights(items: TextItem[], containerWidth: number) {
  return items.map(item => {
    const handle = prepare(item.content, '14px "Inter"');
    const { height } = layout(handle, containerWidth, 20);
    return { id: item.id, height: height + 32 }; // +32 للحشو
  });
}

// 10,000 عنصر تم قياسها في ~4 ميلي ثانية
const heights = computeHeights(chatMessages, 600);

لا يوجد عرض خارج الشاشة. لا يوجد تقدير للارتفاع. لا توجد قفزات مرئية عند ظهور العناصر.

2. واجهات الدردشة المدعمة بالذكاء الاصطناعي

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

مع Pretext.js، يمكنك إعادة حساب الارتفاع بعد وصول كل جزء دون لمس DOM:

let streamedText = '';
const font = '15px "SF Pro"';

socket.on('token', (token: string) => {
  streamedText += token;
  const handle = prepare(streamedText, font);
  const { height } = layout(handle, bubbleWidth, 22);
  
  // تحديث موضع المتصفح الافتراضي دون قياس DOM
  scroller.updateItemHeight(messageId, height + padding);
});

3. شبكات البيانات مع أعمدة نصية

تحتاج تطبيقات جداول البيانات إلى تغيير حجم العمود تلقائيًا. قياس آلاف قيم الخلايا عبر DOM مكلف. Pretext.js يجعلها سريعة:

function computeColumnWidth(values: string[], font: string, padding: number) {
  let maxWidth = 0;
  for (const value of values) {
    const handle = prepare(value, font);
    // التخطيط بعرض لا نهائي = سطر واحد = عرض النص الطبيعي
    const { height } = layout(handle, Infinity, 20);
    // استخدم تتبع العرض الداخلي للمقبض لتحديد حجم العمود
    maxWidth = Math.max(maxWidth, /* computed width */);
  }
  return maxWidth + padding;
}

4. خلاصات المحتوى متعددة اللغات

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

يتعامل Pretext.js معها جميعًا بنفس الـ API:

const posts = [
  { text: 'This library changed everything', lang: 'en' },
  { text: 'RTL text with correct bidirectional layout', lang: 'ar' },
  { text: 'CJK text gets proper character-level breaks', lang: 'zh' },
];

// نفس الـ API، نتائج صحيحة لكل نص
posts.forEach(post => {
  const handle = prepare(post.text, '16px system-ui');
  const { height } = layout(handle, 400, 24);
});

اختبار تخطيط النص الخاص بك باستخدام Apidog

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

يجعل Apidog هذا أمرًا سهلاً. يمكنك محاكاة استجابات API المتدفقة لاختبار كيفية تعامل تكامل Pretext.js مع التحميل التدريجي للنص. قم بإعداد سيناريوهات اختبار بأطوال نصوص مختلفة، ولغات، وحالات حافة Unicode، ثم تحقق من أن المتصفح الافتراضي الخاص بك يتصرف بشكل صحيح قبل النشر.

بالنسبة للفرق التي تبني منتجات الدردشة بالذكاء الاصطناعي، تتيح لك بيئة اختبار API في Apidog ما يلي:

• محاكاة استجابات البث مع نص مقسم لمحاكاة مخرجات LLM الحقيقية.
• الاختبار باستخدام حمولات متعددة اللغات لاكتشاف أخطاء التخطيط قبل المستخدمين.
• التحقق من مخططات الاستجابة للتأكد من أن حقول النص تحتوي على التنسيق المتوقع.
• تشغيل مجموعات اختبار آلية تغطي حالات حافة عرض النص لديك.

هذا مهم لأن مكتبة تخطيط النص جيدة بقدر جودة البيانات التي تتدفق إليها. تنتج استجابات API السيئة تخطيطات سيئة، بغض النظر عن سرعة محرك القياس الخاص بك.

القيود والانتقادات المعروفة

Pretext.js ليست مثالية. أثار موضوع Hacker News العديد من المخاوف الصحيحة التي تستحق المعرفة قبل اعتمادها.

حالات الحافة لدقة العرض

أبلغ العديد من المستخدمين عن امتداد النص خارج الصناديق المحيطة في عروض Safari و Chrome التجريبية. قد يختلف حساب المكتبة عن التخطيط الأصلي للمتصفح في سيناريوهات محددة:

• الخطوط ذات أزواج التباعد (kerning pairs) غير العادية.
• النص ذو أحجام الخطوط المختلطة ضمن كتلة واحدة.
• اختلافات عرض البكسل الفرعي بين Canvas و DOM.
• خصائص تشكيل النص الغريبة الخاصة بالمتصفح.

تعد حالات الحافة هذه أقل أهمية للتمرير الافتراضي (حيث يكون بضعة بكسلات من الخطأ غير مرئية) وأكثر أهمية للتنسيق الدقيق للبكسل.

قياس Canvas ليس مجانيًا

لا يزال استدعاء prepare() يستخدم محرك نص Canvas في المتصفح. بالنسبة للتطبيقات التي تنشئ آلاف المقابض الفريدة لـ prepare() في كل إطار، يمكن أن يصبح هذا عنق الزجاجة. الحل هو التخزين المؤقت والتجميع، لكن المكتبة لا تفرض أيًا منهما.

لا يوجد دعم لخصائص CSS

يقيس Pretext.js النص الخام بمواصفات خط. لا يأخذ في الاعتبار خصائص CSS التي تؤثر على التخطيط:

• letter-spacing
• word-spacing
• text-indent
• text-transform
• font-feature-settings
• font-variant

إذا كان تنسيق النص الخاص بك يعتمد على خصائص CSS هذه، فلن يتطابق الارتفاع المحسوب مع ما يعرضه المتصفح. ستحتاج إلى مراعاة هذه يدويًا أو قبول التناقض.

لا يحل محل عرض DOM

يخبرك Pretext.js بمدى ارتفاع النص. لا يعرض النص لك. لا تزال بحاجة إلى عقد DOM (أو عرض Canvas/SVG) لعرض النص. قيمة المكتبة تكمن في مرحلة القياس، وليس في مرحلة العرض.

Pretext.js مقابل الأساليب التقليدية

يعتمد الاختيار الصحيح على قيودك. إذا كنت بحاجة إلى دقة بكسل مثالية ودعم خصائص CSS، فإن قياس DOM لا يزال هو الحقيقة المطلقة. إذا كنت بحاجة إلى سرعة عبر آلاف العناصر ويمكنك تحمل اختلافات طفيفة تحت البكسل، فإن Pretext.js يفوز بفارق كبير.

البدء

التثبيت

npm install @chenglou/pretext
# أو
pnpm add @chenglou/pretext
# أو
bun add @chenglou/pretext

الاستخدام الأساسي

import { prepare, layout } from '@chenglou/pretext';

// قياس فقرة
const handle = prepare(
  'Pretext.js يحسب تخطيط النص دون لمس DOM.',
  '16px "Inter"'
);

// الحصول على الارتفاع بعرض حاوية محدد
const result = layout(handle, 600, 24);
console.log(result.height);    // على سبيل المثال، 48 (سطران × 24 بكسل)
console.log(result.lineCount); // على سبيل المثال، 2

التكامل مع React

import { prepare, layout } from '@chenglou/pretext';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useMemo, useRef } from 'react';

function VirtualChat({ messages }: { messages: string[] }) {
  const parentRef = useRef<HTMLDivElement>(null);
  const containerWidth = 600;
  const font = '14px "Inter"';
  const lineHeight = 20;

  const heights = useMemo(() => {
    return messages.map(msg => {
      const handle = prepare(msg, font);
      const { height } = layout(handle, containerWidth, lineHeight);
      return height + 24; // حشو
    });
  }, [messages]);

  const virtualizer = useVirtualizer({
    count: messages.length,
    getScrollElement: () => parentRef.current,
    estimateSize: (index) => heights[index],
  });

  return (
    <div ref={parentRef} style={{ height: '100vh', overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
        {virtualizer.getVirtualItems().map(virtualRow => (
          <div
            key={virtualRow.key}
            style={{
              position: 'absolute',
              top: virtualRow.start,
              width: containerWidth,
            }}
          >
            {messages[virtualRow.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

يمنحك هذا دردشة افتراضية بارتفاعات عناصر دقيقة محسوبة قبل عرض أي رسالة في DOM. لا يوجد تقدير، ولا قفزات تصحيح، ولا إعادة تدفق.

ساحة اللعب التفاعلية

يتضمن موقع Pretext.js الإلكتروني ساحة لعب تفاعلية على pretextjs.dev/playground حيث يمكنك لصق النص واختيار الخطوط وتعديل عرض الحاوية ورؤية حساب التخطيط في الوقت الفعلي. إنها أسرع طريقة للتحقق من السلوك قبل الدمج.

متى يجب ألا تستخدم Pretext.js

Pretext.js ليست الأداة المناسبة لكل مشكلة قياس نص:

• الصفحات الثابتة ذات المحتوى المعروف: إذا كان النص الخاص بك لا يتغير ولم تكن تقوم بظرفنة افتراضية، فإن CSS يتعامل مع التخطيط بشكل جيد. لا حاجة لمكتبة.
• تخطيطات الطباعة المثالية بالبكسل: تهم اختلافات البكسل الفرعي بين قياس Canvas وعرض DOM بدقة الطباعة. استخدم DOM كمرجع أساسي.
• تنسيق النص بـ CSS المكثف: إذا كنت تعتمد على letter-spacing، text-indent، أو font-feature-settings، فستختلف حسابات الارتفاع عن الإخراج المعروض.
• العرض من جانب الخادم: يعتمد Pretext.js على Canvas API، وهو غير متوفر في Node.js بدون polyfills مثل node-canvas. الدعم من جانب الخادم مدرج في خارطة الطريق ولكنه لم يتم شحنه بعد.
• القوائم الصغيرة والثابتة: إذا كان لديك 50 عنصرًا في قائمة، فإن قياس DOM يستغرق أقل من 5 مللي ثانية. التحسين لا يستحق التبعية.

الأسئلة الشائعة

هل Pretext.js جاهز للإنتاج؟

تم إطلاق المكتبة في مارس 2026 وحصلت على أكثر من 14000 نجمة على GitHub في غضون أيام. يدير Cheng Lou، المبتكر، الواجهة الأمامية لـ Midjourney؛ وهو نظام إنتاج يخدم ملايين المستخدمين. تغطي مجموعة اختبارات المكتبة عشرات اللغات وحالات الحافة. ومع ذلك، إنه إصدار جديد. قم بتثبيت إصدارك واختبره مقابل الخطوط والمحتوى الخاص بك.

هل يعمل Pretext.js مع React و Vue و Svelte؟

نعم. Pretext.js مستقل عن الإطار. إنها مكتبة TypeScript خالصة بوظيفتين. يمكنك استدعاء prepare() و layout() أينما تحتاج إلى قياسات نصية؛ داخل React hooks، و Vue composables، و Svelte stores، أو JavaScript عادي.

كيف يتعامل Pretext.js مع خطوط الويب؟

تقيس الدالة prepare() النص باستخدام أي خط تم تحميله في المتصفح وقت الاستدعاء. إذا لم يتم تحميل خط الويب الخاص بك بعد، فسيستخدم القياس الخط الاحتياطي وينتج عنه نتائج غير صحيحة. تأكد من تحميل خطوطك قبل استدعاء prepare(). استخدم Font Loading API (document.fonts.ready) للتحقق.

هل يمكنني استخدام Pretext.js لعرض Canvas أو SVG؟

نعم. تحسب المكتبة تخطيط النص الذي لا يعتمد على هدف العرض. يمكنك استخدام الارتفاعات وكسر الأسطر المحسوبة لتحديد موضع النص في Canvas 2D، و WebGL، و SVG، أو DOM. يعرض موقع Pretext.js أمثلة لجميع أهداف العرض هذه.

هل يدعم لغات RTL (من اليمين إلى اليسار)؟

نعم. يتعامل Pretext.js مع العربية والعبرية وغيرها من النصوص التي تُكتب من اليمين إلى اليسار (RTL) بدعم مناسب للنصوص ثنائية الاتجاه. كما يتعامل مع النصوص مختلطة الاتجاه (مثل النص العربي مع كلمات إنجليزية مدمجة) بشكل صحيح.

ما هو حجم الحزمة؟

15 كيلوبايت بعد التصغير وبدون تبعيات. لا تتطلب أي polyfills. تستخدم المكتبة فقط واجهات برمجة تطبيقات المتصفح القياسية (Canvas measureText() و Intl.Segmenter عند توفرها).

ما مدى دقته مقارنة بقياس DOM؟

بالنسبة لمعظم محتوى النص، يتطابق Pretext.js مع تخطيط DOM بحدود 1-2 بكسل. تعتمد الدقة على الخط وخصائص CSS التي تستخدمها. لا يتم أخذ خصائص مثل letter-spacing و word-spacing في الاعتبار، لذا إذا استخدمت هذه، فتوقع اختلافات أكبر. بالنسبة للتمرير الافتراضي، حيث يكون بضعة بكسلات من الخطأ غير مرئية، فإن الدقة كافية تمامًا.

هل يمكن لـ Pretext.js قياس النص المنسق (غامق، مائل، أحجام مختلطة)؟

يأخذ كل استدعاء prepare() مواصفات خط واحدة. بالنسبة للنص ذي الأنماط المختلطة (كلمات غامقة ضمن نص عادي)، ستحتاج إلى تجزئة النص بنفسك وإنشاء مقابض منفصلة لكل نمط. هذا قيد معروف قد يتم معالجته في الإصدارات المستقبلية.

الخلاصة

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

المكتبة ليست حلًا سحريًا. لا تدعم خصائص نص CSS بخلاف مواصفات الخط، ولها اختلافات طفيفة في دقة البكسل الفرعي، ولا تعمل من جانب الخادم بعد. ولكن لحالة الاستخدام المستهدفة؛ حساب ارتفاعات النص مسبقًا للقوائم الافتراضية؛ لا يوجد شيء آخر يقترب منها.

هل أنت مستعد لبناء واجهات مستخدم كثيفة النصوص أسرع؟ ابدأ باختبار نقاط نهاية API الخاصة بك باستخدام Apidog للتأكد من أن طبقة البيانات الخاصة بك صلبة، ثم قم بإسقاط Pretext.js في خط أنابيب العرض الخاص بك.