تصميم منتجات ثنائية اللغة لقرّاء العربية

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

تتبع الأقسام التالية هذا الترتيب. وهي مكتوبة لمنتج يجمع العربية والإنجليزية، وينطبق معظمها على لغات أخرى تُكتب من اليمين إلى اليسار، كالعبرية والفارسية.

ابدأ بالخصائص المنطقية لا بأنماط معكوسة

تشير خصائص CSS الفيزيائية، مثل margin-left، إلى جهة من الشاشة. أما الخصائص المنطقية، مثل margin-inline-start، فتشير إلى جهة من النص، فتنقلب حين ينقلب اتجاه الصفحة. اضبط اتجاه الصفحة على rtl واللغة على ar في عنصر html، واكتب التخطيط بمفاهيم منطقية، فيخدم المكوّن الواحد اللغتين.

• الهوامش والحشو: استعمل صيغتي inline-start و inline-end بدل left و right.
• محاذاة النص: استعمل start و end بدل left و right.
• التموضع: استعمل inset-inline-start و inset-inline-end بدل الإزاحتين left و right.
• يقدّم Tailwind CSS الفكرة نفسها بأدوات مثل ms-4 و pe-4 و start-0، مع متغيّر rtl للاستثناءات.

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

قرّر أي الأيقونات والصور تنعكس

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

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

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

اضبط الخط العربي بحسب طبيعته

العربية خط متصل تتصل حروفه وتتغير أشكالها بحسب موضعها، فلا تنتقل قواعد الخط اللاتيني إليها. لا تضف تباعدًا بين الأحرف (letter-spacing) في النص العربي، فهو يقطع الاتصال. ولا تستخدم الخط المائل ولا الحروف الكبيرة؛ فلا وجود لهما في العربية، والميل المصطنع يبدو غريبًا للقارئ.

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

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

عالج الأرقام والتواريخ والنص المختلط

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

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

والنص المختلط مصدر الخطأ المعروف: نقطة أو قوس يقفز إلى الطرف الخطأ من الجملة بعد اسم لاتيني. لفّ الأسماء المدرجة وأسماء المنتجات والرموز بعنصر bdi، أو أعطها dir=ltr، ليعزلها المتصفح، واستخدم dir=auto في الحقول التي يكتب فيها المستخدم نصه.

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

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

وتنعكس الجداول كلها: يقع العمود الأول على اليمين، وتُحاذى الأعمدة الرقمية إلى جهة النهاية لتبقى الأرقام متراصة. والمخططات أقل استقرارًا. فإرشادات كثيرة تعكس المخططات التي محورها الأفقي زمن، فتقع أقدم قيمة على اليمين، وتُبقي المخططات ذات المقياس الرقمي كما هي. ويمكن الدفاع عن الخيارين؛ الخطأ هو الخلط بينهما في لوحة واحدة. اختر قاعدة وطبّقها في كل مكان، وتحقق منها مع مستخدمين يقرؤون العربية.

الحركة والإيماءات

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

اكتب للّغة ثم اختبر

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

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

نصمم ونبني بالإنجليزية والعربية معًا في كل مشروع، ونعرض لك العمل في عروض أسبوعية لترى النسختين وهما تتطوران. وللمزيد انظر [خدمة التصميم للعربية ومن اليمين إلى اليسار](/services/ui-ux-design/arabic-rtl-design)، و[تعريف التصميم من اليمين إلى اليسار](/glossary/rtl-design)، و[دليل المنتجات ثنائية اللغة بالعربية والإنجليزية](/guides/bilingual-arabic-english-products).