عندما بدأت بناء Lumi — نظام التصميم العربي المفتوح المصدر — واجهت سؤالاً جوهرياً: هل أبني نظام RTL فوق نظام LTR موجود؟ أم أبنيه RTL منذ السطر الأول؟ التجربة أثبتت أن الخيار الثاني هو الوحيد الذي ينجح على المدى البعيد.
المشكلة مع الـ RTL الإضافي
كثير من الفِرق تبني واجهتها بالإنجليزية أولاً، ثم تحاول إضافة دعم العربية لاحقاً. النتيجة؟ طبقة من الـ overrides فوق طبقة، و hacks بـ transform: scaleX(-1) على الأيقونات، وأخطاء بصرية تظهر في أماكن لم تتوقّعها. المستخدم العربي يستحق تجربة صُمِّمت له أصلاً، لا تجربة مترجَمة.
القاعدة الأولى: Logical Properties فقط
الخطوة الأولى والأهم: تحظر كلمتا left وright تماماً من قاموس نظام التصميم. بدلاً منهما، نستخدم الـ CSS Logical Properties:
/* ❌ لا تستخدم هذا */
.card { padding-left: 16px; margin-right: 8px; }
/* ✅ استخدم هذا بدلاً منه */
.card { padding-inline-start: 16px; margin-inline-end: 8px; }في Tailwind CSS، هذا يعني استخدام ps بدل pl، وpe بدل pr، وms بدل ml. عندما يتغيّر dir من rtl إلى ltr يعمل كل شيء تلقائياً دون سطر كود إضافي.
القاعدة الثانية: الخط يُحدّد الـ Tracking والـ Line Height
الخطوط العربية تختلف جوهرياً عن اللاتينية في كثافة الحروف وارتفاع الأسطر. خط مثل IBM Plex Sans Arabic يحتاج line-height أعلى (1.8 للـ body، 1.35 للعناوين) مقارنةً بنظيره اللاتيني. أي نظام تصميم لا يُفرد لهذا قواعده الخاصة سيبدو مضغوطاً في العربية.
القاعدة الثالثة: الأيقونات التوجيهية فقط تُعكس
ليست كل الأيقونات بحاجة للعكس في RTL. فقط الأيقونات التي تحمل اتجاهاً منطقياً (السهم، التقدّم، القراءة) تُعكس — أما الأيقونات المجرّدة كالبحث والإعدادات والقلب فلا تُعكس لأنها لا تحمل معنى اتجاهياً.
- ✅ تُعكس: أسهم التنقّل، أيقونات الرجوع، الـ breadcrumb، شريط التقدّم
- ❌ لا تُعكس: البحث، الإعدادات، الإشعارات، الـ play button، الـ logo
- ⚠️ تحقّق من السياق: أيقونات الاقتباس، التقويم، بعض أيقونات القوائم
القاعدة الرابعة: الـ Shadow تتبع المنطق البصري لا الاتجاه
الظلال في RTL لا تُعكس. الضوء يأتي من أعلى اليسار في كلا الثقافتين — هذا إدراك بصري عالمي. ما يتغيّر هو موضع العنصر، لا مصدر الضوء.
أداة العمل: اختبار التبديل السريع
في Figma، أنشئ frame واحد وأضف variable للـ direction. في Storybook، أضف toolbar يبدّل dir بنقرة. كل مكوّن جديد يجب أن يُختبر في الاتجاهين قبل دمجه في النظام. هذا الـ habit هو الفرق الحقيقي بين نظام RTL حقيقي ونظام مُصلَّح.