بازگشت به بلاگ
۲ فروردین ۱۴۰۵5 دقیقه مطالعهرضا اسماعیل گل

RTL تمیز در Tailwind CSS

استفاده از ویژگی‌های منطقی به‌جای left/right و نکاتی برای آینه‌کردن درست رابط فارسی.

  • Tailwind
  • RTL
  • CSS
تصویر مقاله RTL تمیز در Tailwind CSS

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

از ویژگی‌های منطقی استفاده کنید

به‌جای وابستگی مستقیم به left و right از margin-inline، padding-inline و کلاس‌های منطقی استفاده کنید. این روش نگهداری نسخه‌های فارسی و انگلیسی را ساده‌تر می‌کند.

آیکون‌ها و جهت حرکت

فلش بازگشت، رفتن به مرحله بعد و آیکون‌های جهت‌دار باید با زبان رابط هماهنگ شوند؛ اما آیکون‌های جهانی مانند پخش و دانلود همیشه نیاز به آینه شدن ندارند.

فرم فارسی را روی موبایل آزمایش کنید

شماره تلفن، ایمیل، قیمت و متن فارسی ممکن است جهت‌های متفاوت داشته باشند. استفاده درست از dir و unicode-bidi جلوی به‌هم‌ریختگی داده‌ها را می‌گیرد.

رضا اسماعیل گل، نویسنده و طراح سایت

درباره نویسنده

رضا اسماعیل گل

طراح سایت، اپلیکیشن و سامانه‌های خدماتی با ۲۰ سال تجربه کاری. در این بلاگ تجربه‌های اجرایی پروژه‌های فارسی را به زبان کاربردی منتشر می‌کنم.

این موضوع را برای پروژه خودتان می‌خواهید؟

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

درخواست بررسی پروژه
تماس نیازسنجی پروژه