چک‌لیست رابط راست‌به‌چپ (RTL) برای وب؛ ۱۵ نکته که معمولاً جا می‌ماند

افزودن dir="rtl" به صفحه، متن را راست‌چین می‌کند و ترتیب ستون‌های flex و grid را برمی‌گرداند. ولی بیشتر باگ‌های رابط فارسی بعد از همین لحظه شروع می‌شوند: آیکونی که به سمت اشتباه اشاره می‌کند، انیمیشنی که از طرف عکس می‌آید یا صفحه‌ای که در موبایل اسکرول افقی می‌خورد.

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

#چیدمان

۱. هیچ left و right در CSS. به‌جایشان ویژگی‌های منطقی: margin-inline-start، padding-inline-end، inset-inline-start، border-inline-start و text-align: start. این یک تصمیم، بیشتر باگ‌های چیدمان را از بین می‌برد.

۲. row-reverse نزنید. flex و grid خودشان از dir پیروی می‌کنند. flex-direction: row در RTL از راست شروع می‌شود؛ برگرداندن دستی، در RTL دوباره برعکسش می‌کند.

۳. گوشه‌های گرد هم منطقی‌اند. به‌جای border-top-left-radius از border-start-start-radius استفاده کنید.

#آیکون‌ها

۴. فقط آیکون‌های جهت‌دار قرینه شوند. بعدی، قبلی، بازگشت، ارسال، جداکننده‌ی مسیر صفحه و آیکون‌های تراز متن قرینه می‌شوند.

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

۶. قرینه‌سازی با یک علامت، نه در هر صفحه. یک کلاس مثل icon--directional که در RTL scaleX(-1) بگیرد، بهتر از تصمیم دستی در هر جاست.

#متن و عدد

۷. تکه‌های انگلیسی را جدا کنید. نام محصول، کد، آدرس ایمیل و نام فایل وسط جمله‌ی فارسی را در عنصری با unicode-bidi: isolate (یا ) بگذارید تا علامت‌ها جابه‌جا نشوند. مثال‌های بیشتر را در مقاله‌ی خطاهای فارسی هوش مصنوعی آورده‌ام.

۸. شماره‌ی کارت و شبا چپ‌به‌راست، ولی با ارقام فارسی. جهت و شکل رقم دو تصمیم جدا هستند. فیلد ورود این شماره‌ها dir="ltr" دارد و در فرم راست‌چین با text-align: end هم‌تراز می‌ماند.

۹. بازه را با «تا» بنویسید، نه خط تیره. «۱۰-۲۰» در متن راست‌به‌چپ ممکن است «۲۰-۱۰» دیده شود. «۱۰ تا ۲۰» همیشه درست است.

۱۰. متن را کشیده تراز نکنید. text-align: justify در فارسی فاصله‌های ناجور یا کشیدگی حروف می‌سازد. start کافی است.

#حرکت و اسکرول

۱۱. انیمیشن‌های translateX را برعکس کنید. کشویی که در LTR از چپ می‌آید، در RTL باید از راست بیاید. یک متغیر --dir: -1 روی [dir=rtl] و ضرب آن در مقدار حرکت، کار را تمام می‌کند.

۱۲. scrollLeft در RTL منفی یا برعکس است. کدهایی که موقعیت اسکرول افقی را می‌خوانند (اسلایدر، جدول) در مرورگرهای مختلف رفتار متفاوت دارند. همیشه در RTL تست کنید.

۱۳. عنصرهای مخفی با left: -9999px اسکرول افقی می‌سازند. در RTL این عنصرها سمت راست صفحه می‌افتند و صفحه پهن می‌شود. به‌جایش از clip-path: inset(50%) و اندازه‌ی یک پیکسل استفاده کنید. همین باگ را در لینک «رفتن به محتوای اصلی» خود این سایت داشتیم.

۱۴. محتوای چپ‌به‌راست بلند، ستون را پهن می‌کند. کد، آدرس اینترنتی یا دستور ترمینال داخل grid، ستون را بیرون می‌زند. minmax(0, 1fr) و min-width: 0 را فراموش نکنید.

#تست

۱۵. هر کامپوننت را در هر دو جهت و در ۳۷۵ پیکسل ببینید. و در هر فیلد، متن مخلوط تایپ کنید: فارسی، انگلیسی و عدد با هم. بیشتر باگ‌های دوجهته فقط با متن مخلوط پیدا می‌شوند.

#متن هم بخشی از RTL است

رابطی که چیدمانش درست است ولی متنش ترجمه‌ی لفظ‌به‌لفظ است، هنوز فارسی نیست. دکمه‌هایی که فعل دارند، خطاهایی که راه نشان می‌دهند و نیم‌فاصله‌ی درست، نیمه‌ی دیگر یک رابط فارسی خوب‌اند. قاعده‌هایش را در ۱۲ قاعده‌ی یوایکس رایتینگ فارسی نوشته‌ام.