ما هو RTL؟

التعريف المختصر

RTL هو وضع اتجاه الصفحة أو العنصر من اليمين إلى اليسار، ويُفعَّل في HTML بخاصية dir="rtl". وعكسه LTR، الاتجاه من اليسار لليمين المستخدم في الإنجليزية ومعظم اللغات اللاتينية.

شرح مبسط

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

<html lang="ar" dir="rtl">

/* بدل margin-left و padding-right */
.card {
  margin-inline-start: 16px;
  padding-inline-end: 12px;
  text-align: start;
}
.icon-next { transform: scaleX(-1); } /* السهم الاتجاهي فقط */

الخصائص المنطقية مثل margin-inline-start تعني «بداية السطر» أيًا كان الاتجاه، فتعمل الصفحة صحيحة بالعربية والإنجليزية دون كتابة نسختين. وليس كل شيء ينقلب:

• ينقلب: ترتيب القوائم، الأسهم الاتجاهية، أماكن الهوامش، اتجاه أشرطة التقدم والسلايدر.
• لا ينقلب: الأرقام، أرقام الجوال، الشعارات، أيقونات مثل الساعة وزر التشغيل، والكود البرمجي.

والمشكلة الأصعب حين يختلط العربي بالإنجليزي في سطر واحد، مثل «طلب رقم #1024 (مدفوع)»، فتنقلب الأقواس والرموز. هذا موضوع الاتجاه المختلط، وحله غالبًا عزل الجزء اللاتيني أو الرقمي بعنصر bdi حتى يحافظ على ترتيبه داخل السطر العربي.

مثال من السوق السعودي

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

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

كيف يظهر في أوترا

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

مصطلحات ذات صلة

• الواجهة الأمامية: حيث يُطبَّق الاتجاه فعليًا.
• الفايب كودينج: وفيه قسم كامل عن مشاكل العربية.
• البرومبت: اذكر فيه الاتجاه من أول رسالة.
• SEO: خاصية lang الصحيحة تساعد محركات البحث على فهم لغة صفحتك.