يُعامل تصميم الواجهات العربية كخانة اختيار: اضبط dir="rtl" وأطلق. وما يصل واجهة إنجليزية معكوسة يجدها القارئ العربي خاطئة بشكل خفي لا يستطيع غالبًا التعبير عنه — هو ببساطة يفضّل النسخة الإنجليزية.

هذه المشكلات السبع الأكثر تكرارًا لدينا، مرتبة تقريبًا حسب حجم الضرر.

١. خصائص CSS الفيزيائية بدل المنطقية

هذا أشيع خطأ على الإطلاق ويسبب عطلاً مرئيًا.

قاعدة مثل margin-left: 20px تبقى يسارًا في وضع RTL حيث ينبغي أن تنتقل يمينًا. والأسوأ أن left: 50% مقترنة بـtransform: translateX(-50%) — حيلة التوسيط القياسية — تدفع المحتوى خارج الشاشة تمامًا عند انعكاس التخطيط.

الإصلاح: استخدم الخصائص المنطقية: margin-inline-start وpadding-inline-end وinset-inline-start وborder-inline-start. فهي تُترجم إلى الجهة الفيزيائية الصحيحة تلقائيًا.

الاستثناء الجدير بالمعرفة: عند التوسيط بـtranslateX(-50%)، أبقِ left: 50% الفيزيائية. فالتحويل غير مدرك للاتجاه، واقترانه بخاصية منطقية يعكس الإزاحة ويكسر وضع RTL وحده.

٢. ارتفاع سطر مضبوط للحروف اللاتينية

للحروف العربية امتدادات علوية أطول وسفلية أعمق من اللاتينية. وline-height: 1.1 التي تبدو ضيقة وعصرية بالإنجليزية تجعل الأسطر العربية المتراصة تتصادم.

الإصلاح: ارفع ارتفاع السطر إلى نحو ١.٤–١.٦ للعناوين العربية و١.٨ للنص. واضبطه داخل كتلة [dir="rtl"] لتحتفظ النسخة الإنجليزية بضبطها الأضيق.

٣. تطبيق تباعد الأحرف على العربية

العربية خط متصل. وتطبيق letter-spacing يفكك أشكال الحروف المتصلة وينتج نصًا يبدو معطوبًا للقارئ العربي.

الإصلاح: [dir="rtl"] { letter-spacing: 0; }. ولا تطبّق التباعد على العربية أبدًا.

٤. عكس أشياء لا ينبغي عكسها

الأيقونات الاتجاهية — أسهم الرجوع وعلامات التالي ومؤشرات التقدم — ينبغي أن تنعكس. أما الشعارات وواجهات الساعات وأزرار تشغيل الوسائط وعلامات الصح فلا. والعكس الشامل للواجهة ينتج زر تشغيل يشير في الاتجاه الخاطئ.

الإصلاح: اعكس حسب المقصد. أضف صنفًا مساعدًا مثل .icon-flip وطبّقه على الأيقونات التي تعبّر عن اتجاه فعلاً فقط.

٥. الأرقام والنص مختلط الاتجاه

أرقام الهواتف والأسعار والتواريخ وأسماء العلامات اللاتينية داخل جمل عربية نص ثنائي الاتجاه، وتعيد المتصفحات ترتيبه أحيانًا بشكل غير متوقع — فقد يظهر رقم هاتف ورمز دولته في الطرف الخاطئ.

الإصلاح: غلّف المقطع المختلط بعنصر يحمل dir="ltr". ولأرقام الهواتف تحديدًا هذا ضروري ويكلّف خاصية واحدة.

٦. استخدام خط لاتيني للعربية

كثير من خطوط الويب لا تغطي العربية، فيستبدل المتصفح خطًا احتياطيًا بصمت. والنتيجة عربية بخط مختلف تمامًا عن بقية التصميم.

الإصلاح: اختر خط ويب عربيًا حقيقيًا — القاهرة وتجوال وIBM Plex Sans Arabic وNoto Sans Arabic كلها متينة — واضبط مجموعة خطوط صريحة لوضع RTL. ثم انظر فعلاً إلى صفحة نص عربي قبل الإطلاق.

٧. حقول النماذج والتحقق

محاذاة النص الإرشادي وموضع رسالة الخطأ وعلامات الحقول المطلوبة واتجاه الإدخال كلها تحتاج انتباهًا. والإخفاق الشائع حقل بريد إلكتروني أو رابط ينبغي أن يبقى من اليسار لليمين لكنه داخل نموذج عربي فيظهر معكوسًا.

الإصلاح: اضبط dir="ltr" على الحقول التي تحمل بيانات لاتينية بطبيعتها — البريد والروابط والهواتف — مع إبقاء تسمياتها من اليمين لليسار.

أسرع طريقة لاكتشاف هذه المشكلات أن تفتح صفحاتك العربية وتقرأها كمستخدم، لا كمطوّر يتأكد أن لا شيء يعطي خطأ 500. فمعظم هذه العيوب واضحة بالنظر وغير مرئية في مجموعة اختبارات.

قائمة تدقيق سريعة

  • هل تتمرّر أي صفحة أفقيًا في وضع RTL؟ إن حدث فثمة شيء يفيض.
  • هل تتصادم العناوين العربية المتراصة؟
  • هل تظهر أرقام الهواتف ورمز الدولة أولاً؟
  • هل الخط العربي هو الذي اخترته أم خط احتياطي؟
  • هل تشير أسهم الرجوع والتقدم في الاتجاه الصحيح؟
  • هل تُفتح قائمة الجوال من الحافة الصحيحة؟

ست فحوص، عشر دقائق، وتلتقط غالبية مشكلات تصميم الواجهات العربية قبل أن يلتقطها المستخدم.