أخطاء تصميم الموقع من اليمين لليسار (RTL)
الجواب المختصر: معظم أخطاء الاتجاه في المواقع العربية تأتي من ثلاثة مصادر: قالب صُمم أصلًا للإنجليزية ثم «قُلب» بقواعد CSS متفرقة، وأيقونات عُكست كلها دون تمييز، وحقول ونصوص لاتينية داخل صفحة عربية لم يُحدد اتجاهها. الإصلاح يبدأ من وضع dir="rtl" على عنصر html، واستخدام خصائص CSS المنطقية (start وend) بدل اليسار واليمين، ثم مراجعة الأيقونات واحدة واحدة.
ربما رأيت هذا في موقعك: سهم «التالي» يشير إلى الوراء، أو علامة الصح مقلوبة، أو رقم الهاتف يظهر مقطعًا، أو حقل البريد الإلكتروني يبدأ الكتابة من اليمين فتختلط النقطة والرمز @. هذه ليست مشاكل كبيرة واحدة، بل تفاصيل صغيرة متراكمة تجعل الموقع يبدو «مترجمًا» وغير مهتم به.
أولًا: الأساس الصحيح
توصي W3C في إرشاداتها عن العربية والعبرية في HTML بإضافة dir="rtl" إلى وسم html متى كان اتجاه الصفحة العام من اليمين لليسار. عندها، بحسب الشرح نفسه، تصبح الفقرات محاذاة لليمين، ويتدفق النص ثنائي الاتجاه بشكل صحيح، وتبدأ حقول الإدخال من اليمين افتراضيًا، وإن كُتبت ملفات التنسيق بشكل صحيح فإن CSS يعكس التخطيط تلقائيًا.
وتقول W3C بوضوح: لا تستخدم CSS لتحديد الاتجاه الأساسي للصفحة، بل استخدم سمة dir، لأن معلومة الاتجاه يجب أن تبقى متاحة حتى لو لم يُحمّل ملف التنسيق. وفي المقابل، استخدم القيم المنطقية مثل start وend للهوامش والحشوات والمحاذاة.
جدول الأخطاء: العَرَض والسبب والإصلاح
| ما تراه | السبب | الإصلاح |
|---|---|---|
| الصفحة عربية لكن العناصر محاذاة لليسار | لا توجد سمة dir="rtl" على html، أو وُضعت على عنصر داخلي فقط | ضع السمة على html، واحذف قواعد direction المتفرقة |
| هوامش وأيقونات في الجهة الخاطئة من الأزرار | CSS مكتوب بـ margin-left وpadding-right | استخدم margin-inline-start وأخواتها |
| سهم «رجوع» يشير لليسار | الأيقونة لم تُعكس | اعكس أيقونات الاتجاه والتنقل فقط |
| علامة الصح أو شعار مقلوب | عكس كل الأيقونات دفعة واحدة | لا تعكس الشعارات والرموز العالمية |
| البريد الإلكتروني يُكتب من اليمين ويتبعثر | حقل لاتيني يرث اتجاه الصفحة | اجعل حقول البريد والروابط باتجاه ltr |
| رقم الهاتف أو كود الخصم يظهر بترتيب غريب | رقم أو نص لاتيني ملاصق لعلامات ترقيم عربية | اعزل الرقم داخل عنصر مستقل أو bdi |
| سلايدر الصور يتحرك بعكس المتوقع | مكتبة لم تُضبط على RTL | فعّل إعداد RTL في المكتبة أو اختبرها جيدًا |
| مسار التنقل (Breadcrumb) بأسهم معكوسة | فاصل مكتوب كحرف «>» ثابت | استخدم فاصلًا يتبع الاتجاه أو أيقونة تُعكس |
تفاصيل أهم ثلاثة أخطاء
1. «قلب» القالب بدل بنائه للاتجاهين
كثير من القوالب الجاهزة تُكتب للإنجليزية، ثم يضاف لها ملف rtl.css يقلب كل يسار إلى يمين. هذا يعمل إلى أن يُعدّل أحد شيئًا في الملف الأصلي وينسى المقابل. تشرح MDN أن الخصائص المنطقية في CSS تعرّف الاتجاهات نسبة إلى اتجاه الكتابة لا إلى الاتجاه الفيزيائي، فيظهر المحتوى كما يجب عند تغيير اللغة. أي أن margin-inline-start تعني «بداية السطر»، وهي اليمين في العربية واليسار في الإنجليزية، دون ملف ثانٍ.
2. عكس الأيقونات بلا تمييز
إرشادات Apple للواجهات من اليمين لليسار تلخص القاعدة جيدًا، وهي تنطبق على المواقع أيضًا:
- اعكس الأيقونات التي تدل على حركة للأمام أو للخلف، وأزرار التنقل مثل الرجوع والتالي والسابق.
- لا تعكس الشعارات ولا الرموز العالمية مثل علامة الصح.
- تجنب عكس الأيقونات التي تمثل أشياء من الواقع، كالساعة، ما لم تكن تدل على اتجاه.
مثال شائع في المواقع الأردنية: أيقونة عربة التسوق تُعكس مع الصفحة. العربة شيء واقعي، فلا داعي لعكسها في الغالب، أما سهم «متابعة الشراء» فيجب أن يُعكس.
3. النصوص اللاتينية داخل الصفحة العربية
المواقع الأردنية تمزج اللغتين باستمرار: اسم منتج بالإنجليزية، بريد إلكتروني، رابط إنستغرام، كود خصم. تشرح MDN أن سمة dir تقبل القيم ltr وrtl وauto، وأن auto تترك المتصفح يحدد الاتجاه من محتوى العنصر. استخدم ltr لحقول البريد الإلكتروني والروابط وأرقام البطاقات، وauto لحقول قد يكتب فيها الزائر بأي لغة، كحقل الرسالة في نموذج التواصل.
وبخصوص الأرقام، تنبه إرشادات Apple إلى ألا يُعكس ترتيب الأرقام داخل الرقم الواحد، كرقم الهاتف أو رقم البطاقة، مهما كان اتجاه النص حوله.
الخطوط والمحاذاة: أخطاء أصغر لكنها ظاهرة
إلى جانب الاتجاه، هناك تفاصيل تجعل الصفحة العربية تبدو غير مرتبة:
- محاذاة الفقرات للوسط في نصوص طويلة. المحاذاة لليمين أسهل في القراءة، وتوصي إرشادات Apple بمحاذاة الفقرة حسب لغتها، أي أن فقرة إنجليزية من عدة أسطر داخل صفحة عربية تبقى محاذاة لليسار.
- قائمة فيها عناصر بلغتين يُحاذى كل عنصر فيها على هواه. القاعدة في الإرشادات نفسها: محاذاة موحدة لكل عناصر القائمة.
- أشرطة التقدم والتقييم بالنجوم: في الواجهة العربية يبدأ التقدم من اليمين، فاحرص على أن يتبع شريط خطوات الطلب هذا الاتجاه.
طريقة فحص سريعة لموقعك
- افتح الصفحة الرئيسية وصفحة منتج وصفحة التواصل على الجوال.
- تتبع كل سهم: هل يشير في الاتجاه الذي ستذهب إليه فعلًا؟
- اكتب بريدًا إلكترونيًا ورقم هاتف في نموذج التواصل وراقب طريقة ظهورهما.
- ابحث عن جملة فيها كلمة إنجليزية وعلامة ترقيم في نهايتها، وانظر أين تظهر النقطة.
- افتح القائمة الجانبية على الجوال: هل تنزلق من الجهة الصحيحة؟
الأسئلة الشائعة
هل أحتاج قالبًا خاصًا بالعربية؟
ليس بالضرورة، لكن اختر قالبًا يذكر دعم RTL صراحة، واختبره بمحتوى عربي حقيقي قبل الشراء أو الاعتماد.
موقعي ثنائي اللغة، فكيف أتعامل مع الاتجاه؟
اجعل لكل لغة صفحاتها، وضع dir="rtl" وlang="ar" على صفحات العربية، وdir="ltr" على صفحات الإنجليزية. والخصائص المنطقية في CSS تجعل التصميم نفسه يعمل في الاتجاهين.
هل تؤثر أخطاء الاتجاه على ظهور الموقع في البحث؟
لا توجد إشارة رسمية إلى ذلك، لكنها تؤثر على تجربة الزائر وثقته، وهذا ما يهم في النهاية.
هل أعكس الصور والرسوم؟
الصور الفوتوغرافية لا. أما الرسوم التوضيحية التي فيها اتجاه، كسهم أو خط زمني، فقد تحتاج نسخة معكوسة.
إن كان موقعك العربي يبدو «مقلوبًا» في بعض أجزائه ولا تعرف من أين تبدأ، أرسل لنا لقطات من الصفحات ونرتب لك قائمة إصلاح واضحة.