تصميم الواجهات العربية كما ينبغي: قائمة تحقق عملية للاتجاه من اليمين إلى اليسارتصميم الواجهات العربية كما ينبغي: قائمة تحقق عملية للاتجاه من اليمين إلى اليسار

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

هذه القائمة هي ما يعتمده المصممون والمهندسون لدينا عند مراجعة أي منتج عربي أو ثنائي اللغة، وتنطبق على المواقع وتطبيقات الويب وتطبيقات الجوال على حد سواء.

1. الأساس: الاتجاه خاصية بنيوية لا طبقة تجميلية

• اضبط الخاصيتين dir وlang على العنصر الجذري، وغيّرهما مع تغيّر اللغة؛ فقارئات الشاشة واختيار الخطوط يعتمدان على lang.
• استخدم خصائص CSS المنطقية في كل مكان: margin-inline-start وpadding-inline-end وinset-inline-start وtext-align: start. وليكن استخدام left وright نادرًا ومقصودًا.
• اترك المهمة لـ flexbox وgrid؛ فهما يتبعان اتجاه الكتابة تلقائيًا. وتجنب التموضع المطلق المرتبط باليسار أو اليمين.
• في أطر تطبيقات الجوال، استخدم مفاهيم البداية والنهاية (مثل EdgeInsetsDirectional في Flutter) بدل اليمين واليسار.

2. العكس: ما الذي ينقلب وما الذي يبقى؟

اعكس هذه العناصر

• اتجاه التنقل، وأسهم الرجوع والتقدم، والأسهم المائلة (chevrons)، ومسارات التنقل (breadcrumbs)، ومؤشرات الخطوات.
• القوائم الجانبية، والشرائح المتحركة، وأشرطة التقدم، وأزرار التنقل بين الصفحات.
• الأيقونات التي توحي باتجاه، مثل سهم الرد أو «التالي» أو قائمة بمسافة بادئة.
• ترتيب أعمدة الجداول، بحيث يكون عمود المعرّف الرئيسي في جهة بداية القراءة.

لا تعكس هذه العناصر

• أزرار تشغيل الوسائط، فهي تتبع عُرفًا راسخًا لا اتجاه القراءة.
• الساعات والشعارات وعلامات الصح والأيقونات التي تمثل أشياء مادية.
• أرقام الجوال والرموز والروابط وعناوين البريد والتعابير الرياضية، فهي تبقى من اليسار إلى اليمين.
• الرسوم البيانية: قرّر عن وعي هل يسير محور الزمن من اليمين إلى اليسار، ووثّق القرار، وطبّقه باتساق في المنتج كله.

3. النص ثنائي الاتجاه: حيث تختبئ معظم الأخطاء

المحتوى العربي الحقيقي مليء بمقاطع لاتينية: أسماء منتجات، وأرقام طرازات، وعناوين بريد، وروابط، ومبالغ مع رموز العملات. تتولى خوارزمية Unicode للنص ثنائي الاتجاه جزءًا كبيرًا من ذلك، لكن علامات الترقيم والأرقام على أطراف المقاطع المختلطة كثيرًا ما تستقر في غير موضعها.

• غلّف المحتوى الذي يكتبه المستخدم أو المحتوى المختلط بعنصر bdi، أو استخدم dir="auto"، ليتحدد اتجاهه من محتواه.
• اجعل حقول البريد والروابط والجوال والآيبان والرموز باتجاه dir="ltr" حتى داخل واجهة عربية، مع إبقاء تسمياتها في جهة اليمين.
• انتبه لعلامات الترقيم في نهاية الجمل التي تنتهي بكلمة لاتينية، واعزل المقطع اللاتيني بدل الترقيع بالمسافات.
• لا تبنِ الجمل بتجميع أجزاء مترجمة؛ فترتيب الكلمات يختلف بين اللغتين. استخدم قوالب رسائل كاملة بمتغيرات.

4. الطباعة العربية

• اختر خطًا مصممًا للعربية أصلًا، وله رفيق لاتيني متناسق، بدل الاعتماد على الخط الاحتياطي للنظام.
• تبدو الحروف العربية أصغر بصريًا عند الحجم نفسه، وصواعدها ونوازلها أطول؛ لذا خطط لحجم أكبر قليلًا وتباعد أسطر أرحب في النصوص العربية.
• لا تطبّق تباعد الحروف (letter-spacing) على العربية أبدًا؛ فهو يقطع اتصال الحروف.
• لا يوجد في العربية خط مائل ولا حروف كبيرة؛ استخدم الوزن أو اللون أو الحجم للتأكيد.
• صمّم لاختلاف أطوال النصوص: قد تكون العبارة العربية أقصر من الإنجليزية أو أطول، وينبغي أن تلتف العناوين بسلاسة بدل أن يُقتطع معناها.

5. الأرقام والتواريخ والتقاويم

• قرّر هل يستخدم المنتج الأرقام الغربية أم المشرقية، وطبّق القرار باتساق في الواجهة والمستندات والإشعارات.
• ادعم التاريخين الهجري (أم القرى) والميلادي حيث تتطلب طبيعة العمل ذلك، وبيّن أيهما المعروض.
• كن صريحًا في إعدادات التنسيق: في واجهة Intl بلغة JavaScript قد تعتمد اللغة ar-SA التقويم الهجري أو الأرقام المشرقية افتراضيًا بحسب البيئة، فحدّد امتدادات التقويم ونظام الترقيم بوضوح (مثل ar-SA-u-ca-gregory-nu-latn).
• نسّق العملة وأرقام الجوال وحقول العنوان الوطني وفق الأعراف المحلية.

6. النماذج والبحث والترتيب

• ضع تسميات الحقول والنصوص المساعدة ورسائل التحقق في جهة بداية القراءة، وتأكد أن الأيقونات داخل الحقول تنتقل مع الاتجاه.
• وحّد مدخلات البحث العربية، من صور الألف والتاء المربوطة إلى التشكيل، ليجد المستخدم ما يقصده لا ما كتبه حرفيًا فقط.
• رتّب القوائم العربية بأداة مقارنة تراعي اللغة (Intl.Collator بلغة عربية) بدل الترتيب الخام بحسب رموز الحروف.
• اقبل الإدخال بنظامي الأرقام، ووحّده قبل التحقق.

7. اختبر كما يستخدم المستخدم العربي

1. راجع الشاشات بمحتوى عربي حقيقي، بما في ذلك الأسماء الطويلة والنصوص المختلطة، لا بنصوص تجريبية.
2. شغّل اختبارات المقارنة البصرية للاتجاهين، حتى لا يكسر تعديل في النسخة الإنجليزية النسخةَ العربية دون أن يلاحظ أحد.
3. اختبر مع VoiceOver وTalkBack باللغة العربية للتأكد من ترتيب القراءة والتسميات.
4. افحص كل ما ينتجه المنتج خارج الشاشة: ملفات PDF، والفواتير، والبريد الإلكتروني، والرسائل النصية، والإشعارات.
5. اطلب من مستخدمين عرب إنجاز المهام الرئيسية، ولاحظ أين يترددون.

العربية ليست طبقة ترجمة تُضاف في النهاية، بل قيد تصميمي أساسي منذ أول مخطط للواجهة.

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