‏Pretext: اندازه‌گیری متن بدون لمس DOM

Pretext یه کتابخانه‌ی سبک و سریع JavaScript/TypeScript هست که مشکل قدیمی و دردسرساز اندازه‌گیری ارتفاع متن چندخطی در وب رو حل می‌کنه. تا حالا هر وقت می‌خواستی بفهمی یه پاراگراف چقدر فضا می‌گیره، مجبور بودی یه المان رو توی DOM بنشونی و بعد ازش اندازه بگیری. این کار باعث چیزی می‌شه که بهش layout reflow می‌گن؛ یکی از گون‌بُرترین عملیات‌های مرورگر.

Pretext این مشکل رو از ریشه حل می‌کنه. به جای اینکه به DOM دست بزنه، منطق اندازه‌گیری خودش رو پیاده کرده و فقط از موتور فونت خود مرورگر به عنوان منبع حقیقت استفاده می‌کنه. نتیجه؟ اندازه‌گیری‌های سریع، دقیق و کاملاً مستقل از DOM.

معماری این کتابخانه دو مرحله‌ای هست. اول تابع prepare() رو یه بار صدا می‌زنی؛ این تابع متن رو نرمال‌سازی می‌کنه، تقسیم‌بندی می‌کنه، قوانین چینش رو اعمال می‌کنه و عرض بخش‌ها رو با canvas اندازه می‌گیره. بعد از اون، هر بار که بخوای مثلاً با تغییر اندازه‌ی پنجره ارتفاع رو دوباره حساب کنی، فقط layout() رو صدا می‌زنی که یه عملیات ساده‌ی ریاضی روی داده‌های از پیش محاسبه‌شده‌ست و فوق‌العاده سریعه.

Pretext دو حالت اصلی داره. حالت اول برای وقتیه که فقط می‌خوای ارتفاع یه پاراگراف رو بدونی؛ مثلاً برای پیاده‌سازی virtualization درست، جلوگیری از layout shift وقتی محتوا لود می‌شه، یا چک کردن اینکه متن دکمه‌ها overflow نمی‌کنن. حالت دوم برای وقتیه که می‌خوای خودت لاین‌ها رو دستی مدیریت کنی؛ مثلاً برای رندر کردن روی Canvas یا SVG.

یکی از قابلیت‌های جالبش walkLineRanges هست که بهت اجازه می‌ده بدون ساخته شدن رشته‌های متنی، فقط اطلاعات هر خط رو بگیری. این برای مواردی مثل binary search روی عرض مناسب (تا متن دقیقاً جا بشه) خیلی به درد می‌خوره. layoutNextLineRange هم یه قابلیت خاص داره: می‌تونی خط به خط متن رو با عرض‌های متفاوت چیدمان کنی؛ مثلاً متن رو دور یه تصویر flow بدی، مثل چیزی که CSS float انجام می‌ده.

این کتابخانه از تمام زبان‌ها پشتیبانی می‌کنه؛ از فارسی و عربی گرفته تا چینی و ژاپنی و ایموجی‌های چندکاراکتری. گزینه‌هایی مثل whiteSpace: 'pre-wrap' برای متن‌های textarea-مانند، wordBreak: 'keep-all' برای زبان‌هایی مثل کره‌ای، و letterSpacing هم موجوده. برای متن‌های غنی که شامل چیپ‌ها، منشن‌ها یا spans مختلف هستن هم یه پکیج کمکی به اسم @chenglou/pretext/rich-inline وجود داره.

در کل Pretext یه قطعه‌ی گمشده‌ی پلتفرم وب رو پر می‌کنه. اندازه‌گیری دقیق ارتفاع متن چندخطی بدون reflow، چیزیه که همیشه توی وب دردسر بوده و این کتابخانه با رویکرد هوشمندانه‌ای این مشکل رو حل کرده.

نکات کلیدی:

• اندازه‌گیری ارتفاع متن بدون هیچ تعاملی با DOM و بدون layout reflow
• معماری دو مرحله‌ای: prepare() برای یک‌بار محاسبه، layout() برای استفاده‌های بعدی
• پشتیبانی از تمام زبان‌ها از جمله فارسی، عربی، چینی و ایموجی
• قابلیت flow کردن متن دور عکس با عرض‌های متفاوت برای هر خط
• امکان رندر روی DOM، Canvas، SVG و در آینده سمت سرور
• پشتیبانی از گزینه‌های whiteSpace، wordBreak و letterSpacing
• کتابخانه کمکی برای متن‌های غنی با چیپ، منشن و inline elements