كيف تبنون واجهات عربية لا تبدو مترجمة

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

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

اعكسوا التخطيط، لا المحتوى

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

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

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

استخدموا الخصائص المنطقية في كل مكان

أنجع قرار تتخذونه يكون في اليوم الأول من المشروع: لا تكتبوا left أو right في CSS أبدًا. استعملوا مكانهما الخصائص المنطقية التي تتبع اتجاه القراءة تلقائيًا.

/* physical: breaks in Arabic */
.card { margin-left: 24px; text-align: left; }

/* logical: correct in every language */
.card { margin-inline-start: 24px; text-align: start; }

بفضل margin-inline-start وpadding-inline-end وinset-inline-start وtext-align: start، تخدم ورقة أنماط واحدة الاتجاهين. وبعدها يكفي أن تضيفوا dir="rtl" إلى الصفحة لتنعكس الواجهة كلها.

إضافة ذلك لاحقًا تعني مراجعة كل مكوّن. أما البدء به فلا يكلّف شيئًا.

الخط لا يُترجَم

الكتابة العربية متصلة الحروف، ولها نِسَبها الخاصة. لذلك نادرًا ما يكفي أن تأخذوا تصميمًا لاتينيًا وتكتفوا بتغيير الخط.

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

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

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

أضيفوا dir="auto" إلى المحتوى الذي يكتبه المستخدمون، ليأخذ كل نص اتجاهه الصحيح. ونسّقوا التواريخ والأرقام بأدوات التدويل التي توفّرها المنصة بدل تنسيقها يدويًا، وحدّدوا مبكرًا هل ستعتمدون الأرقام الغربية (1، 2، 3) أم المشرقية (١، ٢، ٣)، ثم التزموا بذلك في كل مكان.

حركة تتبع اتجاه القراءة

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

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

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

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