تصميم ثنائي اللغة: تجربة RTL/LTR بشكل صحيح

لماذا التجربة ثنائية اللغة غير قابلة للتفاوض هنا

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

المشكلة أن "ثنائية اللغة" غالباً ما تُعامَل كمهمة ترجمة - تُسلَّم النصوص لمترجم، ويُطبَّق تحويل CSS لـ RTL، ثم يُنشر الموقع. هذا النهج ينتج موقعاً يحتوي تقنياً على نص عربي، لكنه يبدو غريباً لقارئ عربي: خط مزدحم، أرقام تسير بالاتجاه الخاطئ، نماذج تتصرف بغرابة. التجربة الثنائية الحقيقية قرار تخطيط وتصميم يُتخذ من أول مخطط سلكي، لا مفتاح CSS يُطبَّق لاحقاً.

RTL ليست مجرد صورة معكوسة

ضبط direction: rtl على الصفحة وترك المتصفح يعكس كل شيء أفقياً يقطع معظم الطريق - تنتقل القوائم لليمين، ويتحاذى النص لليمين، ويعكس اتجاه القراءة. لكن الانعكاس الشامل خاطئ لمجموعة محددة من العناصر التي يجب ألا تنعكس أبداً، والخطأ في هذه القائمة هو ما يجعل معظم المواقع التي "تدعم العربية" تبدو خاطئة بوضوح:

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

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

الطباعة العربية واللاتينية لا تتصرفان بنفس الطريقة

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

بعض الأمور التي يستحق بناؤها في نظام التصميم بدلاً من اكتشافها أثناء الاختبار:

• اختر زوج خطوط مصمَّماً لكلا الرسمين معاً (عائلات مثل IBM Plex Sans Arabic أو Noto Sans Arabic أو Tajawal تتناسب جيداً مع خطوط لاتينية شائعة)، لا خطين غير مترابطين مُلصَقين عبر CSS احتياطي.
• تحتاج العربية عموماً ارتفاع سطر أكبر وحجم نص أساسي أكبر قليلاً من المكافئ اللاتيني لتبقى مقروءة بارتياح - نادراً ما تصلح نفس قيم البكسل للغتين.
• لا تملك الكتابة العربية شكلاً مائلاً حقيقياً ونادراً ما تستخدم تباعد الأحرف كما تفعل الطباعة اللاتينية - لا تطبّق نفس أنماط التأكيد على اللغتين.
• عادة ما تكون الجمل العربية أطول بنسبة 20-25% من مكافئها الإنجليزي لنفس المعنى. الأزرار وتسميات التنقل والبطاقات الضيقة التي اختُبرت بالإنجليزية فقط ستفيض أو تلتف بشكل غير مريح بعد الترجمة.

الأيقونات والأرقام والمحتوى مختلط الاتجاه

الأرقام قرار، لا إعداد افتراضي. يتوقع معظم جمهور الخليج أرقاماً عربية غربية (0-9) لا أرقاماً هندية عربية (٠-٩)، حتى في الصفحات العربية بالكامل - لكن هذا يختلف حسب المنطقة والجمهور، لذا يجب أن يكون قراراً صريحاً في نظام التصميم، لا ما يعرضه المتصفح أو إعدادات النظام تلقائياً.

النص مختلط الاتجاه فخ آخر: فقرة عربية تذكر اسم منتج إنجليزي أو رقم تذكرة أو رابطاً تحتاج أن يُغلَّف ذلك الجزء بحيث لا يُعاد ترتيبه بصرياً وسط الجملة - عادة عبر عنصر dir="ltr" صريح أو أحرف العزل الاتجاهي في يونيكود حول النص المضمَّن، بدلاً من الأمل أن يخمّن المتصفح بشكل صحيح.

النماذج والتواريخ وحقول الإدخال في RTL

النماذج هي حيث تظهر أخطاء RTL بأكبر وضوح، لأن المستخدم يكتب فعلياً ويشعر فوراً حين يكون هناك خطأ. بعض الأنماط التي تستحق معالجة متعمدة بدلاً من انعكاس شامل:

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

الروابط وتحسين محركات البحث وتكلفة الخطأ

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

الحل بنية روابط متوازية صحيحة - مسارات مميزة مثل /ar/ للنسخة العربية من كل صفحة - مقترنة بوسوم hreflang تخبر محركات البحث أن الصفحتين الإنجليزية والعربية بديلتان لبعضهما. يتطلب إعداداً أكبر من مفتاح كوكيز بسيط، لكنه الفرق بين موقع عربي موجود وآخر يظهر فعلياً عندما يبحث أحدهم بالعربية.

أخطاء شائعة نراها

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

تنفيذها بشكل صحيح من البداية

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

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