عبدالله الكندي: تفاصيل RTL تفرّق التطبيق العربي المحترف

تفتح تطبيقاً عربياً، وكل شي «تقريباً» صحيح، لكن فيه إحساس غريب ما تقدر تسمّيه: سهم يأشر للجهة الغلط، أو رقم جوال مقلوب، أو اسم مستخدم إنجليزي يخربط ترتيب السطر. عبدالله الكندي يبني واجهات عربية بـ Flutter و Next.js، ويعرف إن الاحتراف في RTL ما يبان في الشاشة الرئيسية، يبان في التفاصيل الصغيرة. هذي قائمته، مقسّمة حسب المكان اللي تتفحّصه.

في الكود: اكتب «بداية ونهاية» مو «يمين ويسار»

• في CSS استخدم الخصائص المنطقية: margin-inline-start بدل margin-left، و padding-inline-end بدل padding-right، و inset-inline-start بدل left. نفس الكود يخدم العربي والإنجليزي.
• في Tailwind استخدم ms و me و ps و pe بدل ml و mr و pl و pr، و text-start بدل text-left.
• في Flutter استخدم EdgeInsetsDirectional و AlignmentDirectional و PositionedDirectional بدل نظيراتها الثابتة.
• حدّد الاتجاه من الجذر: dir=rtl و lang=ar على وسم html، ولغة عربية صحيحة في إعدادات تطبيق Flutter، بدل ما تعكس العناصر وحدة وحدة.
• الظلال والحدود الجانبية: ظل مزاح لجهة في التصميم الإنجليزي ينقلب، والخط الملوّن على جانب البطاقة يروح لجهة البداية.

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

الأيقونات والحركة: مو كل شي ينعكس

القاعدة: الأيقونة اللي تعبّر عن اتجاه أو تسلسل تنعكس، واللي تمثّل شي من العالم الحقيقي تبقى كما هي.

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

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

الحقول والنماذج

• البريد الإلكتروني ورقم الجوال ورقم الآيبان: الحقل داخل صفحة عربية، لكن النص داخله يُكتب من اليسار لليمين. ثبّت اتجاه الإدخال على LTR، وخلّ التسمية عربية.
• لوحة المفاتيح المناسبة: حقل الجوال يفتح لوحة أرقام، وحقل البريد يفتح لوحة فيها علامة @.
• رسالة الخطأ تحت الحقل تبدأ من جهة البداية، مو في منتصف الشاشة.
• أيقونة إظهار كلمة المرور وزر المسح في جهة النهاية من الحقل.
• الأرقام: قرّر هل تعرض الأرقام الهندية أو الأرقام اللاتينية، والتزم بالقرار في كل الشاشات. وفي الإدخال تقبّل الاثنين وحوّلها قبل الحفظ، لأن المستخدم بيكتب باللي في لوحة مفاتيحه.

النص نفسه

• لا تضع letter-spacing على النص العربي: التباعد بين الحروف يقطع اتصالها ويشوّه الكلمة.
• ارفع ارتفاع السطر: الحروف العربية لها نقاط وامتدادات فوق وتحت، والقيمة المناسبة للإنجليزي تخلّي السطور تتلاصق.
• اعزل النصوص المختلطة: اسم إنجليزي أو رقم طلب داخل جملة عربية ممكن يقلب ترتيب الكلمات. في الويب استخدم عنصر bdi أو dir=auto، وفي Flutter حدّد اتجاه النص لأي بيانات جاية من المستخدم.
• علامات الترقيم العربية: الفاصلة «،» وعلامة الاستفهام «؟» والفاصلة المنقوطة «؛»، مو نظيراتها اللاتينية.
• النقاط اللي تختصر النص الطويل تظهر في جهة النهاية، يعني على اليسار في العربي. تأكد إنها ما تطلع في بداية الجملة.
• تجنّب المائل: أغلب الخطوط العربية ما فيها مائل حقيقي، والمتصفح يميلها ميلاً صناعياً يبين رخيص.

التنسيق والاختبار الأخير

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

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

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