‏استروک بیرونی متن با CSS، بدون خراب‌شدن حروف

تایلر استیکا تو این مطلب می‌گه کشیدن خط دور متن (استروک بیرونی) توی CSS همیشه دردسر داشته. خاصیت‌های -webkit-text-stroke و هم‌خانواده‌هاش خیلی وقته توی همهٔ مرورگرهای اصلی پشتیبانی می‌شن، ولی مشکل اینه که خط رو وسط‌چین روی مرز حرف می‌کشن؛ برای همین نصف ضخامت استروک می‌ره روی خود حرف و با فونت‌های سنگین یا ضخامت بیشتر از یه خط مو، شکل حروف خیلی زود به‌هم می‌ریزه.

به گفتهٔ نویسنده این وضع با فونت‌های متغیر (variable fonts) بدتر هم می‌شه. طراح‌ها سال‌ها براش راه دور زدن ساخته بودن: گذاشتن چند تا text-shadow تو جهت‌های مختلف، تکرار متن تو دو لایه و استروک‌دادن به لایهٔ زیری، یا استفاده از فیلتر SVG. خودش می‌گه بیشتر وقت‌ها ترجیح می‌داده کلاً سراغ این افکت نره، مگر اینکه بخش کلیدی طراحی بوده باشه.

نکتهٔ اصلی مقاله اینه که ورق برگشته: خاصیت paint-order که مدت‌ها تو وب‌کیت (سافاری) و گِکو (فایرفاکس) بوده، از ۲۰۲۴ پشتیبانی کرومیوم رو هم گرفته. با این خاصیت می‌شه صراحتاً گفت اول استروک کشیده بشه و بعد رنگ متن روش بیاد؛ نتیجه‌ش اینه که خط دور می‌ره زیر حرف و دیگه فضای شکل حروف رو تنگ نمی‌کنه.

نویسنده می‌گه هنوز جای بهتر شدن هست: گوشهٔ استروک‌ها تیز درمیاد و کاش stroke-linejoin و stroke-miterlimit هم اینجا کار می‌کردن، شکل خط تو فایرفاکس گردتر از بقیهٔ مرورگرهاست، و هر text-shadow بالای استروک کشیده می‌شه (خودش تو نمونه‌هاش به‌جاش از فیلتر drop-shadow استفاده کرده). ضمناً هنوز باید همون پیشوند وب‌کیت رو تایپ کرد، اونم تقریباً بیست سال بعد از معرفیش.

نکات کلیدی:

• -webkit-text-stroke خط رو وسط‌چین می‌کشه و نصفش روی خود حرف می‌افته
• paint-order از ۲۰۲۴ توی کرومیوم هم پشتیبانی می‌شه
• با paint-order می‌شه استروک رو زیر رنگ متن فرستاد و شکل حروف رو حفظ کرد
• ترفندهای قدیمی مثل چند text-shadow یا فیلتر SVG دیگه لازم نیست
• محدودیت‌ها: گوشه‌های تیز، رندر گردتر تو فایرفاکس، و text-shadow که بالای استروک می‌شینه