واجهة تطبيق عربية مقلوبة؟ أعراض أخطاء الاتجاه وأسبابها وحلولها
باختصار: معظم أخطاء الواجهة العربية في التطبيقات تعود إلى ثلاثة أسباب: إعدادات لغة لم تُفعّل كما يجب، ومسافات ومحاذاة كُتبت بـ«يسار ويمين» بدل «بداية ونهاية»، ونصوص مختلطة بين العربية والأرقام والإنجليزية لا يُحدَّد اتجاهها. الجدول أدناه يربط كل عَرَض تراه على الشاشة بسببه المرجّح وبالحل الذي تطلبه من المطور، سواء كان التطبيق مبنيًا بـ Flutter أو React Native أو Android الأصلي.
حين تفتح تطبيقك الجديد فتجد سهم الرجوع في الجهة الخطأ، أو اسم المنتج يقفز فوق السعر، لا تكتب للمطور «العربي خربان». اكتب له العَرَض بدقة، وأرفق لقطة شاشة، واذكر لغة الهاتف. هذا المقال يساعدك على تسمية المشكلة بلغة يفهمها المطور، ويختصر أيامًا من الرسائل المتبادلة.
الجدول السريع: العَرَض والسبب والحل
| ما تراه على الشاشة | السبب المرجّح | ما تطلبه من المطور |
|---|---|---|
| الواجهة كلها من اليسار لليمين رغم أن الهاتف بالعربية | العربية غير مضافة للغات المدعومة، أو دعم الاتجاه المعاكس غير مفعّل | إضافة العربية للغات المدعومة وتفعيل دعم RTL على كل منصة |
| بعض الشاشات معكوسة وبعضها لا | مسافات ومحاذاة مكتوبة بقيم «يسار/يمين» ثابتة | تحويلها إلى قيم «بداية/نهاية» |
| سهم «التالي» يشير للاتجاه الخطأ | أيقونة غير قابلة للعكس | تفعيل عكس الأيقونات الاتجاهية فقط |
| رقم الهاتف أو العنوان يظهر مقطّعًا أو مقلوب الترتيب | نص مختلط الاتجاه دون تحديد | تغليف الجزء المختلط بما يحدد اتجاهه |
| الواجهة تنعكس فقط بعد إغلاق التطبيق وفتحه | فرض الاتجاه برمجيًا وقت التشغيل | الاعتماد على لغة الجهاز بدل الفرض |
| النص العربي مقصوص من الأعلى أو الأسفل | ارتفاع سطر مضبوط على خط لاتيني | ضبط ارتفاع السطر واختيار خط عربي مناسب |
| الأزرار تتكسر إلى سطرين | عرض ثابت مصمم على نص إنجليزي قصير | عرض مرن واختبار النصوص الطويلة |
الأعراض بالتفصيل
الواجهة لا تنعكس أبدًا
في Android الأصلي، توضح وثائق المطورين أن عكس الواجهة يحتاج إضافة android:supportsRtl="true" إلى ملف البيان. وفي React Native، تشرح وثائق I18nManager أن الواجهة تكون من اليمين لليسار على أندرويد حين تكون لغة الجهاز لغة RTL ويكون هذا الإعداد مفعّلًا، وعلى iOS حين تكون العربية ضمن اللغات المعرّفة في مشروع Xcode. أما في Flutter، فتوضح الوثائق أن إضافة حزمة flutter_localizations وتحديد اللغات المدعومة يجعل مكونات Material وCupertino تعتمد الاتجاه المناسب للغة.
إذا رأيت واجهة من اليسار لليمين على هاتف عربي، فاسأل المطور أولًا: هل العربية مضافة للغات المدعومة؟ غالبًا هذا هو الحل كله.
بعض العناصر فقط في المكان الخطأ
هذا أشهر عَرَض في التطبيقات التي بُنيت بالإنجليزية أولًا. توصي وثائق Android بتحويل خصائص مثل paddingLeft وlayout_marginRight إلى paddingStart وlayout_marginEnd، حتى يحدد النظام الجهة حسب لغة المستخدم. وفي Flutter يقابل ذلك استخدام EdgeInsetsDirectional بدل EdgeInsets، وهي بحسب وثائقها مسافات تكون من اليسار في النص من اليسار لليمين ومن اليمين في النص العربي، دون أن يحتاج الكود لمعرفة الاتجاه الحالي.
القاعدة التي تطلبها من المطور: لا «يسار» ولا «يمين» في أي مكان يتعلق بالتخطيط، إلا لعنصر يجب فعلًا ألا يتغير.
الأيقونات: ليست كلها تُعكس
الأسهم وأيقونات الرجوع والتقدم يجب أن تنعكس. لكن أيقونة سماعة الهاتف أو الساعة أو علامة التشغيل في مشغل الفيديو لا تُعكس عادة. تذكر وثائق Android خاصية autoMirrored للرسومات البسيطة التي يكفي قلبها كصورة، وتحيل إلى إرشادات Material للتمييز بين ما يُعكس وما لا يُعكس. اطلب قائمة بالأيقونات الاتجاهية في تطبيقك وراجعها واحدة واحدة.
الأرقام والعناوين المختلطة
تشرح وثائق Android أن العربية تُكتب من اليمين لليسار، لكن الأرقام والنصوص الإنجليزية المضمنة تُكتب من اليسار لليمين، وأن الدمج دون تحديد قد ينتج نصًا مربكًا. مثالها المعروف: رقم المنزل داخل عنوان يقفز إلى غير مكانه. الحل الذي تذكره هو تغليف النص المضمن بأداة تحدد اتجاهه، مثل BidiFormatter في Android.
في تطبيق أردني يظهر هذا كثيرًا في: أرقام الهواتف التي تبدأ بـ 07، العناوين التي تجمع اسم الشارع بالعربية ورقم المبنى، وأسماء المنتجات الإنجليزية داخل جملة عربية مثل «تم إضافة iPhone إلى السلة».
الواجهة تنعكس بعد إعادة التشغيل فقط
إذا كان التطبيق يتيح تبديل اللغة من داخله، فقد يلجأ المطور إلى فرض الاتجاه. تنبه وثائق React Native إلى أن forceRTL مخصص للتطوير والاختبار، وأن تغييره لا يسري إلا بعد إعادة تشغيل التطبيق، وتنصح بتجنبه في النسخ المنشورة لأنه يسيء لتجربة المستخدم. اسأل: هل نحتاج فعلًا زر تبديل لغة داخل التطبيق، أم يكفي اتباع لغة الهاتف؟
الخطوط والنصوص الطويلة
مشكلات الخط لا يحلها إعداد واحد. الخط العربي يحتاج ارتفاع سطر أكبر من اللاتيني بسبب النقاط والحركات وحروف مثل اللام والكاف، فإذا ضُبط الارتفاع على تصميم إنجليزي ظهر القص. والنص العربي قد يكون أطول أو أقصر من مقابله الإنجليزي، فالأزرار ذات العرض الثابت تتكسر.
ما يساعد عمليًا:
- اختيار خط عربي مصمم للشاشات ومجرّب على أحجام صغيرة، لا خط زخرفي من الشعار.
- اختبار كل شاشة بأطول نص محتمل: اسم منتج طويل، اسم حي في إربد أو الزرقاء، رسالة خطأ كاملة.
- ترك الأزرار تتمدد مع النص بدل حشره.
كيف تختبر بسرعة قبل أن تشتكي
توضح وثائق Android إمكانية تفعيل خيار «فرض اتجاه التخطيط من اليمين لليسار» من خيارات المطور في الجهاز، فترى الواجهة معكوسة حتى بلغة إنجليزية. هذه طريقة سريعة لاكتشاف العناصر التي كُتبت بقيم ثابتة. والأهم بعدها أن يجرّب التطبيقَ أشخاصٌ يقرؤون العربية يوميًا، كما توصي الوثائق نفسها، فهم يلاحظون ما لا تلاحظه أداة.
الأسئلة الشائعة
هل يمكن إصلاح الاتجاه بعد إطلاق التطبيق؟
نعم، لكنه أصعب كلما كبر التطبيق، لأن كل شاشة تحتاج مراجعة. الأفضل أن يُكتب التخطيط بقيم «بداية ونهاية» من أول يوم حتى لو بدأ التطبيق بالإنجليزية.
هل Flutter أفضل من React Native للعربية؟
كلاهما يدعم الاتجاه من اليمين لليسار وفق وثائقه الرسمية. الفرق الحقيقي في انضباط الفريق في استخدام القيم الاتجاهية واختبار العربية، لا في الإطار نفسه.
لماذا يظهر رقم الهاتف معكوسًا داخل الجملة؟
لأن الرقم نص من اليسار لليمين داخل جملة من اليمين لليسار. يحتاج تحديد اتجاهه صراحة، أو عرضه في سطر أو حقل مستقل.
هل يجب عكس الصور والشعارات؟
لا. الصور الفوتوغرافية والشعارات تبقى كما هي، ويُعكس فقط ما يدل على اتجاه الحركة أو التسلسل.
إن كانت في تطبيقك شاشات عربية تحتاج نظرة ثانية قبل التحديث القادم، أرسل لنا لقطاتها وسنخبرك أين المشكلة.