نظام تصميم عربي: كيف تبني مكتبة مكوّنات تعمل من اليمين لليسار
أغلب أنظمة التصميم التي تستخدمها الفرق اليوم — من مكتبات المكوّنات المفتوحة إلى أطر العمل التجارية — بُنيت في الأصل للإنجليزية. تحويلها إلى العربية يبدو مسألة قلب اتجاه، ثم تبدأ التفاصيل بالظهور: أيقونة تشير إلى الجهة الخاطئة، ظلّ يسقط عكس الضوء، رقم هاتف يُقرأ مقلوبًا. النتيجة موقع «معرَّب» لا موقع عربي.
الخصائص المنطقية بدل الاتجاهات الثابتة
الخطوة الأولى تقنية بحتة وأثرها يمتدّ إلى كل مكوّن: استبدال الخصائص المرتبطة بجهة ثابتة بخصائص منطقية. margin-left تصبح margin-inline-start، وpadding-right تصبح padding-inline-end، وtext-align: left تصبح text-align: start. الفارق أن الخاصية المنطقية تتبع اتجاه المستند، فتعمل في الاتجاهين دون نسختين من التنسيق.
هذا يحلّ الجزء الأكبر تلقائيًا، لكنه لا يحلّ كل شيء. هناك عناصر يجب أن تنعكس وأخرى يجب ألّا تنعكس، والتمييز بينها قرار تصميمي لا قرار تقني.
ما الذي ينعكس
- ترتيب العناصر داخل الصفوف: الشعار، القائمة، أزرار الإجراء.
- الأسهم التي تعني «التالي» و«السابق» — لأنها تشير إلى اتجاه القراءة.
- أشرطة التقدّم ومؤشرات الخطوات.
- محاذاة النصوص والعناوين.
ما الذي لا ينعكس
- الأرقام: ٩٦٦٥٣ تبقى بترتيبها، وأرقام الهواتف وأرقام الحسابات تحتاج
dir="ltr"صريحة. - الشعارات وعلامات المنتجات: شعار مقلوب ليس شعارًا معرَّبًا.
- أيقونات لها معنى مادي ثابت: أيقونة التشغيل، الساعة، الخريطة.
- مقاطع الشيفرة البرمجية، وهي دائمًا من اليسار لليمين.
النص المختلط: أصعب مما يبدو
أكثر ما يكسر الواجهات العربية هو الجملة التي تحتوي عربية وإنجليزية وأرقامًا معًا: «حمّل التطبيق من App Store بإصدار 17.4 أو أحدث». خوارزمية الاتجاه الثنائي في المتصفح تتعامل مع هذا تلقائيًا في الحالات البسيطة، وتخطئ في الحالات التي تنتهي فيها الجملة بكلمة إنجليزية أو علامة ترقيم. علامة الاستفهام تقفز إلى الطرف الخطأ، والنقطة تسبق الجملة بدل أن تتبعها.
العلاج ليس ترك الأمر للمتصفح: أحِط المقاطع الأجنبية بـ<span dir="ltr">، واستخدم unicode-bidi: isolate حيث يُدرَج محتوى من قاعدة البيانات داخل نصّ ثابت. أي حقل يكتبه المستخدم — اسم، عنوان، رسالة — يجب أن يُعامَل كمقطع معزول، لأنك لا تعرف بأي لغة سيكتبه.
الرموز المميّزة (Design Tokens) تحمل الاتجاه أيضًا
إن كان نظامك يعتمد رموزًا للمسافات والألوان وأحجام الخط، فالرمز هو المكان الصحيح لحمل قرارات الاتجاه. رمز مثل --space-inline-start يجعل كل مكوّن يستخدمه متّسقًا دون أن يعرف كل مصمّم القاعدة عن ظهر قلب. والأهم أن تغيير القاعدة لاحقًا يتم في مكان واحد.
الخطوط تستحق رمزًا خاصًّا بها. الخط العربي يحتاج ارتفاع سطر أكبر من نظيره اللاتيني عند الحجم نفسه، لأن الحروف العربية تمتدّ فوق السطر وتحته. نسخ قيمة line-height من نظام إنجليزي ينتج نصًّا يبدو مضغوطًا وإن كان مقروءًا تقنيًا.
الاختبار: ما الذي يُفحَص قبل التسليم
قائمة فحص قصيرة تلتقط أغلب الأخطاء قبل أن يراها العميل:
- افتح كل صفحة بمحتوى أطول بمرّة ونصف من المحتوى التجريبي. العربية أطول من الإنجليزية في أغلب الترجمات، والتصميم المبني على نصّ قصير ينكسر.
- افحص كل حقل إدخال بقيمة إنجليزية وقيمة عربية وقيمة مختلطة.
- افحص الصفحة بعرض ٣٢٠ بكسل: القوائم الأفقية التي تعمل بالإنجليزية قد لا تتّسع بالعربية.
- شغّل قارئ شاشة على صفحة واحدة على الأقل، وتأكّد أن ترتيب القراءة يطابق الترتيب البصري.
متى تبني نظامًا وليس مجرّد صفحات
النظام يستحق التكلفة حين يتعدّد من يبني الواجهات، أو حين يمتدّ المنتج عبر موقع وتطبيق ولوحة تحكم. أمّا موقع تعريفي من ثماني صفحات يبنيه شخص واحد، فالنظام الكامل فيه تكلفة بلا عائد — تكفيه مجموعة رموز متّفق عليها وملف تنسيق منظّم.
هذا التمييز جزء من طريقة عملنا في تصميم الويب: نحدّد حجم البنية المطلوبة من حجم المشروع الفعلي، لا من حجم أكبر مشروع نفّذناه.
