بناء تطبيق ثنائي اللغة عربي وانجليزي: الاتجاه من اليمين باتقان

كثير من التطبيقات “ثنائية اللغة” هي في الحقيقة تطبيقات انجليزية: قلبت واجهتها، ومرر نصها على مترجم. والنتيجة بالعربية تبدو مكسورة: محاذاة خاطئة، وترتيب مشوش، وطباعة ركيكة.

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

1. اجعل الاتجاه منطقيا، لا يمينا ويسارا

الاساس سمة dir واحدة على المستند، وخصائص CSS منطقية في كل مكان: margin-inline-start بدل margin-left، و padding-inline، و text-align: start بدل left.

بهذا تعرض قاعدة كود واحدة صحيحا بالاتجاهين تلقائيا. اما كتابة left و right مباشرة، فتعني قلبا يدويا لكل شاشة. وهذا هو المصدر الكلاسيكي لكسر الاتجاه من اليمين.

2. النص المختلط: الجزء الذي يخطئ فيه الجميع

العربية تجري من اليمين. لكن النص العربي الحقيقي مليء بجزر تجري من اليسار: ارقام، واسماء لاتينية، وروابط، وارقام هواتف. وبلا عناية، تعيد خوارزمية الاتجاه ترتيبها، فيخرج namla.sa او رقم الطلب مشوشا.

الحلول: اعتمد على معالجة يونيكود السليمة، واضبط dir="auto" على حقول المستخدم. واعزل المقاطع اللاتينية بوسم <bdi> او خاصية unicode-bidi: isolate. هذا اكثر عيب شيوعا في الواجهات العربية.

3. الطباعة: العربية ليست لاتينية بخط اخر

استخدم خطا عربيا حقيقيا بتشكيل حروف سليم، مقترنا بتصميم لاتيني مطابق. واعط العربية ارتفاع سطر اكبر، فحروفها تحتاج المساحة. ولا تستخدم letter-spacing مع الخط العربي المتصل ابدا، فهو يكسر وصلات الحروف. وابق الواجهة خالية من التشكيل، فالعربية النظيفة غير المشكلة اوضح في الواجهات.

4. الارقام والتواريخ وصيغ الجمع

اختر بين الارقام الهندية (٠١٢) واللاتينية (012) حسب جمهورك. واعمال السعودية تفضل غالبا اللاتينية. وطبق الاختيار عبر اعدادات اللغة لا يدويا. ونسق التواريخ والعملة عبر Intl.

وتذكر ان للعربية 6 صيغ جمع مقابل 2 في الانجليزية. “3 عناصر” و”11 عنصرا” و”100 عنصر” قد تحتاج صياغات مختلفة. ولهذا يفضحك لصق النصوص دائما في النهاية. استخدم نظام توطين حقيقيا.

5. اقلب الصحيح فقط

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

6. اختبر اللغتين من اول يوم

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

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