أخيرًا shadcn/ui قدّم دعم RTL أصلي (Native RTL Support) للكومبوننتس، بحيث تشتغل الواجهات من اليمين لليسار بنفس السلاسة اللي كانت موجودة في LTR، ومن غير ما المطوّر يضيّع وقت في قلب الكلاسات أو تعديل التصميم يدويًا.
الكومبوننتس دلوقتي بتتعامل بذكاء مع:
محاذاة النصوص
الاتجاهات (Direction)
المسافات والـ positioning
الأيقونات والأنيميشن
وده بيخلّي واجهات اللغات زي العربي، العبري، والفارسي تشتغل بشكل طبيعي ومحترف.
كيف shadcn/ui بيحقق دعم RTL؟
عند تثبيت الكومبوننتس، الـ CLI بيقوم تلقائيًا بتحويل الكلاسات اللي بتعتمد على الاتجاه الفيزيائي إلى Logical Properties، بحيث الكود يشتغل في LTR و RTL بدون تغيير.
أمثلة على اللي بيحصل تلقائيًا:
left-* و right-* ⟶ start-* و end-*
محاذاة النصوص والمسافات بتتظبط حسب اتجاه الصفحة
الخصائص الاتجاهية (Directional Props) بتتحول لقيم منطقية
الأيقونات المدعومة بتتقلب أوتوماتيك باستخدام rtl:rotate-180
تفعيل RTL في المشروع
علشان الكومبوننتس تتضاف بدعم RTL، لازم يكون في الإعداد ده داخل ملف components.json:
{
"rtl": true
}
بعد كده أي كومبوننت هتضيفه هيكون جاهز يشتغل في RTL و LTR.
الهجرة لمشروع موجود (Migration)
لو عندك كومبوننتس قديمة اتضافت قبل تفعيل RTL، تقدر تنقلها بسهولة باستخدام CLI:
npx shadcn@latest migrate rtl
الأمر ده:
يعدّل الكلاسات
يظبط الـ props الاتجاهية
يجهّز الكومبوننتس للاستخدام في RTL
بعض الكومبوننتس محتاجة تعديل يدوي (زي: Calendar، Pagination، Sidebar)، وده موضّح في التوثيق الرسمي.
الأيقونات (Icons)
بعض الأيقونات زي ArrowRight أو ChevronLeft محتاجة تتقلب يدويًا باستخدام:
<ArrowRightIcon className="rtl:rotate-180" />
الأنيميشن (Animations)
الـ CLI بيتعامل كمان مع الأنيميشن:
slide-in-from-right ⟶ slide-in-from-end
وده بيضمن إن القوائم المنسدلة، الـ popovers، والـ tooltips تتحرك في الاتجاه الصحيح حسب لغة الصفحة.
ملاحظة: في مشكلة مع مكتبة tw-animate-css، وحاليًا لازم تمرر dir="rtl" لبعض عناصر الـ portal زي Tooltip و Popover.
الخطوط (Fonts)
shadcn/ui بيوصي باستخدام خطوط بتدعم RTL كويس:
Noto (ممتاز للعربي)
وبيشتغل كويس جنب Inter و Geist
الخلاصة
دعم RTL الرسمي في shadcn/ui مش مجرد تحسين بسيط، ده نقلة حقيقية في تجربة تطوير الواجهات العربية.
وقت أقل، كود أنضف، وواجهة محترمة تشتغل في كل الاتجاهات بدون صداع.