‏پشتیبانی از زبان‌های راست‌به‌چپ فقط با دو ویژگی HTML

نویسنده‌های Evil Martians تو این مقاله می‌گن یه باگ رایج اینه که کاربر عربی‌زبان تو فیلد ورودی تایپ می‌کنه ولی متنش چپ‌به‌راست و برعکس نشون داده می‌شه؛ علامت‌ها سر جای اشتباه می‌افتن و جمله به‌هم‌ریخته می‌شه. به گفتهٔ اون‌ها این یه حالت نادر نیست، چون بیش از ۶۰۰ میلیون نفر به زبان راست‌به‌چپ می‌نویسن، ولی بیشتر ابزارها این موضوع رو جدی نمی‌گیرن.

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

برای حالت اول، نویسنده می‌گه راه‌حل درست فقط یه ویژگیه: dir="auto" رو روی فیلد بذار. مرورگر اولین کاراکتر جهت‌دار متن رو نگاه می‌کنه و جهت رو همون لحظه تنظیم می‌کنه، بدون جاوااسکریپت یا تشخیص زبان. نویسنده تأکید می‌کنه استفاده از navigator.language اشتباه رایجیه (حتی تو راه‌حل‌های ساخته‌شده با LLM)، چون تنظیم زبون سیستم به تو نمی‌گه کاربر همین الان چی داره تایپ می‌کنه.

<textarea dir="auto" />
<input type="text" dir="auto" />

البته dir="auto" رو فقط باید برای فیلدهای آزاد مثل چت، ورودی پرامپت و کامنت به کار ببری. روی فیلدهای محدود مثل ایمیل، شماره تلفن و عدد ازش استفاده نکن، چون وقتی متن با عدد یا فاصله شروع بشه مرورگر چیزی برای تشخیص نداره و ممکنه پرش یا مکان‌نمای کج بسازه.

برای حالت دوم یعنی رابط کاملاً بومی‌شده، باید dir="rtl" رو روی خود تگ بذاری تا جهت تو کل سند آبشاری بشه. ولی قسمتی که بیشتر برنامه‌نویسا رو زمین می‌زنه CSSه: اگه همه‌جا از margin-left و padding-right و text-align: left استفاده کرده باشی، باید ساعت‌ها دستی همه‌شونو بازنویسی کنی.

راه‌حل، استفاده از CSS Logical Properties هست. به‌جای ویژگی‌های فیزیکی، از معادل‌های منطقی مثل margin-inline-start، border-inline-end و text-align: start استفاده کن تا مرورگر خودش جهت درست رو حساب کنه.

.sidebar {
  margin-inline-start: 24px;
  border-inline-end: 2px solid #eee;
}

نویسنده چندتا تله رو هم گوشزد می‌کنه: آیکون‌های جهت‌دار مثل فلش برگشت باید برعکس بشن ولی لوگو و ستاره نباید؛ و flexbox به‌طور خودکار با جهت سند می‌چرخه که معمولاً همونیه که می‌خوای. در آخر می‌گه چون اکثر رقبا هنوز این کارو نکردن، همین تغییر دو ویژگی‌ای و یه بازبینی CSS می‌تونه تو رو جلو بندازه.

نکات کلیدی:

• بیش از ۶۰۰ میلیون نفر به زبان راست‌به‌چپ می‌نویسن و اکثر ابزارها پشتیبانی‌شون ضعیفه
• برای اپ انگلیسی، فقط dir="auto" روی فیلدهای آزاد متنی کافیه
• navigator.language برای تشخیص جهت متن اشتباهه؛ جهت رو از زبون سیستم نمی‌شه فهمید
• برای رابط کاملاً بومی‌شده، dir="rtl" روی بذار
• به‌جای ویژگی‌های فیزیکی CSS از Logical Properties مثل margin-inline-start استفاده کن