‏سه قابلیت CSS که بی‌سروصدا از زیر رادارمون رد شدن

نویسنده با یه اعتراف شروع می‌کنه: پا به پای وب اومدن دیگه یه دو نرم نیست، یه ورزش حرفه‌ایه. بین قابلیت‌های پرسروصدایی مثل ویو ترنزیشن و انیمیشن اسکرول‌محور و انکر پوزیشنینگ، یه سری امکان کوچیک‌تر بی‌سروصدا به سطح baseline رسیدن که دقیقاً همون هک‌های آزاردهندهٔ قدیمی رو حل می‌کنن. سه‌تاشون رو انتخاب کرده و برای هرکدوم دموی جدا ساخته.

اولی Custom Highlight API ـه. قدیم برای ساختن قابلیت جستجو در صفحه باید DOM رو می‌گشتی، گره‌های متنی رو می‌شکستی، تطبیق‌ها رو تو یه span می‌پیچیدی و بعد هم مجبور بودی همه‌شون رو تمیز کنی؛ کند بود و باعث چیدمان مجدد می‌شد. این API استایل هایلایت رو کاملاً از ساختار DOM جدا می‌کنه: استایل رو تو CSS با شبه‌عنصر ::highlight() تعریف می‌کنی و با جاوااسکریپت فقط بازه‌های متنی رو مشخص می‌کنی. به توضیح نویسنده، مرورگر فاز چیدمان رو کلاً رد می‌کنه چون هندسهٔ متن از قبل حساب شده، و موقع رنگ‌آمیزی یه مستطیل پس‌زمینه زیر همون مختصات می‌کشه:

const textNode = document.getElementById("demo-text").firstChild;

const range1 = new Range();
range1.setStart(textNode, 4);
range1.setEnd(textNode, 24);

const yellowPen = new Highlight(range1);
CSS.highlights.set("yellow-pen", yellowPen);

این قابلیت از کروم ۱۰۵ (شهریور ۱۴۰۱) موجود بوده ولی سافاری ۱۷٫۲ و فایرفاکس ۱۱۱ دیرتر بهش رسیدن. دومی دو کلیدواژهٔ تازه برای text-indent ـه که تازگی baseline شدن. hanging تورفتگی معکوس می‌سازه — خط اول صاف می‌مونه و بقیهٔ خطوط تو می‌رن، همون چیزی که تو کتابنامه‌ها و واژه‌نامه‌ها می‌بینی و قبلاً با ترکیب padding و مقدار منفی هکش می‌کردیم:

cite {
  text-indent: 3em hanging;
}

کلیدواژهٔ each-line هم مشکل دیگه‌ای رو حل می‌کنه: text-indent معمولی فقط روی خط اول بلوک اثر داره، پس خطی که بعد از میاد تورفتگی نمی‌گیره. برای تایپ‌ست شعر، متن ترانه یا دیالوگ فیلمنامه دقیقاً همین رو لازم داری. نویسنده اشاره می‌کنه که این تورفتگی منطقیه، یعنی از ابتدای بلوک شروع می‌شه صرف‌نظر از جهت نوشتار — نکته‌ای که برای متن راست‌به‌چپ اهمیت داره. پشتیبانی کامل مرورگرها اسفند ۱۴۰۴ با اومدن کروم ۱۴۶ تکمیل شد.

سومی تایپ‌ست ریاضیه. قبلاً برای نمایش فرمول یا باید سراغ کتابخونه‌هایی مثل KaTeX می‌رفتی یا هر فرمول رو به‌صورت SVG بیرون می‌دادی، که برای دسترس‌پذیری فاجعه بود چون صفحه‌خوان‌ها نمی‌تونستن چیدمان بصری معادله رو بخونن. حالا با فراگیر شدن MathML می‌شه معادله رو مستقیم و معنایی تو HTML نوشت، و کلیدواژهٔ عمومی math تو font-family به مرورگر می‌گه سراغ فونت‌های سیستمی‌ای بره که جدول‌های چیدمان ریاضی دارن — فونت‌هایی مثل STIX یا Latin Modern Math که دستور رندر کردن کسرهای تودرتو، پرانتزهای کشیده و انتگرال‌ها رو با خودشون دارن. این ترکیب از سال ۲۰۲۳ و کروم ۱۰۹ پشتیبانی گسترده داره و بدون یه خط جاوااسکریپت بیرونی کار می‌کنه.

نکات کلیدی:

• ::highlight() هایلایت رو بدون تغییر DOM و بدون چیدمان مجدد انجام می‌ده
• بازه‌ها با Range ساخته و تو رجیستری CSS.highlights ثبت می‌شن
• text-indent: 3em hanging تورفتگی معکوس رو بومی می‌کنه
• each-line تورفتگی رو به خطوط بعد از هم اعمال می‌کنه و منطقیه، نه وابسته به چپ و راست
• font-family: math کنار MathML، فرمول‌های بومی و قابل‌خوانش برای صفحه‌خوان می‌سازه