راست‌به‌چپ‌سازی قالب دیتالایف: هفت تله‌ای که کار را خراب می‌کند
راست‌به‌چپ کردن یک قالب در نگاه اول کار ساده‌ای است: dir="rtl" روی <html> و تمام. صفحه برمی‌گردد، متن‌ها درست می‌شوند و همه‌چیز مرتب به نظر می‌رسد. مشکل‌ها بعداً پیدا می‌شوند — معمولاً وقتی مشتری آنها را پیدا می‌کند.
قاعده‌ی طلایی: ویژگی‌های منطقی
پیش از هر چیز، عادت نوشتن را عوض کنید. CSS مدرن ویژگی‌هایی دارد که به‌جای «چپ و راست»، «شروع و پایان» را می‌فهمند و خودشان با جهت صفحه هماهنگ می‌شوند:
| به‌جای | بنویسید |
|---|---|
margin-left | margin-inline-start |
margin-right | margin-inline-end |
padding-left | padding-inline-start |
border-right | border-inline-end |
left: 0 | inset-inline-start: 0 |
text-align: left | text-align: start |
اگر قالب را از ابتدا با اینها بنویسید، بخش بزرگی از کار راست‌به‌چپ‌سازی اصلاً پیش نمی‌آید. حالا برویم سراغ چیزهایی که با این روش هم حل نمی‌شوند.
۱. ترنسفورم‌ها برنمی‌گردند
transform هیچ نسخه‌ی منطقی ندارد. translateX(-100%) در RTL هم دقیقاً همان مقدار را به همان سمت می‌برد. نتیجه: منوی کشویی موبایل که باید از راست بیاید، از چپ می‌آید و اسلایدرها برعکس حرکت می‌کنند.
/* ❌ در راست‌به‌چپ برعکس عمل می‌کند */
.drawer { transform: translateX(-100%); }
/* ✅ جهت را صریح مشخص کنید */
[dir="rtl"] .drawer { transform: translateX(100%); }برای اسلایدرهای آماده، معمولاً گزینه‌ی rtl: true در پیکربندی وجود دارد. اول آن را بررسی کنید؛ دستکاری CSS اسلایدر آخرین راه‌حل است.
۲. سرریز افقی از عناصر مخفی
ترفند قدیمی پنهان کردن عناصر با بردن‌شان به بیرون صفحه، در RTL معنایش عوض می‌شود:
/* ❌ در راست‌به‌چپ باعث اسکرول افقی کل صفحه می‌شود */
.sr-only { position: absolute; left: -9999px; }
/* ✅ روش امن و استاندارد */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}اگر روی موبایل نوار اسکرول افقی می‌بینید و منبعش را پیدا نمی‌کنید، این را اول بررسی کنید.
۳. متن لاتین وسط متن فارسی
نام برند، نسخه، آدرس ایمیل یا کد — هر متن لاتینی که داخل جمله‌ی فارسی بیاید، ممکن است به‌خاطر الگوریتم دوجهته‌ی یونیکد جابه‌جا دیده شود. مخصوصاً وقتی با علامت یا عدد ترکیب شده باشد.
.brand, .ltr {
direction: ltr;
unicode-bidi: isolate; /* متن را از محیط اطرافش جدا می‌کند */
}برای فیلدهای ورودی که محتوای لاتین می‌گیرند (آدرس، ایمیل، کد تخفیف) همیشه dir="ltr" بگذارید. کاربر هنگام تایپ URL در فیلد راست‌چین، هیچ ایده‌ای ندارد که چه اتفاقی دارد می‌افتد.
۴. اعداد و مبالغ
عدد در متن فارسی راست‌چین می‌ماند اما رقم‌هایش چپ‌به‌راست خوانده می‌شوند. برای جدول‌های مالی این دو نکته را رعایت کنید:
.amount {
direction: ltr;
unicode-bidi: embed;
font-variant-numeric: tabular-nums; /* عرض یکسان ارقام، ستون‌ها تراز می‌مانند */
}و جداکننده‌ی هزارگان را در سمت سرور اضافه کنید، نه با CSS. number_format() نتیجه‌ی قابل پیش‌بینی می‌دهد.
۵. آیکن‌های جهت‌دار
فلش «بعدی» در چپ‌به‌راست به راست اشاره می‌کند و در راست‌به‌چپ باید به چپ اشاره کند. آیکن‌های نقل‌قول، انتقال و بازگشت هم همین‌طور. ساده‌ترین راه:
[dir="rtl"] .ic-arrow,
[dir="rtl"] .ic-chevron { transform: scaleX(-1); }ولی مراقب باشید این قاعده را روی همه‌ی آیکن‌ها اعمال نکنید. آیکن ساعت، ذره‌بین یا سبد خرید نباید آینه شود.
۶. سایه و گرادیان
box-shadow و linear-gradient هم منطقی نیستند. سایه‌ای که در LTR زیر و راست عنصر بود، در RTL باید به چپ برود تا منبع نور یکسان به نظر برسد:
.card { box-shadow: 6px 6px 18px rgba(0,0,0,.08); }
[dir="rtl"] .card { box-shadow: -6px 6px 18px rgba(0,0,0,.08); }اگر سایه‌ی شما متقارن است (0 4px …)، نیازی به این کار نیست — که خودش دلیل خوبی است برای اینکه سایه‌ها را متقارن طراحی کنید.
۷. دسترسی به فایل فونت
این مورد ربطی به CSS ندارد ولی همیشه سر همین گیر می‌افتد: اگر فونت‌ها را در زیرپوشه‌ای از قالب گذاشته‌اید و مرورگر خطای ۴۰۳ می‌دهد، احتمالاً یک .htaccess در مسیر بالاتر دسترسی را بسته است. یک .htaccess در پوشه‌ی فونت‌ها اجازه را برمی‌گرداند:
<IfModule mod_authz_core.c>
Require all granted
</IfModule>
<IfModule !mod_authz_core.c>
Order deny,allow
Allow from all
</IfModule>این هفت تله در لایه‌ی CSS اتفاق می‌افتند؛ برای اینکه بدانید هر قطعه‌ی HTML از کدام فایل قالب می‌آید، راهنمای ساختار فایل‌های TPL را کنار دستتان بگذارید.
چک‌لیست تحویل
پیش از اینکه قالب راست‌به‌چپ را تحویل بدهید، اینها را روی موبایل و دسکتاپ ببینید:
- هیچ صفحه‌ای اسکرول افقی ندارد — مخصوصاً صفحه‌ی مطلب با جدول و کد.
- منوی کشویی موبایل از سمت راست باز می‌شود و پشت‌زمینه‌اش کل صفحه را می‌پوشاند.
- فلش‌های صفحه‌بندی و اسلایدر به سمت درست اشاره می‌کنند.
- فیلدهای ایمیل، آدرس و کد، چپ‌چین هستند.
- جدول‌های عددی تراز ستونی دارند.
- ایمیل‌های خروجی سایت هم راست‌به‌چپ‌اند — این یکی همیشه فراموش می‌شود.
جمع‌بندی
راست‌به‌چپ‌سازی خوب یعنی کاربر اصلاً متوجه نشود که قالب در اصل برای جهت دیگری طراحی شده بود. اگر از ابتدا با ویژگی‌های منطقی بنویسید، فقط هفت مورد بالا باقی می‌ماند — و هر هفت‌تا در نیم روز حل می‌شوند.