تصميم المواقع العربية باتجاه RTL: 12 خطأ تجعل موقعك يبدو مترجماً
أغلب المواقع العربية تبدو مترجمة لأن التصميم الإنجليزي عُكس فقط. إليك أكثر 12 خطأ نراها في اتجاه RTL — في التخطيط والخطوط والأرقام والنماذج — وكيف تُعالَج.
أغلب المواقع العربية التي "تبدو مترجمة" تفشل للسبب نفسه: عُكس التصميم الإنجليزي من اليمين إلى اليسار ثم وُضع النص العربي فيه، دون تصميم يراعي طريقة قراءة العربية فعلاً. التصميم الحقيقي باتجاه RTL يعني أن تقرّر ما الذي يُعكس وما الذي لا يُعكس، وأن تتعامل مع الخط العربي بقواعده الخاصة، وأن تعالج الأرقام والنماذج والنصوص المختلطة بوعي.
نستعرض فيما يلي الأخطاء الاثني عشر الأكثر تكراراً التي نراها عند مراجعة المواقع العربية وثنائية اللغة لعملائنا في السعودية والخليج ومصر — وكيف يُعالَج كل منها.
التخطيط والاتجاه
1. عكس كل شيء. العناصر الاتجاهية يجب أن تُعكس — أسهم الرجوع والتقدم، وخطوات التقدم، ومسار التنقل، وشرائح العرض. أما غير الاتجاهية فلا تُعكس — زر التشغيل، وعلامة الصح، والساعة، والشعارات، وأدوات التحكم في الوسائط. عكس أيقونة التشغيل أو شعار العلامة التجارية علامة فورية على ضعف التنفيذ.
2. تحديد الاتجاه بخصائص يسار ويمين ثابتة. استخدام خصائص CSS الفيزيائية مثل margin-left وpadding-right وtext-align: left يعني أن كل صفحة عربية تحتاج إلى تعديلات يدوية تتباعد مع الوقت. استخدم الخصائص المنطقية مثل margin-inline-start وpadding-inline-end وtext-align: start ليعمل ملف تنسيق واحد في الاتجاهين.
3. نسيان خاصيتي lang وdir. يجب أن تعلن الصفحة lang="ar" وdir="rtl" على عنصر html. تعتمد عليهما قارئات الشاشة والمتصفحات ومحركات البحث، وهما الأساس لربط hreflang الصحيح بين النسختين العربية والإنجليزية.
4. شرائح عرض وخطوط زمنية تسير بالاتجاه الخاطئ. في العربية ينتقل "التالي" إلى اليسار ويتدفق الزمن من اليمين إلى اليسار. شريحة عرض ما زالت تُسحب من اليسار إلى اليمين، أو خارطة طريق تُقرأ بالعكس، تكسر تصوّر القارئ.
الخطوط والطباعة
5. الاعتماد على البديل العربي لخط لاتيني. كثير من خطوط العلامات التجارية لا تحتوي حروفاً عربية، فيلجأ المتصفح إلى خط نظام افتراضي لا ينسجم مع بقية التصميم. اختر خطاً عربياً حقيقياً وقرنه بالخط اللاتيني عن قصد ليبدوا عائلة واحدة.
6. نسخ ارتفاع السطر والأحجام من الإنجليزية. الحروف العربية لها صواعد أطول ونوازل أعمق، وتحتاج إلى ارتفاع سطر أكبر. كما يبدو النص العربي أصغر من الإنجليزي بالحجم نفسه، لذا يحتاج غالباً إلى حجم أكبر قليلاً.
7. إضافة تباعد بين الحروف. العربية خط متصل، والتباعد بين الحروف يقطع اتصالها ويجعل الكلمات تبدو مكسورة. اجعل التباعد صفراً في العربية، حتى لو كانت عناوينك الإنجليزية مضغوطة أو متباعدة.
8. الاعتماد على المائل والأحرف الكبيرة. لا توجد في العربية أحرف كبيرة ولا خط مائل حقيقي، فالتأكيد المبني على text-transform: uppercase أو المائل يختفي ببساطة. استخدم الوزن أو اللون للتأكيد بدلاً من ذلك.
الأرقام والنماذج والنص المختلط
9. أرقام هواتف وأسعار ورموز مبعثرة. أرقام الهواتف وأرقام الطلبات والبريد الإلكتروني والروابط تُكتب من اليسار إلى اليمين حتى داخل النص العربي. وإن لم تُعزل، قد يظهر رقم مثل "+966 5x xxx xxxx" بترتيب خاطئ. غلّفها لتحتفظ باتجاهها الخاص.
10. أرقام غير متّسقة. اختر إما الأرقام الغربية (123) أو الأرقام الهندية العربية (١٢٣)، واستخدمها باتّساق في الأسعار والتواريخ والجداول. الخلط بينهما في شاشة واحدة يبدو إهمالاً، وفي التطبيقات المالية والتجارة الإلكترونية يضر بالثقة.
11. حقول نماذج تعاند المستخدم. يجب أن تقبل حقول البريد والهاتف والروابط الإدخال من اليسار إلى اليمين حتى في الصفحة العربية، بينما تبقى حقول الاسم والعنوان من اليمين إلى اليسار. ويجب أن تُكتب رسائل الخطأ والنصوص الإرشادية والتحقق بالعربية أيضاً، لا أن تُترك بالإنجليزية.
12. الترجمة بدلاً من الكتابة. النص المترجم آلياً يبدو غريباً على المستخدم الخليجي، والتخطيطات المصمَّمة لطول النص الإنجليزي لا تناسب الصياغة العربية. يجب أن يكتب المحتوى العربي كاتب متمكّن من اللغة — أو يراجعه على الأقل — وأن يُختبر التصميم بالنص الحقيقي لا بنص مؤقت.
قائمة تحقق سريعة لاتجاه RTL
| البند | شكل النجاح |
|---|---|
| خصائص الاتجاه | عنصر html يحمل lang="ar" وdir="rtl" |
| CSS | خصائص منطقية دون يسار ويمين ثابتين |
| الأيقونات | الاتجاهية معكوسة، والبقية كما هي |
| الخط | خط عربي مخصّص وتباعد حروف صفري |
| الأرقام | نمط أرقام واحد، والمقاطع اللاتينية معزولة |
| النماذج | حقول البريد والهاتف LTR والرسائل بالعربية |
| السيو | hreflang يربط النسختين العربية والإنجليزية |
| المحتوى | مكتوب أو مراجَع بقلم عربي متمكّن |
لماذا يهم ذلك؟
العميل الخليجي يقرّر في الثواني الأولى إن كانت العلامة التجارية جادة. والموقع العربي الذي يُقرأ كترجمة يخبره أن النشاط لم يُبنَ من أجله.
إتقان اتجاه RTL نادراً ما يتطلب ميزانية إضافية؛ إنه قرار يُتّخذ في مرحلة التصميم. أما إضافة RTL إلى موقع إنجليزي مكتمل فتكلّف أكثر بكثير من تصميم الاتجاهين معاً من اليوم الأول.
الأسئلة الشائعة
هل يكفي استخدام إضافة لتحويل موقعي إلى RTL؟
قد تعكس الإضافة أو خيار القالب التخطيط، لكنها لا تختار خطك العربي، ولا تصلح الأيقونات المعكوسة خطأً، ولا تكتب محتوى عربياً طبيعياً. إنها نقطة بداية، لا تجربة عربية مكتملة.
هل يجب أن تكون النسخة العربية على نطاق منفصل؟
غالباً لا. أغلب الشركات تحقق نتائج أفضل بمجلدات لغة على نطاق واحد مثل /ar و/en، مربوطة بـ hreflang لتعرض محركات البحث النسخة المناسبة لكل مستخدم.
أي الأرقام يجب أن يستخدمها موقع سعودي؟
كلاهما مفهوم في السعودية، وكثير من العلامات الكبرى تستخدم الأرقام الغربية للأسعار والبيانات. الأهم هو الاتّساق في الموقع كله.
ابنِ تجربة عربية أصيلة
تصمّم Flowlix وتطوّر مواقع وتطبيقات ثنائية اللغة بالعربية والإنجليزية، ويُعامَل اتجاه RTL فيها جزءاً من نظام التصميم لا إضافة لاحقة. احجز استشارة مجانية عبر واتساب وسنراجع تجربتك العربية الحالية أو نحدد نطاق مشروع جديد. Flowlix استوديو لتصميم وتطوير المنتجات الرقمية في الإسماعيلية، مصر، يخدم العملاء في مصر والسعودية والخليج — فريق واحد للتصميم والتطوير، والذكاء الاصطناعي جزء من طريقة عملنا.