بناء موقع ثنائي اللغة بالعربية والإنجليزية: دليل عملي
الدليل العملي لموقع ثنائي اللغة: هيكلة الروابط، واتجاه النص، وعكس التخطيط، والخطوط، والأرقام، والنماذج، والتوطين، ومبدّل اللغة.
الموقع الثنائي اللغة ليس نسخة إنجليزية تُرجمت إلى العربية ثم قُلبت إلى اليمين، بل تجربتان كاملتان تتشاركان بنية واحدة. ولبناء موقع ثنائي اللغة بالعربية والإنجليزية بطريقة صحيحة، تحتاج إلى عنوان مستقل لكل لغة، واتجاه نص مضبوط، وتخطيط ينعكس دون أن ينكسر، وخطوط تناسب الكتابتين، ونماذج تفهم الأرقام العربية، ومحتوى موطَّن لا مترجم حرفيًا. وحسم هذه القرارات في بداية المشروع أسهل وأرخص بكثير من تداركها بعد الإطلاق، لذلك مكانها الطبيعي مرحلة التخطيط ضمن مراحل بناء موقع الشركة.
عنوان مستقل لكل لغة
القاعدة الأولى أن يكون لكل لغة عنوان URL خاص بها يمكن مشاركته وفهرسته. أما تبديل اللغة عبر ملفات تعريف الارتباط أو جافاسكربت مع بقاء العنوان نفسه، فيعني أن محركات البحث قد لا ترى إلا لغة واحدة، وأن الرابط الذي يرسله عميل إلى صديقه قد يُفتح بلغة غير متوقعة.
| الهيكل | مثال | متى يناسب | ملاحظات |
|---|---|---|---|
| مجلدات فرعية | /ar/ و/en/ | أغلب مواقع الشركات | الأسهل في الإدارة والتحليل، ويجمع قوة النطاق في مكان واحد |
| نطاقات فرعية | ar.example.com | عندما تُدار كل لغة بنظام أو فريق مختلف | يحتاج إلى إعداد وتتبع أكثر |
| نطاقات منفصلة | نطاق وطني لكل دولة | عندما تختلف الأنشطة والأسعار والمحتوى بين الدول فعلًا | تكلفة وصيانة وجهد تسويقي مضاعف |
| معامل في العنوان | ?lang=ar | لا يُنصح به | أصعب على المحركات والمستخدمين معًا |
والمجلدات الفرعية هي الخيار العملي لأغلب الشركات في الخليج ومصر.
لا تحوّل الزائر تلقائيًا
التحويل التلقائي حسب موقع الزائر الجغرافي أو لغة متصفحه يبدو ذكيًا، لكنه يخطئ كثيرًا: المقيم الناطق بالإنجليزية في دبي سيُحوَّل إلى العربية، والمستخدم العربي الذي يضبط هاتفه بالإنجليزية سيُحوَّل إلى الإنجليزية. والأخطر أن برامج الزحف قد لا ترى إحدى النسختين أبدًا. والبديل الأفضل أن تقترح اللغة عبر شريط صغير، مثل «هذه الصفحة متاحة بالعربية»، ثم تترك القرار للزائر وتتذكر اختياره.
عناوين الصفحات: بحروف عربية أم لاتينية؟
العنوان العربي مقروء للزائر العربي في شريط المتصفح، لكنه يتحول عند النسخ في كثير من التطبيقات إلى سلسلة طويلة من الرموز المرمّزة، فيبدو مريبًا في الرسائل. والعنوان اللاتيني أقصر عند المشاركة. ومحركات البحث تتعامل مع النوعين، فاختر أحدهما والتزم به في الموقع كله.
اللغة والاتجاه: السمتان lang وdir
ضع على عنصر html في الصفحة العربية السمتين lang="ar" وdir="rtl"، وفي الصفحة الإنجليزية lang="en" وdir="ltr". فالسمة lang تخبر قارئ الشاشة بالصوت الذي ينطق به، والمتصفح بقواعد عرض الخط، ومحركات البحث بلغة الصفحة، والسمة dir تقلب اتجاه النص والتخطيط كله.
تتولى خوارزمية الاتجاه في المتصفح معظم حالات الكلمات الإنجليزية داخل الجملة العربية، لكن المشكلات تظهر عند الحدود بين الاتجاهين، خاصة مع الأرقام وعلامات الترقيم. أشهر مثال رقم الهاتف الدولي داخل نص عربي، إذ قد تنعكس مجموعات أرقامه فيظهر مقلوبًا. والحل أن تعزل هذه الأجزاء باتجاه صريح، وأن تستخدم عنصر bdi للنصوص مجهولة الاتجاه القادمة من قاعدة البيانات، كأسماء المستخدمين والمنتجات:
<html lang="ar" dir="rtl">
<p>للتواصل: <span dir="ltr">+971 50 000 0000</span></p>
<p>كتبه <bdi>Sarah K.</bdi> قبل يومين</p>
<p>جرّب خاصية <span lang="en">Dark Mode</span> الجديدة</p>ووسم الكلمات الإنجليزية بالسمة lang="en" يجعل قارئ الشاشة ينطقها بصوت إنجليزي بدلًا من محاولة قراءتها بالعربية، وهو جزء من إمكانية الوصول في المواقع.
عكس التخطيط بخصائص CSS المنطقية
عند الانتقال إلى الاتجاه من اليمين إلى اليسار ينعكس كثير من العناصر: ترتيب القائمة الرئيسية، ومحاذاة النص، والأعمدة الجانبية، ومسار التنقل، وأسهم «التالي» و«السابق»، واتجاه خطوات التقدم، واتجاه السحب في شرائح العرض. ولا ينعكس بعضها: الشعارات، وأزرار تشغيل الوسائط عادةً، وأرقام الهواتف، والشيفرات البرمجية، والأيقونات التي لا تدل على اتجاه أو حركة.
الطريقة الحديثة لبناء تخطيط يخدم الاتجاهين بملف تنسيق واحد هي الخصائص المنطقية (Logical Properties). فبدلًا من «يسار» و«يمين» تكتب «بداية» و«نهاية»، والمتصفح يحددهما حسب اتجاه الصفحة:
/* بدلًا من margin-left و padding-right */
.card {
margin-inline-start: 1rem;
padding-inline-end: 1.5rem;
border-inline-start: 4px solid #0a7c66;
text-align: start;
}
/* لا تُقلب إلا الأيقونات الاتجاهية */
[dir="rtl"] .icon-arrow { transform: scaleX(-1); }تتبع أنظمة Flexbox وGrid اتجاه الصفحة تلقائيًا، لكن بعض الخصائص لا تنعكس وحدها ويجب مراجعتها: الإزاحات في التحويلات والحركة (translateX)، والتموضع المطلق بالقيمتين left وright، وموضع صور الخلفية، واتجاه الظلال. ولا تستخدم عكس ترتيب العناصر بصريًا لمحاكاة الاتجاه العربي، لأن ترتيب القراءة والتنقل بلوحة المفاتيح يبقى على ترتيب الشيفرة فيختلف عما يراه المستخدم. ولأن التخطيط يجب أن يعمل على كل الشاشات في الاتجاهين، اختبره وفق مبادئ التصميم المتجاوب بالعربية والإنجليزية معًا.
الخطوط: عربية ولاتينية متناسقتان
- اختر خطًا عربيًا مصممًا للشاشات ويتوفر بعدة أوزان، على الأقل عادي وعريض. وبعض العائلات صُممت بالعربية واللاتينية معًا، مثل IBM Plex Sans Arabic مع IBM Plex Sans، وNoto Sans Arabic مع Noto Sans، فيسهل تحقيق الانسجام بين اللغتين.
- يبدو النص العربي في كثير من الخطوط أصغر بصريًا من اللاتيني في الحجم نفسه، ويحتاج إلى تباعد أسطر أكبر بسبب الحروف الصاعدة والنازلة والتشكيل. اضبط الحجم وتباعد الأسطر لكل لغة على حدة باستخدام المحدد lang في CSS.
- لا تضف تباعدًا بين الحروف العربية لأنه يفكك اتصالها، ولا تستخدم الميلان المصطنع للتأكيد، واعتمد بدلًا منه على الوزن أو اللون.
- ملفات الخطوط العربية أكبر عادةً لكثرة أشكال الحروف، فحمّل الأوزان التي تحتاجها فقط، واستخدم صيغة WOFF2، وقسّم الخط إلى مجموعات حروف إن أمكن، وتابع أثر ذلك في سرعة الموقع.
وللتعمق في اختيار الخطوط العربية وتنسيقها، راجع دليل الطباعة والخطوط العربية.
الأرقام والتواريخ والعملات
في المنطقة نظامان للأرقام: الأرقام الغربية (0123) والأرقام المشرقية (٠١٢٣)، وكلاهما مستخدم في الخليج ومصر. اختر ما يناسب جمهورك وهويتك، والتزم به في الموقع والفواتير والتطبيق والرسائل. وأيًّا كان اختيارك في العرض، خزّن الأرقام والأسعار والتواريخ في قاعدة البيانات بصيغة محايدة، ثم نسّقها عند العرض بدوال تراعي اللغة والمنطقة، مثل واجهة Intl في جافاسكربت، مع تحديد نظام الأرقام صراحة لأن القيمة الافتراضية تختلف حسب المنطقة والمتصفح:
const price = 1250.5;
// أرقام غربية في واجهة عربية
new Intl.NumberFormat("ar-EG", { style: "currency", currency: "EGP", numberingSystem: "latn" }).format(price);
// الدينار الكويتي يُعرض بثلاث خانات عشرية
new Intl.NumberFormat("ar-KW", { style: "currency", currency: "KWD", numberingSystem: "latn" }).format(price);- العملات: يختلف عدد الخانات العشرية بين العملات؛ فالدرهم والريال والجنيه بخانتين، والدينار الكويتي بثلاث. استخدم دوال التنسيق بدلًا من لصق الرمز بالرقم يدويًا.
- التواريخ: إذا احتجت إلى التاريخ الهجري، فاستخدم تقويمًا محددًا مثل تقويم أم القرى عبر دوال التنسيق بدلًا من الحساب اليدوي. وأسماء الأشهر الميلادية تختلف بين المناطق (يناير في مصر والخليج، وكانون الثاني في الشام)، فاختر ما يعرفه جمهورك.
- الوحدات والصيغ: صيغة التاريخ، وبداية الأسبوع، وأيام العطلة الرسمية تختلف بين الدول، فلا تفترضها.
النماذج واتجاه الإدخال
النماذج أكثر أجزاء الموقع الثنائي اللغة عرضة للأخطاء الصغيرة المزعجة:
- الحقول التي محتواها لاتيني دائمًا، كالبريد الإلكتروني والروابط والهاتف وكلمة المرور ورقم البطاقة، اجعل اتجاهها ltr حتى في الصفحة العربية.
- حقول الاسم والعنوان والرسالة قد يكتب فيها المستخدم بأي من اللغتين، فاستخدم فيها dir="auto" ليتبع الاتجاه أول حرف ذي اتجاه يكتبه المستخدم.
- اقبل الأرقام المشرقية وحوّلها: المستخدم الذي يكتب بلوحة مفاتيح عربية قد يدخل رقم هاتفه أو رمز التحقق بالأرقام المشرقية، فإذا لم يحوّلها النظام إلى أرقام غربية قبل التحقق، رفض أرقامًا صحيحة وأغضب العميل.
- استخدم نوع الحقل المناسب (type="tel" وtype="email" وinputmode="numeric") لتظهر لوحة المفاتيح الصحيحة على الهاتف.
- لا تقصر حقول الأسماء على الحروف اللاتينية، واسمح بأسماء طويلة. وحقل واحد للاسم الكامل أنسب غالبًا للأسماء العربية متعددة المقاطع من تقسيمها إلى اسم أول واسم عائلة.
- رسائل الخطأ بلغة الصفحة، وبجوار الحقل المعني، وأيقوناتها الاتجاهية منعكسة.
- وحّد البحث العربي: اجعل محرك البحث الداخلي يوحّد أشكال الألف (أ إ آ ا)، والتاء المربوطة والهاء، والألف المقصورة والياء، ويتجاهل التشكيل والتطويل، حتى يجد من يكتب «احمد» نتيجة «أحمد».
الترجمة أم التوطين؟
الترجمة تنقل المعنى من لغة إلى أخرى، أما التوطين (Localisation) فيكيّف التجربة كلها لجمهور محدد: العملة، والأمثلة، والصور، والإشارات الثقافية، ووسائل الدفع كالدفع عند الاستلام والمحافظ المحلية، وقنوات التواصل كزر واتساب، وساعات العمل، والصفحات القانونية، ونبرة الخطاب.
- استخدم الترجمة الآلية مسودةً فقط، ثم أسند المراجعة إلى متحدث أصلي يعرف مجال عملك.
- أنشئ مسردًا للمصطلحات يثبّت الترجمة المعتمدة لكل مصطلح في الموقع كله.
- الناس يبحثون بالعربية بطريقة مختلفة، وأحيانًا بمصطلحات إنجليزية أو بحروف لاتينية، فابحث عن الكلمات المفتاحية لكل لغة على حدة، كما يشرح دليل الكتابة لمحركات البحث.
- طول النص يختلف بين اللغتين، فصمّم أزرارًا وبطاقات مرنة، واختبر التصميم بالمحتوى الحقيقي لا بنص تجريبي.
- الصور التي تحمل نصًا تحتاج إلى نسختين، والصور ذات الاتجاه، كشخص ينظر نحو النص أو سهم يشير إليه، قد تحتاج إلى بديل في النسخة العربية.
مبدّل اللغة: تفاصيل صغيرة تصنع فرقًا
- اكتب اسم كل لغة بحروفها: «English» في الصفحة العربية، و«العربية» في الصفحة الإنجليزية.
- تجنب الأعلام، فالعلم يمثل دولة، والعربية لغة دول كثيرة، وكذلك الإنجليزية.
- ضع المبدّل في المكان نفسه في كل الصفحات، وأظهره على الهاتف دون أن يضطر الزائر إلى فتح عدة قوائم.
- اجعله يفتح الصفحة المقابلة للصفحة الحالية، لا الصفحة الرئيسية. وإذا لم يكن للصفحة مقابل، فوجّهه إلى أقرب قسم مناسب بدلًا من صفحة خطأ.
- استخدم رابطًا حقيقيًا يحمل عنوان الصفحة الأخرى، لتكتشفه برامج الزحف.
hreflang وتحسين محركات البحث للغتين
تحتاج كل صفحة إلى إشارات hreflang تسرد نسختها العربية ونسختها الإنجليزية، إضافة إلى x-default، بعناوين كاملة وبشكل متبادل. ولكل نسخة لغوية وسم canonical يشير إلى نفسها، لا إلى النسخة الأخرى، فالنسختان ليستا محتوى مكررًا. ولكل لغة عنوان صفحة ووصف ونصوص بديلة للصور خاصة بها، فلا تترك وصفًا إنجليزيًا على صفحة عربية. وأدرج النسختين في خريطة الموقع. والتفاصيل التقنية في أساسيات السيو التقني.
قائمة تحقق قبل الإطلاق
- لكل لغة عنوان مستقل، ولا تحويل تلقائي حسب الموقع الجغرافي أو لغة المتصفح.
- السمتان lang وdir صحيحتان في كل صفحة، والأرقام والنصوص الإنجليزية داخل العربية معزولة الاتجاه عند الحاجة.
- التخطيط مبني بالخصائص المنطقية، والأيقونات الاتجاهية وحدها منعكسة.
- الخطوط محمّلة بالأوزان اللازمة فقط، ومقروءة في اللغتين على الهاتف.
- الحقول تقبل الأرقام المشرقية وتحولها، وحقول البريد والهاتف باتجاه ltr.
- المحتوى موطَّن ومراجَع من متحدث أصلي، والصور التي تحمل نصًا لها نسختان.
- مبدّل اللغة يفتح الصفحة المقابلة، ويحمل اسم كل لغة بحروفها.
- إشارات hreflang متبادلة مع x-default، وcanonical كل لغة يشير إلى نفسها، وخريطة الموقع تضم اللغتين.
- اختُبر الموقع كاملًا بالعربية على هاتف حقيقي، لا على شاشة الحاسوب وحدها.
