افتح النسخة العربية من كثير من المواقع ثنائية اللغة في لبنان أو الخليج، وستظهر المشكلات خلال ثوانٍ. القائمة تُقرأ من اليمين لليسار، لكن الأسهم ما زالت تشير في الاتجاه الخاطئ. رقم الهاتف يظهر مقلوباً داخل جملة عربية. الخط يبدو رفيعاً ومضغوطاً مقارنة بنظيره الإنجليزي. وعلى الجوال تظهر رسالة الخطأ في النموذج على الجانب الخطأ من الحقل. لا شيء معطّل تماماً، لكن كل شيء يبدو «مش مظبوط»، والزائر يلاحظ ذلك.
تصميم مواقع عربية RTL هو بناء واجهات تبدو طبيعية للقارئ العربي من اليمين لليسار، لا نسخاً معكوسة أُضيفت في اللحظة الأخيرة. ويشمل اتجاه التخطيط، والخطوط، والنصوص المختلطة اللغات، والنماذج، والأرقام، والأيقونات، والأداء، والسيو. في هذا الدليل نعرض أفضل الممارسات للمواقع ثنائية اللغة عربي-إنجليزي وثلاثية اللغة عربي-إنجليزي-فرنسي، وأكثر الأخطاء شيوعاً، وكيف تخطط لموقع تبدو فيه كل لغة مصممة لا مترجمة.
لماذا يحتاج تصميم المواقع العربية إلى تخطيط خاص؟
في لبنان نادراً ما تكون العربية اللغة الوحيدة للموقع، وفي الخليج تحضر الإنجليزية إلى جانبها في كل القطاعات تقريباً. لذلك تكون معظم المشاريع ثنائية أو ثلاثية اللغة منذ البداية، ومع ذلك يُصمم كثير منها بالإنجليزية أولاً ثم تُضاف العربية في النهاية بعكس ملف التنسيق. والنتيجة متوقعة: الموقع العربي يعمل تقنياً لكنه يُقرأ بصعوبة.
والأمر مهم تجارياً. فالزائر العربي يحكم على المصداقية بسرعة، والواجهة العربية الركيكة توحي بأن النشاط لا يخدمه فعلاً. وفي الخليج خصوصاً، تعتبر الجهات الحكومية والمصارف والشركات الكبرى النسخة العربية المتقنة حداً أدنى لا ميزة إضافية. ولأن ضعف تطبيق RTL يؤثر في سهولة الاستخدام والسرعة والوسوم، فإنه يؤثر في السيو أيضاً، كما نشرح في دليل السيو العربي.
عكس تخطيط الصفحة من اليمين لليسار
عكس تخطيط الصفحة من اليمين لليسار يعني قلب الاتجاه الأفقي للصفحة لتُقرأ بطبيعية من اليمين: القائمة تبدأ من اليمين، والشعار ينتقل غالباً إلى اليمين، والأشرطة الجانبية تتبادل مواقعها، والنص يُحاذى لليمين، والتقدم يسير من اليمين إلى اليسار.
حدّد الاتجاه من جذر الصفحة
اكتب الاتجاه في المستند نفسه: <html lang="ar" dir="rtl"> للصفحات العربية. عندها يعكس المتصفح تلقائياً محاذاة النص وترتيب أعمدة الجداول ومحاذاة عناصر النماذج. وتجنب تطبيق الاتجاه على أجزاء متفرقة إلا لمحتوى مكتوب فعلاً من اليسار لليمين.
استخدم الخصائص المنطقية في CSS
بدل كتابة تنسيقات منفصلة لليمين واليسار، استخدم الخصائص المنطقية مثل margin-inline-start وpadding-inline-end وinset-inline-start، فهي تتكيف تلقائياً مع اتجاه المستند، ويخدم ملف تنسيق واحد العربية والإنجليزية والفرنسية. والأطر الشائعة تدعم ذلك: Bootstrap يوفر نسخاً لـ RTL، وTailwind يقدم صيغاً مخصصة. والبناء بهذه الطريقة من اليوم الأول أرخص بكثير من تعديل تصميم بُني لليسار.
الأيقونات: اعكس الاتجاهية واترك الثابتة
الأيقونات التي توحي باتجاه أو تسلسل يجب أن تُعكس: أسهم الرجوع والتالي، والأسهم الصغيرة في القوائم والشرائح، وأزرار «التالي»، ومؤشرات التقدم. أما الأيقونات التي تمثل أشياء حقيقية أو رموزاً عالمية فلا تُعكس: الشعارات، وعلامة الصح، وعدسة البحث، والساعة، وزر التشغيل. والخطأ في أي من الاتجاهين يجعل الواجهة تبدو ركيكة.
الصور والرسوم البيانية
لا تحتاج الصور غالباً إلى العكس، لكن الصور التي تحتوي نصاً تحتاج نسخاً عربية. والرسوم البيانية والخطوط الزمنية يجب أن تُقرأ من اليمين لليسار، مع ترتيب المحاور والمفاتيح وفقاً لذلك، والشرائح المتحركة يجب أن تتحرك في الاتجاه الذي يتوقعه القارئ العربي.
الخطوط العربية للمواقع
اختيار الخطوط العربية للمواقع هو أكثر ما يصنع الفرق البصري بين موقع عربي فاخر وآخر يبدو مرتجلاً.
اختر خطوطاً مصممة للعربية
اختر خطاً صُمم بدعم عربي حقيقي بدل الاعتماد على الخط البديل لعائلة لاتينية. هناك عائلات تجمع العربية واللاتينية بانسجام، مثل IBM Plex Sans Arabic وعائلتي Noto Naskh وNoto Kufi، وتوفر Google Fonts خيارات شائعة مثل Cairo وTajawal وAlmarai. وللعلامات التجارية، تأكد أن الأسلوبين العربي واللاتيني متقاربان في السماكة والشخصية.
اضبط الحجم وتباعد الأسطر
تبدو الحروف العربية عادةً أصغر من اللاتينية بالحجم نفسه، مع صواعد عالية ونوازل عميقة. لذلك تستفيد معظم التصاميم العربية من حجم أساسي أكبر قليلاً وتباعد أسطر أوسع من النسخة الإنجليزية. واختبر فقرات حقيقية لا العناوين فقط.
تجنّب عادات التصميم اللاتيني
بعض عادات التصميم اللاتيني تكسر العربية. فتباعد الحروف قد يقطع الوصل بين الحروف العربية، لذا أبقِه صفراً. ولا توجد في العربية حروف كبيرة، فتحويل النص إلى أحرف كبيرة لا يفعل شيئاً مفيداً، والمائل المصطنع يشوّه الحروف. ومحاذاة النص بالضبط من الجانبين قد تخلق فراغات كبيرة بين الكلمات العربية على الشاشات الصغيرة، لذا تكون المحاذاة لليمين غالباً أنظف. استخدم السماكة والحجم واللون للتأكيد بدلاً من ذلك.
الأداء في تصميم مواقع عربية RTL
قد تكون ملفات الخطوط العربية كبيرة. حمّل الأوزان التي تستخدمها فقط، وفضّل الصيغ الحديثة مثل WOFF2، وفكّر في تقليص مجموعة الحروف، واضبط font-display لتجنب النص غير المرئي. فالخطوط الثقيلة سبب شائع لضعف مؤشرات الويب الأساسية في الصفحات العربية مقارنة بالإنجليزية.
النصوص المختلطة: الأرقام والعلامات وأرقام الهواتف
النص ثنائي الاتجاه هو المكان الذي تفشل فيه مواقع كثيرة بصمت. فالجمل العربية تحتوي باستمرار عناصر من اليسار لليمين: أسماء علامات إنجليزية، ورموز منتجات، وأسعار، وعناوين بريد، وروابط، وأرقام هواتف. خوارزمية المتصفح تعالج الحالات البسيطة، لكن علامات الترقيم والأرقام على أطراف العبارة قد تقفز إلى الجانب الخطأ.
ضع المحتوى المختلط أو الذي يُدخله المستخدم داخل عنصر <bdi>، أو استخدم dir="auto" في الحقول والحاويات التي لا يمكن توقع لغتها، ليعزلها المتصفح بشكل صحيح. واعرض أرقام الهواتف وعناوين البريد من اليسار لليمين داخل النص العربي، واختبر جملاً مثل «اتصل بنا على +961 1 234 567» أو «منتجات Apple الأصلية» على عدة متصفحات.
الأرقام العربية أم الهندية؟
يمكن أن يستخدم النص العربي الأرقام العربية الغربية (0–9) أو الأرقام الهندية (٠–٩). ويختلف الاستخدام حسب البلد والسياق: الأرقام الغربية شائعة في لبنان ومنتشرة على الإنترنت في الخليج، بينما تظهر الهندية في سياقات أكثر رسمية. اختر اصطلاحاً واحداً للموقع والتزم به، وتذكّر أن معظم المستخدمين يكتبون الأرقام الغربية عند البحث، وهذا مهم للأسعار والسنوات وأرقام الموديلات.
نماذج تعمل بالعربية
النماذج هي المكان الذي تكلّفك فيه أخطاء التصميم طلبات حقيقية. يجب أن تُحاذى التسميات والنصوص الإرشادية ورسائل الخطأ لليمين في العربية. أما الحقول التي تحتوي دائماً بيانات من اليسار لليمين، كالبريد والهاتف والروابط، فيجب أن تحتفظ باتجاه الإدخال من اليسار حتى في الصفحات العربية، وإلا تصرف المؤشر وعلامات الترقيم بشكل غريب أثناء الكتابة.
ويجب أن يقبل التحقق الأسماء العربية، وألا يفرض الإدخال بالحروف اللاتينية دون ضرورة، وأن تقبل حقول الهاتف الصيغ المحلية مع رمز البلد أو بدونه. واكتب رسائل الخطأ بعربية صحيحة لا بترجمة آلية، واختبر كل نموذج على الجوال بالعربية، فهناك تحدث معظم الطلبات الحقيقية في لبنان والخليج.
بناء موقع ثنائي اللغة عربي إنجليزي
الموقع ثنائي اللغة عربي إنجليزي يحتاج أكثر من مجموعتين من النصوص. خطط لهذه العناصر منذ البداية:
- مفتاح تغيير اللغة: اكتب أسماء اللغات بأحرفها («العربية»، «English»، «Français») دون أعلام.
- صفحات متقابلة: كل صفحة تربط بنظيرتها ليبقى الزائر في السياق نفسه.
- تكافؤ المحتوى: الصفحات الأساسية والنماذج ومسارات التحويل موجودة بكل اللغات.
- كتابة أصيلة: محتوى عربي يكتبه أو يكيّفه كتّاب عرب لا الترجمة الآلية.
- اختبار منفصل: مراجعة كل نسخة لغوية واختبارها على أجهزتها.
وللسيو، اربط النسخ اللغوية بوسوم hreflang وامنح كل صفحة رابطها الخاص بدل تبديل اللغة عبر سكربت على العنوان نفسه. ويشرح دليلنا عن السيو متعدد اللغات طريقة الإعداد.
المواقع ثلاثية اللغة: إضافة الفرنسية
تضيف أنشطة لبنانية كثيرة الفرنسية لجمهور التعليم والصحة والمنتجات الفاخرة والضيافة. والموقع الثلاثي يجمع لغة من اليمين ولغتين من اليسار، ما يجعل الخصائص المنطقية ونظام المكونات أكثر قيمة. النص الفرنسي أطول عادةً من الإنجليزي، والعربي يحتاج غالباً مساحة عمودية أكبر، فصمّم الأزرار والقوائم والبطاقات لتتمدد بمرونة بدل العروض الثابتة. وقرر مبكراً هل سيكون كل المحتوى بثلاث لغات أم ستبقى بعض الأقسام ثنائية، واجعل مفتاح اللغة صادقاً في ذلك.
إمكانية الوصول في تصميم مواقع عربية RTL
التصميم من اليمين لليسار وإمكانية الوصول متلازمان. فقارئات الشاشة تعتمد على خاصيتي lang وdir الصحيحتين لنطق المحتوى، لذا حدد أيضاً تغيّر اللغة داخل الصفحة، كاقتباس إنجليزي داخل نص عربي. ويجب أن يتبع التنقل بلوحة المفاتيح الترتيب المرئي، وتنطبق قواعد التباين على النص العربي، والأوزان العربية الرفيعة جداً يصعب قراءتها بأحجام صغيرة. ويشرح دليل إمكانية الوصول إلى الويب المعايير الأشمل.
أفضل ممارسات تصميم RTL: قائمة ما قبل الإطلاق
قبل إطلاق أي نسخة عربية، راجع أفضل ممارسات تصميم RTL هذه:
- الاتجاه واللغة محددان في جذر كل صفحة عربية.
- التخطيط معكوس بالخصائص المنطقية، والأيقونات الاتجاهية معكوسة.
- الخطوط مضبوطة: خط عربي، حجم، تباعد أسطر، ولا تباعد بين الحروف.
- النص المختلط مُختبر: الهواتف والأسعار والبريد والعلامات تظهر بشكل صحيح.
- النماذج مُختبرة على الجوال بالعربية، مع التحقق ورسائل الخطأ.
وقِس سرعة النسخة العربية على الجوال منفصلة، واطلب من ناطقين أصليين بالعربية من أسواقك المستهدفة مراجعة الموقع قبل الإطلاق. ويوضح مقالنا عن تصميم الويب بأسلوب الجوال أولاً لماذا يبدأ كل ذلك من الشاشة الصغيرة.
أخطاء شائعة في تصميم مواقع عربية RTL
تتكرر الأخطاء نفسها من مشروع إلى آخر: التصميم بالإنجليزية وحدها ثم عكس ملف التنسيق في النهاية، واستخدام خط لاتيني مع خط عربي بديل تلقائي، وعكس كل الأيقونات بما فيها الشعارات وعلامة الصح، وترك أرقام الهواتف والأسعار تنقلب داخل الجمل العربية، واستخدام الأعلام لاختيار اللغة، وترجمة نصوص الواجهة آلياً، ونسيان أن الصفحات العربية تحتاج اختباراً خاصاً على أجهزة حقيقية.
ومن الأخطاء الأقل وضوحاً تجاهل التاريخ والتقويم. فبعض المواقع الموجهة للخليج، خصوصاً الحكومية والدينية والتعليمية، تحتاج عرض التاريخ الهجري إلى جانب الميلادي، بينما يكتفي معظم الجمهور اللبناني بالميلادي. حدد ذلك حسب جمهورك منذ البداية. وكل هذه الأخطاء سهلة التجنب حين يُخطط تصميم مواقع عربية RTL منذ اليوم الأول بدل إضافته في النهاية، وحين يشارك ناطق أصلي بالعربية في المراجعة قبل الإطلاق لا بعده، ويُعامل تصميم مواقع عربية RTL كجزء أساسي من المشروع لا كمهمة ترجمة.
الأسئلة الشائعة
ما هو تصميم مواقع عربية RTL؟
هو تصميم المواقع وبناؤها لتُقرأ بطبيعية من اليمين لليسار للناطقين بالعربية، ويشمل عكس التخطيط، والخطوط العربية، والتعامل الصحيح مع النصوص المختلطة، والنماذج المناسبة للعربية، والأرقام الملائمة، ووسوم اللغة الصحيحة.
هل يكفي عكس الموقع الإنجليزي للحصول على النسخة العربية؟
العكس هو الخطوة الأولى فقط. تحتاج أيضاً إلى خطوط وتباعد عربي، وسلوك صحيح للأيقونات، ومعالجة دقيقة للأرقام والكلمات الإنجليزية داخل النص العربي، ونماذج مهيأة للعربية، ومحتوى أصيل. والمواقع المبنية بالخصائص المنطقية تجعل ذلك أسهل بكثير.
ما أفضل خط عربي للمواقع؟
اختر خطوطاً مصممة بدعم عربي حقيقي، مثل IBM Plex Sans Arabic وعائلات Noto العربية وCairo وTajawal وAlmarai، ونسّقها مع أسلوب لاتيني متوافق، وحمّل الأوزان التي تحتاجها فقط للحفاظ على السرعة.
هل أستخدم الأرقام العربية أم الهندية؟
كلاهما صحيح، فاختر حسب جمهورك وعلامتك ثم التزم بالاختيار. الأرقام الغربية شائعة على الإنترنت في لبنان والخليج، ومعظم المستخدمين يكتبونها عند البحث، وهذا يستحق الاعتبار في الأسعار وأرقام الموديلات.
كيف أصمم موقعاً بثلاث لغات عربي إنجليزي فرنسي؟
استخدم نظام تصميم واحداً مبنياً على الخصائص المنطقية، وصمم مكونات مرنة للنص الفرنسي الأطول والعربي الأعلى، وامنح كل لغة روابطها مع hreflang، واكتب أسماء اللغات بأحرفها، واجعل ناطقين أصليين يكتبون كل نسخة ويراجعونها.
ابنِ تجربة عربية تبدو أصيلة
يعرف الزائر فوراً هل صُمم الموقع العربي له أم حُوّل إليه. وتصميم مواقع عربية RTL المتقن يجمع العكس الصحيح والخطوط المدروسة والمعالجة الدقيقة للنصوص المختلطة والنماذج المهيأة والمحتوى الأصيل، ويعود بالثقة والتحويلات والظهور في البحث في لبنان والخليج.
إذا كنت تخطط لموقع ثنائي أو ثلاثي اللغة، أو كانت نسختك العربية الحالية لا تبدو صحيحة، فإن فريق Creative 4 All يصمم المواقع ويطورها بالعربية والإنجليزية والفرنسية كلغات أصلية. تعرّف إلى خدمات تصميم وتطوير المواقع في لبنان واطلب مراجعة لموقعك وعرض سعر.
