كيف تبني موقعًا عربيًا سليمًا (RTL) خطوة بخطوة: دليل عملي للمطورين
نشرتُ مؤخرًا على X أمرًا برمجيًا داخل جملة عربية، فظهر الجزء الإنجليزي منه بشكل خاطئ: صارت الشرطة المائلة في /bye تظهر بعد الكلمة فتقرأ «bye/». الخطأ ليس في المنصة وحدها، فهو يصيب أي موقع عربي يخلط العربية بالإنجليزية بلا عناية. هذا الدليل يشرح كيف تبني موقعًا عربيًا سليمًا من البداية.
ابدأ بـ lang وdir
أول سطر في صفحتك يحدد اللغة والاتجاه، وهو ما تعتمد عليه المتصفحات والقارئات الشاشية ومحركات البحث:
<html lang="ar" dir="rtl">الأفضل أن تحدد الاتجاه في HTML عبر السمة dir لا في CSS وحده، لأنها جزء من معنى الصفحة. والسمة تعزل النص داخل العنصر عن النص المحيط به.
الخصائص المنطقية بدل left وright
إن كتبتَ margin-left فستحتاج لتعديل كل ما كتبته حين تعكس الاتجاه. الحل هو الخصائص المنطقية: تتبع اتجاه الصفحة تلقائيًا، فتكتب القاعدة مرة واحدة. وبحسب MDN، margin-inline-start تساوي margin-left في الصفحات من اليسار لليمين، وتساوي margin-right حين تكون الصفحة من اليمين لليسار.
| الخاصية الفيزيائية | البديل المنطقي |
|---|---|
| margin-left / margin-right | margin-inline-start / margin-inline-end |
| padding-left / padding-right | padding-inline-start / padding-inline-end |
| border-left | border-inline-start |
| text-align: left | text-align: start |
| float: left | float: inline-start |
| left: 0 | inset-inline-start: 0 |
| width / height | inline-size / block-size |
وهناك فخ شائع: كتابة margin: 0 بعد خاصية منطقية تعيد ضبطها. استخدم الاختصارات المنطقية باستمرار، أو ضع الخاصية المنطقية أخيرًا. أما Flexbox وGrid فتتبعان الاتجاه أصلًا، فمجرد وضع direction: rtl ينعكس ترتيب العناصر دون تعديل.
.card {
margin-inline-start: 1rem;
padding-inline: 1rem 2rem; /* start end */
text-align: start;
border-inline-start: 4px solid var(--accent);
}في Tailwind الحديث تجد مقابلها: ms-4 وme-4 وps-4 وpe-4 وborder-s-2. راجع توثيق إصدارك للتأكد من الأسماء.
النص المختلط: مصدر أكثر الأخطاء
عندما تضع جزءًا إنجليزيًا (أمر، رابط، اسم منتج) داخل جملة عربية، تحاول خوارزمية Unicode تخمين اتجاه علامات الترقيم والرموز المحايدة، وقد تخطئ. مثال: «اكتب /bye للخروج».
الحل عزل الجزء الإنجليزي. بحسب W3C: إن عرفتَ الاتجاه أضف السمة dir، وإن لم تعرفه (نص يأتي من قاعدة بيانات أو مستخدم) فاستخدم dir="auto" أو العنصر <bdi>.
<p>اكتب الأمر <bdi dir="ltr">ollama run gemma4:e2b</bdi> ثم اضغط Enter.</p>
<!-- user-generated text, direction unknown -->
<p>الاسم: <bdi>{userName}</bdi></p>ولا تعتمد على unicode-bidi: isolate في CSS وحده للمعنى، فتوثيق MDN ينبّه إلى أن المتصفحات يجوز لها تجاهل CSS، بينما العنصر <bdi> يحمل المعنى.
أين لا تملك HTML؟ في منشورات المنصات والنصوص العادية، ضع الجزء الإنجليزي في سطر مستقل. وإن أردت إبقاءه داخل الجملة فأحطه بالرمزين U+2066 (LRI) وU+2069 (PDI)، وهما مخصصان لعزل نص من اليسار لليمين.
أنماط يجب أن تكون من اليسار لليمين دائمًا: البريد الإلكتروني والروابط وأرقام الهواتف وأوامر الطرفية. أعطها dir="ltr".
الأيقونات والصور
- اعكس: أسهم «رجوع» و«التالي» وأسهم القوائم المنسدلة وما يعبّر عن اتجاه التنقل.
- لا تعكس: الشعارات، والصور، والساعات، وعلامات الصح، وأزرار التشغيل.
[dir="rtl"] .icon-arrow { transform: scaleX(-1); }الخطوط والمسافات
- اختر خطًا عربيًا حقيقيًا مثل Cairo أو Tajawal أو IBM Plex Sans Arabic، واستضفه بنفسك: أسرع وأكثر احترامًا لخصوصية الزائر.
- حمّل الأوزان الفعلية (400 و700) بدل أن يصنع المتصفح خطًا غامقًا اصطناعيًا يشوّه الحروف.
- لا تستخدم letter-spacing على النص العربي: يفكّ اتصال الحروف.
- لا تستخدم الخط المائل للتأكيد، فليس من تقاليد الكتابة العربية. استخدم الوزن أو اللون.
- زِد ارتفاع السطر (نحو 1.7 إلى 1.9 للفقرات) لأن للحروف العربية امتدادات فوق السطر وتحته.
الأرقام والتواريخ
عادات الأرقام تختلف بين الدول العربية، فبعضهم يفضّل الأرقام الهندية (٠١٢) وبعضهم الغربية (012). اترك الاختيار لمستخدمك أو لدولته، وأنشئ التنسيق بواجهة Intl دون مكتبات:
new Intl.NumberFormat('ar-EG').format(1234.5)new Intl.NumberFormat('ar-EG-u-nu-latn').format(1234.5)new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura').format(new Date())الأول يعطي أرقامًا هندية، والثاني يفرض الأرقام الغربية، والثالث تاريخًا هجريًا (أم القرى). اختبر ما يظهر عندك قبل النشر.
النماذج وحقول الإدخال
<!-- free text: direction follows what the user types -->
<input type="text" dir="auto">
<!-- always left-to-right -->
<input type="email" dir="ltr">
<input type="tel" dir="ltr">أخطاء شائعة وحلولها
| العَرَض | السبب | الحل |
|---|---|---|
| عنصر ملتصق بالجهة الخاطئة | استخدام margin-left أو left ثابتة | الخصائص المنطقية (inline-start / inline-end) |
| علامة الترقيم تقفز لمكان غريب | نص لاتيني داخل جملة عربية دون عزل | عنصر bdi أو سمة dir أو سطر مستقل |
| الحروف العربية منفصلة | letter-spacing على النص العربي | احذف letter-spacing |
| رقم الهاتف أو الرابط معكوس | عدم تحديد الاتجاه | dir="ltr" على العنصر |
| السهم يشير للاتجاه الخطأ | أيقونة اتجاهية لم تُعكس | scaleX(-1) داخل [dir="rtl"] |
| الخط الغامق مشوّه | وزن اصطناعي لخط لا يملك وزنًا غامقًا | حمّل وزن الخط الفعلي |
قائمة اختبار قبل النشر
- بدّل dir على عنصر html بين rtl وltr من أدوات المطوّر، وتأكد أن التخطيط ينعكس كله.
- اختبر هذه الجملة في صفحاتك: «اكتب /bye ثم Ctrl+C (أو Enter) للخروج».
- ضع رابطًا طويلًا واسمًا إنجليزيًا طويلًا وراقب الفيض الأفقي.
- افتح الصفحة على هاتف حقيقي، لا على المحاكي وحده.
- تأكد أن الأيقونات الاتجاهية انعكست والشعارات لم تنعكس.
أسئلة شائعة
هل أحتاج ملف CSS منفصلًا للعربية؟
لا إن استخدمت الخصائص المنطقية. تكتب القواعد مرة واحدة فتعمل بالاتجاهين.
هل يكفي direction: rtl في CSS؟
يعمل، لكن الأفضل تحديد dir في HTML لأنه جزء من معنى المحتوى، وهو ما يوصي به W3C.
هل أترجم الواجهة وأعكسها فقط؟
لا. اختبر نصوصًا حقيقية بالعربية، والأرقام والتواريخ، والخط. العكس الآلي لا يكفي.
أداة جديدة كل يوم
أنشر على X أداة ذكاء اصطناعي مجانية يوميًا، وكل المصادر والمسارات في المكتبة.