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

لا شيء من هذا صعب الإصلاح، وأغلبه سهل المنع إن عرفت من أين يأتي. وهذه اثنا عشر خطأً نراها في الواجهات من اليمين إلى اليسار (RTL)، ومع كل خطأ حله.

1. تثبيت اليمين واليسار في الكود

أشيع الأخطاء. margin-left وpadding-right وfloat: left وtext-align: left وleft: 0 كلها تقول «هذه الحافة» وأنت تقصد «البداية». وفي RTL تقع البداية على اليمين.

استخدم الخصائص المنطقية (logical properties) التي تتبع اتجاه الكتابة:

/* before */
.card { margin-left: 16px; padding-right: 24px; text-align: left; }

/* after */
.card { margin-inline-start: 16px; padding-inline-end: 24px; text-align: start; }

وكذلك inset-inline-start وborder-inline-end وزوايا الاستدارة border-start-start-radius. وفي Tailwind استخدم ms-4 وps-6 وstart-0 وtext-start بدل أصناف اليمين واليسار. وراجع دليل MDN للخصائص المنطقية للقائمة الكاملة.

ويتبع Flexbox وGrid الاتجاه أصلًا: flex-direction: row يرتّب من اليمين في RTL، فلا تعكسه بيدك.

2. ضبط الاتجاه في المكان الخطأ

مكان الاتجاه الصفحة، مرة واحدة: <html lang="ar" dir="rtl">. وضبطه على المكونات منفردة ينتج شاشة نصفها في اتجاه ونصفها في الآخر. وlang لا يقل أهمية عن dir: فهو يختار الخط البديل الصحيح وقواعد تقسيم الكلمات، ويخبر قارئات الشاشة بأي صوت تقرأ.

3. عكس كل شيء، أو عدم عكس شيء

بعض الأشياء يجب أن ينقلب وبعضها لا.

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

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

4. نص يخلط الاتجاهين

مرجع طلب مثل «طلب #1234»، أو علامة مثل «iPhone 15 Pro»، أو بريد إلكتروني أو رابط داخل جملة عربية، هو خليط من اتجاهين، وقد تقفز علامات الترقيم حوله إلى الجهة الخطأ.

  • لُفّ النص المختلط أو الذي يكتبه المستخدمون في <bdi>، أو أعطِ العنصر dir="auto"، ليُحكم على كل جزء بنفسه.
  • أعطِ البريد والروابط وأرقام الهواتف والأكواد dir="ltr".
  • وللنص الحر من المستخدمين يتيح unicode-bidi: plaintext أن يأخذ كل سطر اتجاه أول حرف قوي فيه.

ويشرح مقال W3C عن الترميز الثنائي الاتجاه داخل السطر السبب بالتفصيل.

5. نوعان من الأرقام

يمكن للنص العربي أن يستخدم الأرقام الغربية (0 1 2 3) أو الأرقام الهندية الشرقية (٠ ١ ٢ ٣). وكلاهما صحيح، وما يتوقعه جمهورك يعتمد على البلد والمنتج. والخطأ أن تُخلط في شاشة واحدة، أو عن غير قصد عبر كود التنسيق.

في JavaScript يُنتج ar-EG الأرقام الهندية افتراضيًا. وإن أردت اللاتينية فاطلبها:

new Intl.NumberFormat('ar-EG').format(1234.5);            // Arabic-Indic digits
new Intl.NumberFormat('ar-EG-u-nu-latn').format(1234.5);  // Latin digits

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

6. الخطوط والحجم وارتفاع السطر

الخط اللاتيني وحده لا يحوي حروفًا عربية، فيعود المتصفح إلى ما في النظام وتختلف الأوزان. اختر خطًّا عربيًّا يجاور اللاتيني جيدًا (Cairo وIBM Plex Sans Arabic وNoto Sans Arabic وTajawal خيارات شائعة)، وحمّل الاثنين.

والعربية تحتاج مساحة أكبر. تُقرأ غالبًا أفضل بارتفاع سطر نحو 1.6 إلى 1.8، وأحيانًا بحجم أكبر قليلًا من الحجم اللاتيني بجانبها. ولا تُطبّق letter-spacing ولا text-transform: uppercase على العربية أبدًا. فحروف العربية تتصل، وتباعدها يكسر الكلمات.

