تطبيق عربي من اليمين لليسار: تفاصيل RTL اللي تفضح التطبيقات المترجمة

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

القاعدة الأولى: الاتجاه يُبنى، مو يُعكس في الآخر

الخطأ الأشهر إن التطبيق ينبني بالإنجليزي، وبعدين أحد يقول «خلّوه عربي». في Flutter الأساس سهل: تفعيل flutter_localizations وتحديد اللغة العربية، فتنقلب الواجهة تلقائياً. لكن التلقائي يشتغل بس لو الكود مكتوب صح من البداية: استخدام EdgeInsetsDirectional بدل EdgeInsets، و AlignmentDirectional بدل Alignment، و start و end بدل left و right. أي مكان كُتب فيه «يسار» صراحةً بيبقى يسار حتى في العربي.

وش ينعكس ووش ما ينعكس

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

الخط: نصف الإحساس العربي

الخطوط الافتراضية في الجوال تعرض العربي، لكنها ما تعطيه شخصية. اختر خطاً عربياً مصمماً للشاشات مثل IBM Plex Sans Arabic أو Tajawal أو Cairo، وانتبه لنقطتين: الخط العربي يحتاج ارتفاع سطر أكبر من الإنجليزي لأن فيه نقاطاً وحركات فوق وتحت، وحجم ١٤ في العربي يبان أصغر من ١٤ في الإنجليزي. لو نسخت نفس المقاسات من تصميم إنجليزي، بيطلع النص مضغوطاً ومتعباً للعين.

الأرقام والنصوص المختلطة

• قرّر من البداية: أرقام عربية (123) أو هندية (١٢٣)، وطبّقها بشكل موحّد في كل التطبيق.
• حقول الجوال والبطاقة والآيبان تبقى من اليسار لليمين حتى داخل واجهة عربية.
• جملة فيها كلمة إنجليزية أو رقم طلب مثل «طلبك رقم A-2041 جاهز» تحتاج اختباراً، لأن ترتيب العلامات حولها ينخرب بسهولة.
• العملة: «٥٠ ريال» أو «50 ر.س» — اختر صيغة وحدة ولا تخلطها بين الشاشات.
• التواريخ: هل جمهورك يحتاج الهجري بجانب الميلادي؟ سؤال بسيط يفرق في تطبيقات الخدمات الحكومية والتعليمية.

النصوص نفسها: لا تترجم، اكتب

«تم بنجاح» و«حدث خطأ غير متوقع» جمل ميتة. المستخدم يبي يعرف وش صار ووش يسوي الحين. بدل «فشل الاتصال بالخادم» اكتب «ما قدرنا نوصل للإنترنت، جرّب مرة ثانية». وانتبه لمخاطبة المذكر والمؤنث: إما صيغة محايدة، أو خيار في الإعدادات إذا جمهورك يهمه هذا.

اختبار RTL في عشر دقائق

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

التصميم يبدأ عربياً في Figma، مو في الكود

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

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