راستبهچپسازی قالب دیتالایف: هفت تلهای که کار را خراب میکند
قرار دادن direction: rtl روی body جهت متن را تغییر میدهد، اما یک قالب کامل از متن ساده تشکیل نشده است. فاصلههای وابسته به چپ و راست، ترتیب Flexbox، فلشها، ورودیهای عددی و کدهای داخل مقاله هرکدام رفتار مستقل دارند. راستبهچپسازی حرفهای یعنی این اجزا را بدون شکستن نسخه موبایل یا محتوای لاتین هماهنگ کنیم.
قبل از تغییر CSS، ساختار قالب را بشناسید
مشخص کنید هدر، کارت مطلب، صفحه کامل، فرم دیدگاه و پروفایل در کدام فایل TPL ساخته میشوند. تغییر سراسری روی یک selector عمومی ممکن است چند صفحه غیرمرتبط را خراب کند. راهنمای ساختار قالب دیتالایف و فایلهای TPL نقشه این فایلها و محدوده رندر هرکدام را توضیح میدهد.
تله اول: فاصلههای ثابت left و right
ویژگیهایی مانند margin-left و padding-right فقط برای یک جهت نوشته شدهاند. در کد جدید از ویژگیهای منطقی استفاده کنید:
.card-icon {
margin-inline-end: 12px;
}
.sidebar {
border-inline-start: 1px solid var(--line);
}
.badge {
inset-inline-end: 10px;
}مزیت این روش آن است که همان CSS در RTL و LTR معنا دارد و برای هر ویژگی به override جدا نیاز نیست.
تله دوم: معکوس کردن بیدلیل Flexbox
در محیط RTL، ترتیب بصری بسیاری از flexها خودبهخود با جهت متن هماهنگ میشود. افزودن row-reverse بدون بررسی میتواند ترتیب را دوباره برگرداند. ابتدا با display:flex معمولی آزمایش کنید و فقط زمانی reverse به کار ببرید که ترتیب معنایی DOM با خروجی موردنیاز متفاوت باشد.
ترتیب DOM باید برای صفحهخوان و حرکت با Tab منطقی بماند. چیدمان بصری نباید مسیر فوکوس را گیجکننده کند.
تله سوم: آیکنهایی که جهت دارند
آیکن جستجو یا کاربر جهت خاصی ندارد، اما فلش بعدی، قبلی، بازگشت و breadcrumb باید با جهت رابط هماهنگ باشد. همه SVGها را با transform برنگردانید؛ این کار علامت پخش، تیک و آیکنهای نامتقارن دیگر را نیز وارونه میکند.
برای آیکنهای جهتدار کلاس مشخص بسازید و فقط همانها را در RTL بچرخانید. اگر کتابخانه آیکن نسخه left و right جدا دارد، انتخاب آیکن درست خواناتر از transform عمومی است.
تله چهارم: مخلوط شدن عدد، کد و متن لاتین
نسخه، قیمت، شماره تلفن، URL و قطعه کد در متن فارسی ممکن است ترتیب عجیبی پیدا کنند. برای بلوک کد و URL از direction:ltr و unicode-bidi:isolate استفاده کنید. واحد پول و عدد را در یک wrapper نگه دارید تا در دو سوی خط جدا نشوند.
.code,
.url,
.version {
direction: ltr;
unicode-bidi: isolate;
}تله پنجم: فرمهایی که فقط ظاهراً RTL شدهاند
برچسب باید بالای ورودی و متن راهنما زیر آن باشد. فیلد نام و توضیح میتواند RTL باشد، اما ایمیل، URL، کد لایسنس و شماره نسخه معمولاً LTR هستند. جهت را بر اساس نوع داده تنظیم کنید، نه بر اساس جهت کل صفحه.
محل آیکن، دکمه پاک کردن ورودی و پیام خطا را نیز بررسی کنید. placeholder نباید جای برچسب را بگیرد و حلقه focus باید در هر دو جهت دیده شود.
تله ششم: جدول، اسلایدر و کتابخانههای جانبی
کتابخانههای جدول و اسلایدر ممکن است گزینه RTL مستقل داشته باشند. تغییر CSS به تنهایی منطق دکمه بعدی و محاسبه موقعیت اسلاید را اصلاح نمیکند. مستندات همان کتابخانه را بخوانید و حالت RTL آن را فعال کنید. سپس حرکت با لمس، صفحهکلید و دکمهها را جداگانه آزمایش نمایید.
تله هفتم: اصلاح دسکتاپ و فراموش کردن موبایل
منوی بازشونده، کشوی فیلتر، سبد خرید و پنجره گفتگو در موبایل معمولاً از یک سمت وارد میشوند. پس از RTL باید نقطه شروع انیمیشن، محل دکمه بستن و فضای امن لبه صفحه بررسی شود. تغییر جهت نباید باعث overflow افقی یا خارج شدن کنترل از صفحه شود.
ویرایشگر و محتوای مقاله
متن فارسی باید RTL باشد، ولی بلوک کد، جدول فنی و قطعه HTML به جهت مستقل نیاز دارند. استایل محتوا را بر اساس عنصر تعریف کنید. برای مثال pre و code را LTR نگه دارید و اسکرول افقی را فقط داخل همان بلوک فعال نمایید.
چکلیست آزمون RTL
- عنوان بسیار بلند و متن ترکیبی فارسی و لاتین را آزمایش کنید.
- کارت بدون تصویر و کارت دارای نشان گوشه را ببینید.
- فرمها را با Tab و صفحهخوان مرور کنید.
- breadcrumb، صفحهبندی و دکمههای قبلی و بعدی را کنترل نمایید.
- منوی موبایل، modal و اسلایدر را با لمس آزمایش کنید.
- وجود overflow افقی را در عرضهای مختلف بررسی نمایید.
پس از اصلاح چیدمان، عملکرد تصویر و فونت را نیز بسنجید. راهنمای Core Web Vitals قالب دیتالایف کمک میکند تغییرهای RTL باعث جهش چیدمان یا تأخیر رندر نشوند.
جمعبندی
RTL خوب نتیجه overrideهای فراوان نیست. استفاده از ویژگیهای منطقی CSS، ایزوله کردن محتوای LTR و آزمون مؤلفههای تعاملی کد را سادهتر و پایدارتر میکند. ابتدا جهت معنایی DOM را درست نگه دارید و سپس ظاهر را با ابزارهای استاندارد CSS هماهنگ کنید.