تصميم الويب من اليمين إلى اليسار (RTL): الأخطاء الشائعة وكيف تتجنّبها

دعم العربية في موقعك لا ينتهي عند كتابة dir="rtl" ثم الانتقال إلى المهمّة التالية. هذا الإعلان ضروري، لكنه يحلّ مشكلة واحدة فقط من ستّ مشكلات تكسر المواقع العربية بصريًا. الأيقونات تبقى مقلوبة، والهوامش تثبت على الجهة الخطأ، وأرقام الهواتف تنقلب أمام عين الزائر، والنماذج تحاذي يسارًا في صفحة تُقرأ من اليمين. سأعرض في هذا المقال الأخطاء الستّة الأكثر تكرارًا في تصميم الويب من اليمين إلى اليسار، ولكل خطأ سأشرح سببه التقني وحلّه العملي بشيفرة واحدة نظيفة لا أوراق أنماط مكرّرة.

أعمل مطوّر ويب مستقلًّا عن بُعد من فرنسا، وأخدم عملاء في الإمارات والسعودية وقطر، وأرى الموقع نفسه يصلني مرارًا: قالب أجنبي أُضيف إليه dir="rtl" فظنّ صاحبه أن العمل اكتمل. النتيجة موقع يقرأه الزائر الخليجي فيشعر أن تفاصيله “ليست في مكانها” دون أن يعرف لماذا. هذه التفاصيل تحديدًا هي ما سنفكّكه الآن، واحدًا واحدًا.

الخطأ الأول: الاكتفاء بـ dir=“rtl” وحده

الخطأ الأساس الذي تتفرّع منه البقية هو افتراض أن سطرًا واحدًا يكفي. صحيح أن ضبط lang="ar" و dir="rtl" على العنصر الجذري للصفحة هو الخطوة الأولى الصحيحة، وتوثيق W3C يؤكّد أنها الأساس السليم لأي محتوى عربي، لأنها تُعلِم المتصفّح ومحرّك البحث أن النص يُقرأ من اليمين وتقلب التدفّق العام للفقرات والقوائم.

لكن هذا الإعلان يقلب اتجاه النص فقط. هو لا يعرف أن سهم “التالي” في معرض الصور يجب أن يشير يسارًا الآن، ولا أن الهامش الذي كتبته margin-left يجب أن ينتقل إلى اليمين، ولا أن رقم هاتفك يحتاج عزلًا كي لا ينقلب. في مشاريعي أعدّ dir="rtl" نقطة البداية لا خطّ النهاية، وكل خطأ من الأخطاء الخمسة التالية يبدأ من هنا: من الظنّ أن السطر الواحد أنجز كل شيء.

الخطأ الثاني: الأيقونات والعناصر الاتجاهية التي لا تنعكس

بعد قلب اتجاه النص، تبقى العناصر التي تحمل معنى اتجاهيًا مشيرةً إلى الجهة الخطأ. سهم “السابق” و”التالي” في منزلقات الصور، وأيقونة الرجوع، وعلامة < في فتات التنقّل (breadcrumbs)، ومؤشّر القائمة المنسدلة، كلّها صُمّمت للقراءة من اليسار إلى اليمين، فتبدو في الصفحة العربية وكأنها تشير عكس حركة القراءة.

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

عمليًا، أعكس الأيقونة الاتجاهية بتحويل بصري بسيط يُطبَّق فقط حين يكون اتجاه الصفحة من اليمين إلى اليسار، عبر محدّد مثل [dir="rtl"] .icon-arrow. هكذا تبقى الأيقونة نفسها صالحة للاتجاهين، وأتحكّم يدويًا في أيّها ينعكس وأيّها يثبت، بدل ترك المتصفّح يخمّن.

الخطأ الثالث: الهوامش والحشو المثبّتة على اليسار واليمين

هذا أكثر الأخطاء انتشارًا وأخفّها ظهورًا في الفحص السريع. القالب الأصلي مليء بقواعد مثل margin-left و padding-right و left: 0 و text-align: left، وكلّها تثبّت الجهة فيزيائيًا. حين تقلب الصفحة إلى العربية، يبقى الهامش على اليسار بينما يجب أن ينتقل إلى اليمين، فتظهر العناصر ملتصقة بالحافة الخطأ ومسافاتها غير متناسقة.

