فصل 20 از 27 درس 1 از 2

RTL و رابط فارسی

Logical Properties برای RTL

بخشی از آموزش جامع Tailwind CSS

محتوای درس Logical Properties برای RTL

Logical Properties برای RTL را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

در رابط RTL باید از Propertyهای منطقی start و end استفاده شود تا Component با تغییر جهت متن نشکند. متن فارسی RTL است اما کد، URL و فرمان Terminal باید LTR و معمولاً text-left باقی بمانند.

روش پیاده‌سازی

  1. dir سند و بخش‌های استثنا را مشخص کنید.
  2. از ms، me، ps، pe، start و end به‌جای جهت فیزیکی استفاده کنید.
  3. کد و داده فنی را در Container مستقل dir=ltr قرار دهید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
<div dir="rtl" class="flex items-center gap-3">
  <div class="size-10 rounded-full bg-slate-200"></div>
  <div class="me-auto">
    <strong class="block">احسان رشیدی</strong>
    <span class="text-sm text-slate-500">مدیر سیستم</span>
  </div>
  <button class="rounded-lg border px-3 py-2">ویرایش</button>
</div>

خروجی مورد انتظار

ردیف پروفایل سازگار با RTL.

نکات مهم و خطاهای رایج

  • ترکیب left/right با RTL باعث جابه‌جایی اشتباه Icon و Dropdown می‌شود.
  • اعمال RTL به قطعه کد ترتیب نویسه‌ها را به هم می‌ریزد.

تمرین پیشنهادی

مثال را یک بار با dir=rtl و یک بار با dir=ltr بدون تغییر کلاس‌ها تست کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS