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

RTL و رابط فارسی

Typography فارسی و Layout ترکیبی RTL/LTR

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

محتوای درس Typography فارسی و Layout ترکیبی RTL/LTR

Typography فارسی و Layout ترکیبی RTL/LTR را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت 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
<article dir="rtl" class="space-y-4 text-right">
  <p class="leading-8">نمونه کد زیر باید چپ‌چین نمایش داده شود:</p>
  <pre dir="ltr" class="overflow-x-auto rounded-xl bg-slate-950 p-4 text-left font-mono text-sm text-slate-100">
npm install tailwindcss @tailwindcss/cli
  </pre>
</article>

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

متن فارسی RTL و قطعه کد LTR.

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

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

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

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

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