بنية المحتوى من اليمين إلى اليسار: ما يقوله التخطيط للقارئ ومحرك البحث
بنية المحتوى من اليمين إلى اليسار (RTL) هي مجموعة قرارات التخطيط التي تجعل الصفحة العربية تُقرأ كأنها كُتبت بالعربية من البداية: اتجاه الصفحة، والتباعد المنطقي، والعناصر المعكوسة، وعزل الكلمات اللاتينية. وغيابها يجعل الصفحة تبدو نسخة إنجليزية مقلوبة.
في هذه الصفحة — 5 أقسام
كيف يقرأ الزائر ومحرك البحث الصفحة العربية؟
إجابة سريعة
يبدأ الزائر العربي من أعلى اليمين ويتوقع أن يجد العنوان والزر الرئيسي هناك. ويقرأ محرك البحث ما تعلنه الصفحة: اللغة والاتجاه وترتيب العناوين. الإعلان سهل الضبط، أما ثقة الزائر فتُكسب بتفاصيل التخطيط التي لا يصلحها الإعلان وحده.
تقرأ العين العربية من اليمين، فتبحث عن العنوان والإجراء الرئيسي في أعلى يمين الصفحة. وحين تجد الشعار يميناً والقائمة يساراً ثم زر «احجز الآن» ملتصقاً بالحافة اليسرى، تشعر بأن شيئاً ما في غير موضعه، حتى لو لم تعرف السبب. وهذا الشعور يقرر في ثوانٍ إن كان زائر عيادة أسنان في جدة سيبقى أو يغادر.
أما محرك البحث فيقرأ ما تعلنه الصفحة. اضبط lang="ar" وdir="rtl" على وسم html، ورتّب العناوين ترتيباً سليماً، فيكتمل هذا الجزء. ولا يوجد دليل على أن الاتجاه نفسه يرفع الترتيب. الفائدة الحقيقية في سلوك الزائر: صفحة يرتاح لها تبقيه أطول وتدفعه إلى التواصل.
ماذا يغيّر dir="rtl" وما الذي لا يغيّره؟
إجابة سريعة
يقلب dir="rtl" اتجاه النص وترتيب العناصر داخل السطر، لكنه لا يقلب الهوامش والحشوات المكتوبة بالجهات الثابتة يمين ويسار. لذلك تُكتب المسافات بالخصائص المنطقية «البداية» و«النهاية»، فتتبع اتجاه اللغة تلقائياً في النسختين.
في CSS نوعان من الخصائص. الخصائص الثابتة مثل margin-left وpadding-right تبقى في جهتها مهما تغيّر الاتجاه. والخصائص المنطقية مثل margin-inline-start وpadding-inline-end تعني «بداية السطر» و«نهايته»، فتكون يميناً في العربية ويساراً في الإنجليزية. وفي Tailwind تقابلها ms- وme- وps- وpe-، بدل ml- وmr- وpl- وpr-.
يستطيع موقع ثنائي اللغة أن يخدم النسختين بالمكونات نفسها إذا كانت مسافاته كلها منطقية. وكل خاصية ثابتة تبقى في مكوّن مشترك تُحدث عيباً صغيراً في النسخة العربية: أيقونة ملتصقة بالنص من الجهة الخطأ، أو خط ملون على الحافة اليسرى لبطاقة عربية. فابدأ مراجعة أي صفحة عربية بالبحث عن الخصائص الثابتة.
لماذا يجب عكس الأسهم ومسارات التنقل وأشرطة التقدم؟
إجابة سريعة
لأن اتجاهها يحمل معنى. السهم المتجه يميناً يعني «التالي» للقارئ الإنجليزي و«السابق» للقارئ العربي. فإن لم يُعكس دعا الزائر العربي إلى الرجوع وهو يقصد التقدم. وكذلك مسار التنقل وشريط التقدم وزرّا السابق والتالي.
بعض العناصر زخرفة، وبعضها إشارة. والإشارة تتبع اتجاه القراءة. في صفحة حجز لشركة نقل أثاث في دبي، يمتلئ شريط خطوات الطلب من اليمين إلى اليسار، ويشير سهم «متابعة» إلى اليسار. وإن بقيا كما صُمما للإنجليزية بدا الطلب كأنه يتراجع. هذه العناصر الخمسة تحتاج إلى عكس في الصفحات العربية:
- أسهم التنقل: «التالي» يشير إلى اليسار، و«السابق» إلى اليمين
- مسار التنقل: يبدأ بالرئيسية من اليمين، وتنفتح الفواصل نحو اليسار
- أشرطة التقدم: تمتلئ من اليمين
- زرّا السابق والتالي: يتبادلان موضعيهما، لا أيقونتيهما فقط
- الخط المميز للبطاقات والاقتباسات: يوضع على الحافة اليمنى
لا تُظهر هذه الأخطاء رسالة خطأ. الأزرار تعمل والروابط صحيحة. لكن شريط تقدم يمتلئ من اليسار في صفحة عربية يبدو متوقفاً، ومسار تنقل تشير أسهمه عكس القراءة يبدو معطلاً. والزائر يحكم بما يراه، لا بما تفعله الشيفرة.
كيف تكتب الكلمات اللاتينية داخل الجملة العربية؟
إجابة سريعة
ضع مسافة حقيقية قبل الكلمة اللاتينية وبعدها، وأبقِ علامات الترقيم العربية خارجها، واكتب الأرقام بصورة واحدة في الموقع كله. فتعزل الخوارزمية ثنائية الاتجاه الكلمة عزلاً نظيفاً، ويبقى ترتيب الجملة العربية حولها سليماً ومقروءاً.
لا تخلو صفحة عربية تقنية من كلمات لاتينية: أسماء منتجات مثل iPhone، ومصطلحات مثل JSON-LD، وأسماء أدوات مثل Search Console. تعرض المتصفحات هذه الكلمات من اليسار إلى اليمين داخل السطر العربي تلقائياً. لكن علامة ترقيم ملتصقة بالكلمة اللاتينية، أو كلمة عربية بلا مسافة قبلها، تقفز إلى الجهة الخطأ وتشوّه الجملة.
القواعد بسيطة وثابتة. اترك مسافة في جانبي كل كلمة لاتينية. ضع الفاصلة العربية والنقطة بعد المسافة لا ملاصقتين للكلمة اللاتينية. اختر صورة واحدة للأرقام في الموقع كله، والأرقام الغربية هي الأشيع في المواقع العربية اليوم. وإن احتجت إلى المصطلح الإنجليزي فاذكره مرة واحدة بين قوسين بعد المصطلح العربي، ثم اكتفِ بالعربي.
ما الذي ينكسر حين يُترك الاتجاه إلى آخر المشروع؟
إجابة سريعة
تتراكم عيوب صغيرة: مسافات ثابتة تعاند الاتجاه، وأسهم لم تُعكس، وعلامات ترقيم تقفز إلى الجهة الخطأ. كل عيب وحده بسيط، لكنها مجتمعة تجعل الصفحة تبدو مستوردة. والزائر يلاحظها كلها حتى لو لم يسمّها.
السبب واحد في كل هذه العيوب: التعامل مع العربية كطبقة أخيرة تُضاف بعد اكتمال التصميم الإنجليزي. يكتمل الموقع، ثم يُضاف dir="rtl"، ثم تُصلح العيوب واحداً واحداً كلما اكتشفها أحد. وفي كل إضافة جديدة تعود العيوب نفسها.
الحل أرخص مما يبدو إن جاء مبكراً. اتجاه يُحدد مرة واحدة في القالب، وخصائص منطقية تصبح عادة الفريق، وعناصر اتجاهية تُعكس من البداية، وقاعدة واحدة للكلمات اللاتينية. الفريق الذي يفعل ذلك ينشر صفحات عربية لا يشعر قارئها بأنها مترجمة، والفريق الذي لا يفعله ينشر صفحات يتسامح معها القارئ في أحسن الأحوال.
هذه المقالة جزء من سلسلة «السيو العربي وتعدد اللغات» — ما يجب أن تتقنه المواقع العربية وثنائية اللغة: صور الإملاء، واللهجات الخليجية والمصرية، والتخطيط من اليمين إلى اليسار، وخريطة واحدة للغتين.
عن الكاتب
Mohamed Youns
مهندس سيو دلالي · الكاتب ومطوّر النظام
يكتب محمد يونس عن كيفية فهم محركات البحث للمحتوى، ويطبّق المعايير نفسها عند بناء الأنظمة الدلالية في Nut Hub. nut-hub.org