العربية أولًا: ما الذي يتغيّر في المنتج حقًّا؟
القلب والخط والأرقام والنماذج والأيقونات والاختبار: ما يتغيّر حين يُصمَّم المنتج بالعربية من البداية، لا حين تُقلب واجهته في آخر المشروع.
بقلم
أغلب المنتجات تصل إلى العربية متأخرة: تصدر النسخة الإنجليزية، ثم يُضاف زرّ اللغة، ثم تُقلب الواجهة في أسبوعين. النتيجة تعمل، لكنها تُقرأ كأنها مترجمة، والمستخدم العربي يلحظ ذلك من أول شاشة.
«العربية أولًا» تعني عكس هذا الترتيب: أن تُصمَّم الواجهة العربية تصميمًا، لا أن تُشتقّ من غيرها. وهذا ما يتغيّر عمليًّا عند المصمّم وعند المهندس.
القلب قاعدة في التخطيط، لا لمسة أخيرة
في الواجهة العربية يبدأ مسار القراءة من أعلى اليمين، ويتبعه كل شيء: شريط التنقّل، وزرّ الرجوع، والقائمة الجانبية، وخطوات التقدّم، والشرائح، وإيماءات السحب. وسهم الرجوع يشير إلى اليمين.
والدرس الهندسي قصير: لا تكتب «يسار» ولا «يمين» في الشفرة. اكتب «بداية» و«نهاية».
- الويب: ضع
dir="rtl"على الصفحة، واستعمل الخصائص المنطقية مثلmargin-inline-startوtext-align: start. - iOS و Android: استعمل leading و trailing، و start و end، فيقلب النظام التخطيط عنك.
- Flutter: استعمل الأصناف الاتجاهية مثل
EdgeInsetsDirectional. - محرّكات الألعاب: تأكّد مبكرًا أن مكوّن النص يصل الحروف العربية ويرتّبها صحيحًا؛ فليس كل مكوّن يفعل ذلك من تلقاء نفسه.
بهذه الطريقة تخدم شفرة واحدة الاتجاهين. وبغيرها تُصلَح كل شاشة مرتين.
الخط: سطور أعلى، وحروف متصلة
الحرف العربي يتصل بجاره، وله نقاط فوقه وتحته، وقد يعلوه التشكيل. وارتفاع السطر المضبوط على الحرف اللاتيني يقصّ ذلك كله.
- زد ارتفاع السطر في النص العربي: ابدأ من نحو 1.7 حيث كنت تضع 1.5 للنص اللاتيني، ثم عدّل بحسب الخط.
- الخط العربي يبدو أصغر من اللاتيني عند الحجم نفسه، فتوقّع أن تكبّره درجة.
- لا تباعد بين الحروف أبدًا؛ فالتباعد يقطع اتصالها.
- لا أحرف كبيرة في العربية، والخط المائل دخيل عليها. فابنِ تدرّج العناوين وإبراز الكلمات بالوزن والحجم واللون.
الأرقام والنص المختلط
النص العربي يجري من اليمين، والأرقام في داخله تجري من اليسار، ومثلها الأسماء الإنجليزية وعناوين البريد والروابط والشفرة. فكل شاشة عربية ثنائية الاتجاه، وهنا تسكن أكثر الأخطاء ظهورًا.
- اختر شكلًا واحدًا للأرقام، 123 أو ١٢٣، والتزمه في كل مكان. وكثير من المنتجات السعودية يكتب 123.
- اعزل كل مقطع يجري من اليسار: أرقام الهواتف والأسعار وأرقام الطلبات وأسماء المستخدمين. في الويب يقوم بذلك العنصر
<bdi>، وفي غيره محارف العزل في Unicode. - الأخطاء المعهودة: علامة الزائد في
+966تقفز إلى الطرف الآخر، والأقواس تنقلب، والنقطة تقع في الجهة الخطأ من كلمة إنجليزية. - نسّق التواريخ والعملة وصيغ العدد بأدوات النظام. للمعدود في العربية ست صيغ: «لا رسائل»، «رسالة»، «رسالتان»، «3 رسائل»، «11 رسالة»، «100 رسالة». ولصق النصوص بعضها ببعض لا يولّدها.
النماذج
- عناوين الحقول والنصوص المساعدة تُحاذى يمينًا. أما حقول البريد والرابط والهاتف والبطاقة ورمز التحقق فتبقى من اليسار إلى اليمين، حتى في الشاشة العربية.
- حقول النص الحر تأخذ اتجاهها مما يكتبه المستخدم:
dir="auto"في الويب. - اقبل الحروف العربية في الأسماء. نمط تحقّق لا يسمح إلا بالحروف اللاتينية يردّ عميلك من الخطوة الأولى.
- البحث يتسامح مع اختلاف الرسم: صور الألف (أ، إ، آ، ا)، والتاء المربوطة والهاء، والياء والألف المقصورة، والتشكيل إن وُجد.
أيقونات لا تُقلب
اقلب ما يدلّ على اتجاه: أسهم الرجوع والتقدّم، وسهم الإرسال، وأيقونات القوائم والإزاحة، وأشرطة التقدّم.
واترك هذه كما هي:
- أزرار الوسائط. التشغيل والترجيع والتقديم تتبع الشريط لا النص، وشريط التشغيل نفسه يبقى من اليسار إلى اليمين.
- الساعات، وكل ما يدور مع عقاربها.
- علامة الصح، والشعارات والعلامات التجارية.
- الأرقام، وكل أيقونة فيها نص لاتيني.
واستثناء واحد يُنسى كثيرًا: علامة الاستفهام. العربية تكتبها «؟»، فأيقونة المساعدة تأخذ هذا الشكل.
الاختبار
- من الأسبوع الأول، فعّل خيار فرض الاتجاه من اليمين إلى اليسار في خيارات المطوّرين على Android، واللغة الزائفة من اليمين إلى اليسار في Xcode. يكشفان أخطاء القلب قبل أن تُكتب كلمة عربية واحدة.
- اختبر بنص عربي حقيقي كتبه كاتب. النص المترجم آليًّا يخفي عيوب التخطيط وعيوب النبرة معًا.
- اختبر الحالات الصعبة: اسمًا مشكولًا، وجملة تجمع العربية واسم منتج إنجليزيًّا وسعرًا.
- أعطِ النسخة لقارئ عربي يستعملها على هاتفه، ولا تكتفِ بصور الشاشات في ملف.
الكلمات قبل التخطيط
الاتجاه نصف المسألة، ونصفها الآخر اللغة نفسها. «سنام»، اللعبة التي بنيناها لمنصة «راعي النظر»، عربية أولًا: واجهتها تحتفظ بمفردات أهل الإبل كما يقولونها، من «المنقية» إلى «الناموس». والكلمة التي يعرفها اللاعب لا تحتاج إلى شرح.
الضبّ ينظر أولًا ثم يتحرّك. والنظر في منتج عربي أن تفتح التصميم بالعربية من اليوم الأول، لا في اليوم الذي يسبق الإطلاق.