7. تخطيطات تفترض أطوال الإنجليزية

قد تكون التسمية العربية أقصر من نظيرتها الإنجليزية أو أطول بالثلث أو أكثر، ويجب أن يتسع لها حقل الاسم. تجنّب العروض الثابتة للأزرار والتبويبات وعناوين الجداول. صمّم بالنص الأطول، وجرّب الشاشة بمحتوى حقيقي وطويل لا بكلمتي «الاسم» و«حفظ».

8. نماذج تقاتل المستخدم

  • تُحاذى التسميات والحقول إلى البداية، لكن حقول البريد والرابط والهاتف وكلمة المرور والأكواد يجب أن تكون dir="ltr"، لأن محتواها لاتيني. وأبقِ النص التوضيحي محاذيًا إلى البداية.
  • استخدم inputmode وautocomplete ليظهر لوح المفاتيح الصحيح.
  • ضع رسالة الخطأ بجانب الحقل، باتجاه الصفحة.
  • لا تقسّم الأسماء إلى خانتي «الأول» و«الأخير» إلا إن احتاجها العمل فعلًا. فكثير من الأسماء العربية لا يناسب هذا الشكل.

9. التواريخ والأسابيع والتقاويم

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

10. بحث لا يجد ما كتبته

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

  • الألف بصورها: أ إ آ ا
  • الياء والألف المقصورة: ي ى
  • التاء المربوطة والهاء: ة ه
  • التشكيل الاختياري والتطويل (الكشيدة)
  • الأرقام الهندية والغربية

والبحث عن «احمد» لن يجد «أحمد» ما لم تُوحّد الصور. وحّد النص المخزّن والاستعلام معًا إلى صورة واحدة (ويمكنك الاحتفاظ بعمود بحث مستقل)، وافعل الشيء نفسه في الترتيب بمقارن يعرف العربية، مثل Intl.Collator('ar') في المتصفح. فالمقارنة الافتراضية في قاعدة البيانات كثيرًا ما لا تعدّ كل هذه الصور متساوية.

11. البريد وملفات PDF والتصدير

الواجهة جزء واحد فقط من المنتج. تحتاج رسائل البريد HTML إلى dir="rtl" على الحاوية. وتختلف مكتبات PDF: بعضها يشكّل الحروف العربية صحيحًا وبعضها يطبعها منفصلة ومعكوسة، فجرّب مولّدك بعربية حقيقية قبل الاعتماد عليه. وملف CSV فيه عربي يُحفظ بترميز UTF-8 مع علامة ترتيب البايتات (BOM) إن كان الناس سيفتحونه في Excel، وإلا تحوّل النص إلى رموز.

12. بناء الجمل من قطع

«لديك » + العدد + « عناصر» تعمل في الإنجليزية. وفي العربية يتغير ترتيب الكلمات، ويتغير شكل المعدود مع العدد: للعربية ست صيغ جمع (صفر وواحد واثنان وقليل وكثير وغيرها)، والصحيحة تتوقف على العدد. والجملة الملصقة من أجزاء لا تُترجم.

استخدم صيغة الرسائل في مكتبة الترجمة مع دعم الجمع والتذكير والتأنيث (ICU MessageFormat هو المعيار الشائع)، وأبقِ كل جملة كاملة في ملف الترجمة. وأعطِ المترجمين الرسالة كاملة ومتغيراتها، لا قطعًا.

كيف تختبر

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

قائمة مراجعة

  • خصائص منطقية في كل مكان، والاتجاه مضبوط مرة واحدة في الصفحة.
  • قائمة مقصودة بما ينقلب وما لا ينقلب.
  • النص المختلط معزول بـ bdi أو dir="auto" أو dir="ltr".
  • نظام أرقام واحد عن قصد.
  • خط عربي، وارتفاع سطر أكبر، ولا تباعد حروف.
  • تخطيطات مختبرة بنصوص طويلة.
  • حقول LTR للبريد والهاتف والأكواد.
  • تواريخ وأسابيع تعرف اللغة.
  • البحث والترتيب يوحّدان صور الحروف العربية.
  • البريد وPDF وCSV مفحوصة في RTL.
  • الجمل تُترجم كاملة مع دعم الجمع.

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