الحلّ الذي أبني به كل مشروع ثنائي اللغة هو الخصائص المنطقية في CSS. بدل margin-left أكتب margin-inline-start، وبدل padding-right أكتب padding-inline-end، وبدل text-align: left أكتب text-align: start. هذه الخصائص لا تقول “يسار” و”يمين” بل “بداية” و”نهاية”، فتنعكس تلقائيًا حسب اتجاه الصفحة. أكتب القاعدة مرّة واحدة فتعمل في العربية والإنجليزية معًا، دون ورقة أنماط منفصلة لكل لغة ودون أخطاء يدوية. توثيق MDN يغطّي هذه الخصائص بالتفصيل، وهي مدعومة في كل المتصفّحات الحديثة منذ سنوات.

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

الخطأ الرابع: النص المختلط والأرقام التي تنقلب

أكثر ما يفضح موقعًا عربيًا مبنيًّا بإهمال هو خلط العربية بالإنجليزية أو بالأرقام في السطر نفسه: اسم منتج بالإنجليزية، رقم هاتف، بريد إلكتروني، نسبة مئوية، رابط. حين لا يكون سياق اللغة معلنًا بوضوح، يطبّق المتصفّح خوارزمية الاتجاه الثنائي (bidirectional algorithm) باجتهاده، فتنتقل الأرقام وعلامات الترقيم إلى مواضع غريبة، وقد ينقلب ترتيب رقم الهاتف فيقرأه الزائر معكوسًا.

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

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

الخطأ الخامس: النماذج والمحاذاة وأشرطة التمرير

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

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

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

الخطأ السادس: اختبار الموقع بمحتوى إنجليزي على شاشة كبيرة

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

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

وللأداء حصّة هنا أيضًا، إذ يجتمع الاتجاه مع سرعة الخطّ العربي كما شرحت في مقال سرعة الموقع وترتيب جوجل في الخليج. أبني مواقعي بإطار Astro الذي يرسل أقل قدر ممكن من جافاسكربت، وأنشرها صفحاتٍ ثابتة عبر Netlify قريبة جغرافيًا من الزائر. هدفي الرقمي ثابت في كل مشروع: نتيجة Lighthouse فوق 95 على الجوّال، ووزن صفحة تحت 500 كيلوبايت. من خبرتي في أكثر من 40 موقعًا سلّمتها منذ 2021، الموقع العربي المضبوط الاتجاه والسريع معًا ليس طموحًا نظريًا بل خطّ أساس واقعي حين يُبنى بشكل صحيح من اليوم الأول.

خلاصة الأخطاء الستّة

الاتجاه من اليمين إلى اليسار ليس خاصّية تُفعَّل بسطر، بل طبقة تصميمية كاملة تمسّ كل عنصر في الصفحة. الأخطاء الستّة تتسلسل من جذر واحد: الظنّ أن dir="rtl" أنجز العمل. حين تبني بالخصائص المنطقية، وتتحكّم يدويًا في الأيقونات، وتعزل النص المختلط، وتضبط النماذج من اليمين، وتختبر بمحتوى عربي على شاشة صغيرة، تختفي هذه الأخطاء كلّها. والفرق يقرأه زائرك الخليجي في الثواني الأولى، قبل أن يقرأ كلمة من محتواك: إمّا موقع يشعر أنه صُنع له، أو قالب أجنبي قُلب اتجاهه وحُسب أن العمل تمّ.

أبرز ما يجب تذكّره

1. dir="rtl" و lang="ar" على العنصر الجذري هو الأساس الصحيح، لكنه يقلب تدفّق النص فقط ولا يحلّ الأيقونات ولا الهوامش ولا الأرقام. عُدّه البداية لا النهاية.
2. اعكس العناصر الاتجاهية فقط (أسهم الملاحة، فتات التنقّل) وأبقِ الرمزية المحايدة كما هي، عبر محدّد مثل [dir="rtl"] بدل قلب كل الأيقونات آليًا.
3. ابنِ التخطيط بالخصائص المنطقية في CSS مثل margin-inline-start و text-align: start، فتنعكس تلقائيًا وتدعم اللغتين من شيفرة واحدة دون تكرار.
4. عالِج النص المختلط والأرقام بعزل المقاطع المخالفة للاتجاه في عنصر <bdi> أو سمة dir خاصّة، حتى لا ينقلب رقم الهاتف أمام الزائر.
5. اختبر بمحتوى عربي حقيقي على هاتف فعلي بشاشة صغيرة، فأغلب أخطاء الاتجاه لا تظهر إلا حين تجتمع لغة عربية وشاشة صغيرة وعين تبحث عنها.

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