واجهات عربية من اليمين إلى اليسار: تفاصيل تصنع الفرق

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

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

عكس التخطيط كله لا النص وحده

حين يكون اتجاه الصفحة من اليمين إلى اليسار، يجب أن ينعكس التخطيط معه: القائمة الجانبية تنتقل إلى اليمين، وترتيب الأعمدة يبدأ من اليمين، وزر «التالي» يكون إلى اليسار لأن القراءة تتقدم نحو اليسار. وكذلك شريط الخطوات في النماذج الطويلة، فالخطوة الأولى في أقصى اليمين.

في الويب يبدأ ذلك بتحديد الاتجاه في محتوى الصفحة نفسه: السمة dir بالقيمة rtl على العنصر الجذر، ومعها سمة اللغة. وتوصي إرشادات اتحاد شبكة الويب العالمية بأن يُحدَّد الاتجاه في ترميز HTML لا في CSS، لأنه جزء من معنى المحتوى، فيبقى صحيحاً حتى لو لم يُحمَّل التنسيق.

ثم تأتي خصائص CSS المنطقية، التي تصف الهوامش والمواضع بالبداية والنهاية بدل اليمين واليسار. فالهامش في بداية السطر يقع على اليمين في صفحة عربية وعلى اليسار في صفحة إنجليزية، بالقاعدة نفسها. وفي تطبيقات Android المبدأ نفسه: start وend بدل left وright.

الأيقونات التي تدل على اتجاه

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

وتتيح Android عكس الأيقونات البسيطة آلياً، وتنبّه إلى أن الأيقونة المركّبة أو التي يتغير معناها بالعكس تحتاج إلى معالجة يدوية. والقاعدة نفسها تصلح لأي منصة: قرار مكتوب لكل أيقونة، لا عكس شامل لكل الصور.

النص المختلط والأرقام داخل الجملة العربية

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

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

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

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

الواجهة العربية الجيدة لا يلاحظها المستخدم، لأنه لا يتوقف فيها عند سهم مقلوب أو رقم مبعثر.

الأرقام والتواريخ: قرارات تُكتب مسبقاً

الأرقام في الواجهة العربية تحتاج إلى قرار صريح: هل تُعرض بالأرقام الغربية أم بالأرقام العربية المشرقية، وما فاصل الآلاف وما الفاصلة العشرية. وهذا ليس تفصيلاً تقنياً، بل اختيار يعتمد على جمهور النظام وعاداته في القراءة.

في JavaScript، يختار Intl.NumberFormat نظام الأرقام الافتراضي بحسب اللغة، ويسمح بتحديده صراحة. ويرتّب Intl.DateTimeFormat اليوم والشهر والسنة بحسب اللغة والمنطقة، ويسمح باختيار التقويم، الميلادي أو الهجري. لذلك نحدد هذه الخيارات في مكان واحد من النظام، ولا نتركها للإعداد الافتراضي لكل جهاز.

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

الخطوط وارتفاع السطر وطول النص

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

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

كذلك يتغير طول النص بعد الترجمة، فزر يتسع لكلمة إنجليزية قصيرة قد يضيق بمقابلها العربي. وتوصي Microsoft بعدم تثبيت العرض والارتفاع في الواجهة، وبترك العناصر تتمدد بحسب محتواها.

النماذج والجداول والتقارير

النماذج

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

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

الجداول والتقارير

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

الاختبار بمحتوى عربي حقيقي

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

ونجرّب الواجهة على شاشة الجوال الضيقة، حيث تنكسر الأسطر وتظهر المشكلات مبكراً. وفي Android يمكن فرض الاتجاه من اليمين إلى اليسار من خيارات المطوّرين، لرؤية الواجهة معكوسة قبل ترجمة نصوصها.

قائمة تحقق للواجهة العربية

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

الواجهة العربية لا تتحقق بالترجمة في نهاية المشروع، بل بقرارات تُتخذ من بدايته: الاتجاه، والنص المختلط، والأرقام، والخطوط. وكلما تأخرت هذه القرارات زادت الشاشات التي يجب أن تُراجع.

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