تصميم المواقع ثنائية اللغة من اليمين إلى اليسار: أفضل الممارسات لمواقع الإمارات وعُمان

يجب أن تُعلن كل صفحةٍ عربية لغتها واتجاهها على العنصر الجذري: <html lang="ar" dir="rtl">. هذه السمة وحدها تُخبر المتصفّح وقارئات الشاشة ومحرّكات البحث بما تتعامل معه، وتقلب محاذاة النص وأعمدة الجداول وحقول النماذج دون سطرٍ واحد من الشيفرة الخاصة.

ثم اكتب التنسيقات بالخصائص المنطقية — margin-inline-start وpadding-inline-end وtext-align: start وinset-inline-end — بدل اليمين واليسار. فالخاصية المنطقية تعني «الجهة التي تبدأ منها القراءة»، فيخدم ملف تنسيقٍ واحد اللغتين، ولا يحتاج شيءٌ إلى تعديلٍ خاص بالعربية. وتخطيطات Flexbox وGrid تتبع اتجاه الصفحة أصلًا.

وما يجب تجنّبه: ملف تنسيقٍ عربي مستقل مرقّع يدويًّا ومليء بتعديلات float: right، أو عكس أقسامٍ كاملة بتحويلٍ في CSS. كلاهما يعمل يوم الإطلاق، ثم يبتعد عن النسخة الإنجليزية مع كل تعديلٍ بعده.

في العربية تبدأ قراءة الصفحة من أعلى اليمين، فتتبادل العناصر الرئيسية مواقعها تبعًا لذلك.

التنقّل: الشعار يسارًا والقائمة يمينًا في الإنجليزية؛ والشعار يمينًا والقائمة يسارًا في العربية. وينتقل زرّ الدعوة إلى الإجراء الرئيسي معهما.

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

الأيقونات ذات الاتجاه: أسهم الرجوع والتقدّم، وعلامات «التالي»، ومسار التنقّل (Breadcrumbs)، والعروض المتحرّكة، وأشرطة التقدّم — كلها تشير وتمتلئ في الاتجاه المعاكس.

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

النصوص داخل الصور: تُترجَم، أو الأفضل أن تُبعَد النصوص عن الصور أصلًا لتعيش في الصفحة نفسها باللغتين.

النماذج والجداول: تقع التسميات والأيقونات ورسائل التحقّق على يمين الحقل، وتنتقل مربّعات الاختيار وأزرار الخيارات إلى يمين تسمياتها، ويصبح العمود الأول في جدول البيانات — الاسم أو الرقم المرجعي — هو العمود الأيمن. وعلى الهاتف تنزلق قائمة التنقّل من الجهة اليمنى، وتتبع إيماءات السحب مثل «الصورة التالية» اتجاه القراءة.

اختر خطًّا صُمِّم للعربية، لا خطًّا لاتينيًّا أُلصقت به حروفٌ عربية. فخطوط Cairo وTajawal وIBM Plex Sans Arabic وNoto Naskh Arabic وخط دبي كلها خياراتٌ متينة للويب؛ واختر منها ما يتناسب وزنه البصري مع الخط الإنجليزي لديك.

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

ولا تُضِف تباعدًا بين الحروف في العربية أبدًا: فهو يقطع اتصال الحروف ببعضها. وتجنّب الميلان المصطنع كذلك — فليس للعربية تقليدٌ في الخط المائل، وإمالتها تجعل النص يبدو مكسورًا لا مؤكَّدًا. واستخدم سماكة الخط أو اللون للتأكيد بدلًا من ذلك.

الصفحات العربية مليئة بمقاطع تُقرأ من اليسار إلى اليمين: أرقام الهواتف، وعناوين البريد، والأسعار، وأسماء العلامات التجارية بالحروف اللاتينية. وخوارزمية الاتجاه الثنائي في المتصفّح تضعها في مكانها الصحيح غالبًا، وتبعثرها أحيانًا — رقمٌ يبدأ بـ ‎+971 وقد انتقلت علامة الزائد إلى طرفه الآخر، أو سعرٌ قفزت عملته إلى الجهة المقابلة.

اعزل هذه المقاطع. ضع أرقام الهواتف وعناوين البريد والرموز داخل <bdi> أو داخل span بالسمة dir="ltr"، واجعل حقول البريد والهاتف والروابط في النماذج dir="ltr" كي يبقى ما يكتبه الناس مقروءًا.

واختر نمطًا واحدًا للأرقام والتزم به. فالأرقام الغربية (0–9) هي الخيار الشائع في مواقع الأعمال بالإمارات وعُمان، والأرقام العربية المشرقية (٠–٩) بديلٌ مشروع. أمّا الخلط بينهما في الصفحة نفسها فيبدو إهمالًا.

ونسّق العملة باتّساق في كل لغة — «AED 3,000» في الإنجليزية و«3,000 درهم» في العربية — وتذكّر أن الريال العُماني يُقسَّم إلى 1,000 بيسة، ولذلك تُكتب أسعار الريال عادةً بثلاث خانات عشرية.

امنح كل لغةٍ رابطها الخاص — ونمط ‎/en/…‎ و‎/ar/…‎ هو الأنظف، وهكذا بُني هذا الموقع. فلا يفهرس Google الصفحات العربية والإنجليزية كلًّا على حدة إلا إذا كانت لها عناوين منفصلة؛ أمّا الموقع الذي يبدّل لغته بملف تعريف ارتباط (Cookie) أو بسكربت على الرابط نفسه، فهو في نظر محرّكات البحث موقعٌ بلغةٍ واحدة، لأن زاحف Google لا يحتفظ بملفات تعريف الارتباط.

واربط كل زوجٍ بوسوم hreflang: تُدرج كل صفحةٍ نفسها ونظيرتها في اللغة الأخرى، مع x-default. واكتب عناوين وأوصافًا فريدة لكل لغة بدل ترجمة الإنجليزية حرفيًّا — فالباحث العربي يكتب كلماتٍ مختلفة، وهذا بالضبط ما وُضع له البحث عن الكلمات المفتاحية العربية.

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

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

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

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

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

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

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