تصميم المواقع العربية RTL: ما الذي يكسر الواجهة ولماذا لا تكفي الترجمة

تحديث: صُحّحت هذه الصفحة وأعيدت كتابتها في سبتمبر 2026 اعتماداً على إرشادات W3C وتوثيق MDN، وحُذفت منها نسب وأرقام لم نجد لها مصدراً.

تصميم المواقع العربية RTL لا يعني ترجمة النصوص ثم قلب الصفحة. أول خطوة، كما تنص إرشادات W3C للنص من اليمين إلى اليسار في HTML، هي إضافة dir="rtl" إلى عنصر html حين يكون اتجاه المستند من اليمين إلى اليسار. بعدها تظهر الأعطال الحقيقية: هوامش مبنية على اليسار، وأرقام تقفز داخل الجملة، وأيقونات تشير إلى الاتجاه الخطأ. هذا الدليل يشرح ما الذي ينكسر، ولماذا، وكيف تصلحه من الجذر.

لماذا لا تكفي الترجمة لصنع موقع عربي؟

الترجمة تغيّر الكلمات، أما الاتجاه فيغيّر بنية الصفحة كلها. تذكر W3C أن إضافة dir="rtl" إلى عنصر html تُحدث آثاراً في الصفحة بأكملها، منها:

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

العبارة الأخيرة هي مفتاح المشكلة: «إذا كُتبت أوراق الأنماط بطريقة صحيحة». أغلب المواقع المترجمة كُتبت أنماطها على افتراض أن البداية في اليسار.

ما الخطوة الأولى الصحيحة في HTML؟

1. أضف dir="rtl" وlang="ar" معاً إلى عنصر html.
2. لا تفترض أن lang يكفي؛ تؤكد W3C أن إعلان اللغة لا يحدد الاتجاه، وأن الاتجاه يجب أن يُعلن دائماً بخاصية dir.
3. تحت عنصر html، لا تستخدم dir على العناصر البنيوية إلا في الحالات النادرة التي يتغير فيها الاتجاه الأساسي فعلاً.
4. في النماذج والنصوص التي يدخلها المستخدم، استخدم dir="auto" ليكتشف المتصفح الاتجاه تلقائياً.

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

لماذا تنكسر الواجهة بعد تفعيل الاتجاه من اليمين إلى اليسار؟

السبب الأكثر شيوعاً هو التنسيق المادي. حين تكتب margin-left أو padding-right أو text-align: left، فأنت تربط التصميم بجهة ثابتة لا تنعكس مع الاتجاه. توصي W3C صراحة بعدم استخدام CSS لضبط الاتجاه الأساسي، وباستخدام القيم المنطقية start وend في الهوامش والحشوات والمحاذاة، وتجنب خصائص HTML التي قيمها right وleft.

ويشرح توثيق MDN للخصائص المنطقية في CSS أن CSS صُممت في البداية بإحداثيات مادية فقط، ثم أضافت وحدة الخصائص المنطقية مكافئات تعتمد على اتجاه التدفق: block-start وblock-end وinline-start وinline-end بدل top وbottom وleft وright.

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

لماذا تقفز الأرقام والكلمات الإنجليزية داخل الجملة العربية؟

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

والحلول التي توصي بها W3C:

• إذا عرفت اتجاه كل نص، فأحط كل عبارة معاكسة الاتجاه بوسم مثل span مع خاصية dir المناسبة.
• إذا كان النص يُدرج وقت التشغيل ولا تعرف اتجاهه، مثل اسم مستخدم أو عنوان منتج، فأضف dir="auto" إلى الوسم المحيط به.
• إن لم يوجد وسم محيط، فاستخدم عنصر bdi لعزله.
• في الحالات الصعبة يمكن إضافة علامة ‏ أو ‎ بعد المقطع مباشرة.

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

ما الذي يميز الخط العربي في التصميم؟

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

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

ما قائمة الفحص قبل إطلاق النسخة العربية؟

1. عنصر html يحمل dir="rtl" وlang="ar".
2. لا توجد خصائص left وright في أوراق الأنماط إلا حيث يجب أن تبقى الجهة ثابتة فعلاً.
3. الأيقونات الاتجاهية، مثل أسهم «التالي» و«السابق»، تنعكس، بينما لا تنعكس الأيقونات غير الاتجاهية كالشعارات.
4. حقول النماذج التي يدخل فيها المستخدم نصاً حراً تستخدم dir="auto".
5. الأسماء والعناوين القادمة من قاعدة البيانات معزولة بـbdi أو dir="auto".
6. الجداول تبدأ أعمدتها من اليمين، ومحاذاة الأرقام فيها متسقة.
7. لا تباعد حروف في العناوين العربية يكسر الاتصال.

ما الذي ينبغي الانتباه إليه؟

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

الخلاصة: كيف تبدأ؟

إذا كان موقعك مترجماً ويبدو «مقلوباً» في أماكن، فابدأ من عنصر html، ثم استبدل الخصائص المادية بالمنطقية، ثم اعزل النصوص المختلطة. هذه الخطوات الثلاث، كما تصفها W3C وMDN، تحل أغلب ما تراه من أعطال، وتجعل النسخة العربية جزءاً من التصميم لا ملحقاً به.

الأسئلة الشائعة

كيف أجعل موقعي يدعم الاتجاه من اليمين إلى اليسار؟

أضف dir="rtl" وlang="ar" إلى عنصر html، ثم استبدل التنسيقات المبنية على left وright بالخصائص المنطقية.

هل يمكن ضبط اتجاه الصفحة عبر CSS بخاصية direction؟

توصي W3C بعدم ذلك، واستخدام خاصية dir في HTML للاتجاه الأساسي.

ما الخصائص المنطقية في CSS؟

خصائص تعتمد على اتجاه الكتابة مثل inline-start وinline-end، فتنعكس تلقائياً في الصفحات العربية.

لماذا تظهر الأرقام أو الكلمات الإنجليزية في مكان خاطئ داخل الجملة العربية؟

بسبب خوارزمية النص ثنائي الاتجاه؛ والحل عزل المقطع بوسم مع dir أو بعنصر bdi.

هل يكفي ترجمة النصوص لإطلاق نسخة عربية من الموقع؟

لا، فالاتجاه يغيّر المحاذاة والجداول والنماذج والأيقونات، والخط العربي يحتاج معاملة خاصة.