تجربة استخدام عربية أولًا: أخطاء RTL التي تجعل تطبيقك غريبًا

لماذا تبدو بعض التطبيقات «مترجمة» حتى لو كانت كلها بالعربي؟

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

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

اتجاه RTL ليس فلترًا يُطبّق في آخر المشروع، بل قرار تصميم يبدأ من أول شاشة.

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

عكس التخطيط والأيقونات: ليس كل شيء ينقلب

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

على مستوى الكود، أكبر مصدر للأخطاء هو استخدام خصائص الاتجاه الثابتة مثل margin-left و padding-right و text-align: left. البديل هو الخصائص المنطقية مثل margin-inline-start و padding-inline-end و text-align: start، التي تنقلب تلقائيًا مع اتجاه الصفحة. في Tailwind مثلًا تستخدم ms- و me- بدل ml- و mr-.

الأرقام والنص ثنائي الاتجاه: حين تختلط العربية بالإنجليزية

المستخدم العربي يكتب ويقرأ نصوصًا مختلطة طوال الوقت: «طلبك رقم #4521 من iPhone 15 Pro»، أو «تم الدفع عبر Apple Pay». المتصفح يرتّب هذه النصوص بخوارزمية ثنائية الاتجاه، وهي تعمل جيدًا غالبًا، لكنها تخطئ عند حدود الجملة: علامة التعجب تقفز لبداية السطر، أو الرمز # يلتصق بالجهة الخطأ، أو رقم الجوال +966 يظهر وعلامة + في آخره.

• اعزل المحتوى المتغير: كل اسم مستخدم أو منتج أو رقم يُدرج داخل جملة عربية يُلف في عنصر معزول (bdi أو خاصية unicode-bidi: isolate) حتى لا يؤثر اتجاهه على ما حوله.
• اجعل حقول الإدخال ذكية: استخدم dir=auto في حقول النص العامة حتى يتبع الاتجاه أول حرف يكتبه المستخدم.
• أرقام الجوال والبطاقات والبريد: اجعل حقولها دائمًا باتجاه LTR حتى في الواجهة العربية، مع محاذاة النص لليمين إن أردت الشكل متسقًا.
• الأرقام: اختر نظامًا واحدًا للعرض (الأرقام الغربية 0-9 شائعة في الخليج) وكن متسقًا، لكن اقبل الأرقام العربية الهندية ٠-٩ في الإدخال وحوّلها قبل الحفظ.
• العملة: حدد موضع رمز العملة ومسافته بشكل ثابت، مثل «150 ر.س» أو «SAR 150»، ولا تترك المتصفح يقرر.

الخطوط وارتفاع السطر: العربي يحتاج مساحة أكبر

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

• اختر خطًا عربيًا مصممًا للشاشات وحمّله صراحة، ولا تعتمد على الخط الاحتياطي للنظام. اختر خطًا له أوزان متعددة حتى لا يولّد المتصفح خطًا عريضًا مصطنعًا.
• ارفع ارتفاع السطر: ما يكفي للإنجليزية (حوالي 1.4 إلى 1.5) يكون غالبًا ضيقًا للعربية؛ جرّب قيمًا بين 1.6 و 1.9 للنصوص الطويلة.
• كبّر الحجم قليلًا: نفس الحجم الرقمي يبدو أصغر في العربية بسبب ارتفاع الحروف الصغير نسبيًا؛ زيادة نقطة أو نقطتين تحسن القراءة كثيرًا.
• لا تضع letter-spacing على العربي أبدًا: التباعد بين الحروف يقطع الاتصال بينها ويكسر الكلمات.
• لا تستخدم الأحرف الكبيرة (uppercase) كأسلوب للعناوين: لا معنى لها في العربية، وتحتاج بديلًا مثل الوزن الأثقل أو اللون.
• اترك مساحة للنص: النص العربي قد يكون أقصر أو أطول من الإنجليزي؛ صمم الأزرار والبطاقات بعرض مرن وليس ثابتًا.

التاريخ والوقت: الهجري والميلادي معًا

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

الأسماء والعناوين وأرقام الجوال: نماذج تحترم الواقع

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

الأسماء

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

العناوين

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

أرقام الجوال

المستخدم قد يكتب الرقم بالصفر في البداية، أو برمز الدولة، أو بـ 00، أو بمسافات وشرطات. اقبل كل ذلك، ثم حوّله إلى صيغة دولية موحدة (E.164) قبل الحفظ وقبل إرسال رمز OTP. وضع قائمة رمز الدولة بشكل افتراضي على دولة المستخدم.

البحث بالعربي: طبّع الحروف قبل أن تقارن

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

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

افعل ولا تفعل: قائمة مراجعة قبل الإطلاق

1. 1
   مراجعة المرآة

   قارن كل شاشة بالعربية والإنجليزية جنبًا إلى جنب وابحث عن عنصر لم ينعكس أو انعكس خطأ.

2. 2
   اختبار البيانات الحقيقية

   أدخل اسمًا رباعيًا طويلًا، وعنوانًا بلا رمز بريدي، ورقمًا بأرقام هندية، ومنتجًا اسمه مختلط عربي وإنجليزي.

3. 3
   اختبار على أجهزة متعددة

   جرب على هاتف iPhone وهاتف Android وشاشة صغيرة للتأكد من الخط والالتفاف والتصميم المتجاوب.

4. 4
   اختبار مع مستخدمين حقيقيين

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

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

أسئلة شائعة

مصطلحات في هذا المقال