التصميم للعربية ومن اليمين إلى اليسار: ما ينعكس وما لا ينعكس

اعكس البنية لا كل ما فيها

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

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

الخط العربي

اختر خطًّا مرسومًا للعربية

لا تدع المتصفح أو الهاتف يلجأ إلى خط عربي عام. اختر عائلة خطوط مرسومة للعربية، مثل Cairo أو IBM Plex Sans Arabic أو Noto Sans Arabic أو Tajawal، وتحقق من رخصتها. وعند إقرانها بخط لاتيني قارن الوزن وارتفاع الحرف جنبًا إلى جنب كي لا يبدو السطر المختلط غير متساوٍ.

الحجم وارتفاع السطر

تحمل الحروف العربية نقاطًا وتشكيلًا وأعمدة طويلة فوق السطر وتحته، فيقصّ ارتفاع السطر اللاتيني أجزاءً منها أو يزحمها. وكقاعدة عملية ابدأ بارتفاع سطر نحو 1.6 إلى 1.8 للنص الأساسي ونحو 1.4 إلى 1.5 للعناوين، ثم اختبر بنص حقيقي فيه تشكيل. وكثيرًا ما تبدو العربية أصغر من اللاتينية بالحجم نفسه، فقارن بينهما وكبّر العربية إن بدت ضعيفة.

ما يجب تجنبه

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

الأرقام والتواريخ والعملات

تستخدم الواجهات العربية نظامين للأرقام: الأرقام الغربية (0 إلى 9) والأرقام الهندية العربية. والصواب يتوقف على السوق والجمهور. اختر نظامًا واحدًا لكل منتج وطبّقه في كل مكان بما فيه الحقول والمخططات، وأكّد الاختيار مع قرّاء عرب. وتختار مكتبات التهيئة النظام حسب اللغة والبلد، ويختلف الافتراضي بين البلدان العربية، فحدّده عن قصد، مثلًا بخيار نظام الترقيم في Intl.NumberFormat.

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

الأيقونات والأسهم

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

النماذج وحقول الإدخال

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

النص العربي المختلط بالإنجليزية

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

• اضبط الاتجاه التلقائي للنص الذي يكتبه المستخدم، فيتبع كل نص أول حرف قوي فيه.
• اعزل المقاطع اللاتينية داخل السطر بالعنصر bdi أو بالخاصية unicode-bidi مع القيمة isolate، حتى لا تربك الجملة حولها.
• ابنِ الجمل من قوالب قابلة للترجمة فيها عناصر نائبة، ولا تركّبها من أجزاء، ليتمكن المترجم من إعادة ترتيبها.
• اختبر النصوص المزعجة: رمز طلب في وسط جملة، واسمًا ينتهي برقم، ورابطًا في آخر السطر.

البحث والجداول والمخططات

البحث

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

الجداول والمخططات

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

اتجاه الحركة

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

اختبر مع قرّاء عرب

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

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

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