قواعد تخطيط RTL

العربية تقلب الـ layout عبر `dir="rtl"` على العنصر الجذر. لا CSS خاص بـ RTL لكل صفحة — نظام التصميم يستخدم الخصائص المنطقية (`padding-inline-*`، `border-inline-start`، `inset-inline-*`) فينعكس الـ layout تلقائياً.

كيف يُطبَّق RTL

سمة الجذر

كل قالب صفحة يربط `[attr.dir]="locale() === 'ar' ? 'rtl' : 'ltr'"` على الـ wrapper الخارجي. المتصفّح يقلب اتجاه الكتل، اتجاه النصّ، والخصائص المنطقية.

خصائص CSS المنطقية

استخدم `padding-inline-start/end`، `margin-inline`، `border-inline-start/end`، `inset-inline-*`. تجنّب `left`، `right`، `padding-left`، `padding-right`، `border-left`، `border-right`.

أدوات Tailwind المنطقية

Tailwind v4 يأتي بـ `ps-*` / `pe-*` / `ms-*` / `me-*` / `start-*` / `end-*` / `border-s` / `border-e`. استخدمها بدل `pl-*` / `pr-*` / `left-*` / `right-*`.

قاعدة عكس الأيقونات

الأيقونات الاتجاهية (chevrons، الأسهم، رجوع/تقدّم) يجب أن تنعكس في RTL. أضف فئة `.icon-flip` على الـ SVG — الحارس العام يطبّق `transform: scaleX(-1)` حين `[dir="rtl"]`. الأيقونات غير الاتجاهية (بحث، تقويم، مستخدم) لا تأخذ فئة الانعكاس.

قواعد الانعكاس حسب نوع العنصر