تصميم موقع ثنائي اللغة عربي وإنجليزي: الاتجاه والخطوط والمحتوى وتجربة المستخدم

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

يستعرض هذا المقال القرارات التصميمية والتقنية التي تجعل الموقع ثنائي اللغة متماسكًا في نسختيه.

1. حدّد اللغة الأساسية ودور كل نسخة

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

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

2. اتجاه RTL: أكثر من قلب الصفحة

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

• عناصر تنعكس: أسهم «التالي» و«السابق»، ومسار التنقل، وأيقونات الاتجاه، وموضع الأشرطة الجانبية.
• عناصر لا تنعكس: الشعارات، وأيقونات التشغيل في مشغل الفيديو، والرسوم البيانية الزمنية، وأرقام الهواتف.
• خصائص CSS المنطقية: استخدم margin-inline-start وpadding-inline-end بدل اليمين واليسار، ليتكيف التخطيط تلقائيًا مع الاتجاه.
• الخاصية dir: اضبطها على مستوى الصفحة، واستخدم dir="auto" في الحقول التي قد يكتب فيها المستخدم بأي لغة.

3. الخطوط العربية واللاتينية معًا

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

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

4. محتوى يُكتب للقارئ لا يُنقل حرفيًا

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

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

5. نظام إدارة المحتوى وسير عمل الترجمة

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

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

6. التبديل بين اللغتين دون أن يضيع الزائر

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

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

7. الأرقام والتواريخ والنماذج

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

• شكل الأرقام: اختر بين الأرقام العربية المشرقية (١٢٣) والأرقام الغربية (123) والتزم بالاختيار نفسه في الموقع كله.
• التواريخ: حدد هل يُعرض التاريخ الهجري أو الميلادي أو كلاهما، وبأي صيغة.
• الحقول المختلطة: حقول البريد الإلكتروني ورقم الجوال تُكتب من اليسار إلى اليمين حتى داخل النسخة العربية.
• رسائل التحقق: تظهر بلغة الصفحة وقرب الحقل المعني، لا في أعلى النموذج بلغة أخرى.
• الجداول: اختبر الجداول التي تجمع نصًا عربيًا وأرقامًا ورموزًا لاتينية في الخلية نفسها.

8. الاختبار والإشارات التقنية لمحركات البحث

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

ومن الناحية التقنية، اجعل لكل لغة مسارًا واضحًا في الرابط مثل /ar و/en، واضبط الخاصية lang في كل صفحة، وأضف وسوم hreflang التي تربط الصفحات المتقابلة، حتى تعرض محركات البحث لكل مستخدم النسخة التي تناسبه. وراجع أيضًا إمكانية الوصول في النسختين، فقارئات الشاشة تعتمد على وسم اللغة الصحيح لنطق المحتوى بشكل سليم.

الخلاصة

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