چرا فقط direction: rtl کافی نیست؛ اشتباه‌های رایج در راست‌چین کردن قالب و سایت انگلیسی و روش درست با CSS Logical Properties.
یک قالب انگلیسی خریده‌ای یا سایتی داری که برای زبان انگلیسی ساخته شده و حالا باید فارسی شود. اولین کاری که همه می‌کنند اضافه کردن dir="rtl" به تگ html است. چند ثانیه بعد متن‌ها راست می‌شوند و همه چیز درست به نظر می‌رسد، تا وقتی که منو، آیکون‌ها، فاصله‌ها و اسلایدر را نگاه کنی.
این مقاله توضیح می‌دهد چرا راست‌چین کردن واقعی بیشتر از یک خط کد است و چطور درست انجامش بدهی.
چرا dir=“rtl” کافی نیست؟
مرورگر با dir="rtl" جهت متن و ترتیب عناصر inline و flex را برمی‌گرداند. ولی هر چیزی که در CSS با جهت ثابت نوشته شده، دست‌نخورده می‌ماند:
margin-leftوpadding-rightهمچنان سمت چپ و راست قبلی را می‌گیرند.left: 0وright: 20pxدر منوهای کشویی و پاپ‌آپ‌ها جای اشتباه می‌نشینند.text-align: leftمتن را دوباره چپ‌چین می‌کند.- آیکون‌های جهت‌دار مثل فلش «بعدی» برعکس معنی می‌دهند.
- اسلایدرها و کاروسل‌ها اغلب جهت حرکتشان را در جاوااسکریپت ثابت دارند.
روش درست: CSS Logical Properties
به‌جای left و right، از ویژگی‌هایی استفاده کن که به «شروع» و «پایان» خط اشاره می‌کنند. این‌ها در هر دو جهت خودشان درست کار می‌کنند:
| قدیمی | منطقی |
|---|---|
margin-left | margin-inline-start |
padding-right | padding-inline-end |
left | inset-inline-start |
text-align: left | text-align: start |
border-left | border-inline-start |
اگر سایت از اول با این ویژگی‌ها نوشته شود، دوزبانه کردنش تقریباً رایگان است. برای قالب‌های موجود، باید این تبدیل در کل CSS انجام شود.
فونت فارسی، فقط یک تعویض اسم نیست
فونت انگلیسی قالب برای حروف فارسی طراحی نشده. وقتی فونت فارسی مثل وزیرمتن یا استعداد جایگزین می‌شود، چند چیز هم باید تنظیم شود:
- ارتفاع خط: حروف فارسی دندانه و نقطه‌ی بیشتری دارند و معمولاً
line-heightبیشتری لازم دارند. - فاصله‌ی حروف:
letter-spacingکه برای تیترهای انگلیسی زیباست، حروف فارسی را از هم جدا می‌کند و باید صفر شود. - حروف بزرگ:
text-transform: uppercaseروی فارسی اثری ندارد ولی ممکن است عناصری بر اساسش طراحی شده باشند. - اعداد: تصمیم بگیر اعداد فارسی باشند یا انگلیسی، و همه جا یکسان.
آیکون‌ها و تصاویر
همه‌ی آیکون‌ها نباید برعکس شوند. فلش‌های «قبلی/بعدی»، آیکون ارسال پیام و نوار پیشرفت باید آینه شوند؛ ولی آیکون جست‌وجو، تیک، ساعت و لوگوها نه. برای آینه کردن، کافی است در حالت راست‌چین از transform: scaleX(-1) استفاده کنی.
جاوااسکریپت و افزونه‌ها
اسلایدرهایی مثل Swiper و Slick گزینه‌ی RTL دارند که باید روشن شود. منوهای کشویی، تولتیپ‌ها و دیت‌پیکرها هم معمولاً موقعیتشان را با جاوااسکریپت حساب می‌کنند و باید بررسی شوند. در وردپرس، بسیاری از افزونه‌ها فایل rtl.css جدا دارند که فقط وقتی زبان سایت فارسی باشد بارگذاری می‌شود.
در وردپرس چه کار کنیم؟
وردپرس اگر زبان سایت فارسی باشد، به‌طور خودکار دنبال فایل rtl.css در قالب می‌گردد. دو راه داری:
- ساخت rtl.css جدا: فقط قانون‌هایی که باید برعکس شوند در این فایل می‌آیند. برای قالب‌هایی که نمی‌خواهی CSS اصلی‌شان را دست بزنی مناسب است.
- بازنویسی با Logical Properties: تمیزتر است و برای سایت دوزبانه بهترین انتخاب است، ولی کار بیشتری دارد.
چک‌لیست قبل از تحویل
- منوی اصلی و زیرمنوها در دسکتاپ و موبایل
- فرم‌ها: جای آیکون داخل فیلد، پیغام خطا و چک‌باکس‌ها
- جدول‌ها و اسکرول افقی
- اسلایدرها و کاروسل‌ها
- پاپ‌آپ‌ها، تولتیپ‌ها و منوهای کشویی
- فیلدهایی که باید چپ‌چین بمانند: ایمیل، شماره تلفن، آدرس سایت و کد
جمع‌بندی
راست‌چین کردن درست یعنی بازبینی CSS، فونت، آیکون‌ها و جاوااسکریپت؛ نه فقط یک ویژگی روی تگ html. اگر قالب یا سایتی داری که باید فارسی و راست‌چین شود، سرویس راست‌چین‌سازی دقیقاً برای همین است. اگر هم طرح را از اول داری، تبدیل فیگما به HTML را طوری انجام می‌دهم که از روز اول در هر دو جهت درست کار کند.