الطريقة القديمة لدعم العربية على الويب كانت ملف أنماط ثانياً — styles-rtl.css يُحمَّل حين تكون اللغة عربية، ويتجاوز كل margin-left بـmargin-right. كانت تعمل، وكانت تنحرف عن الأصل خلال أسابيع، لأن كل مكوّن جديد يحتاج تنفيذين ولا يُختبَر إلا أحدهما.
الإجابة المختصرة: CSS الحديثة تملك خصائص منطقية. اكتب margin-inline-start بدل margin-left، فينعكس ملف أنماط واحد صحيحاً في الاتجاهين بلا أي تجاوزات.
هذا الدليل يشرح كيف تفعل ذلك كما ينبغي. أما للنطاق الأوسع لدعم العربية، فراجع الدليل الكامل لتعريب التطبيقات والمواقع.
اضبط الاتجاه مرة واحدة بشكل صحيح
الاتجاه مكانه عنصر <html> إلى جانب اللغة:
<html lang="ar" dir="rtl">
والسمتان معاً مهمتان. dir تقود التخطيط، وlang تقود اختيار الخط وفصل المقاطع ونطق قارئ الشاشة. وضبط إحداهما دون الأخرى خطأ شائع وصامت.
ولا تضبط direction في CSS كآليتك الأساسية. فسمة HTML هي ما تقرأه التقنيات المساعدة وخوارزمية الاتجاه في المتصفح. خاصية direction في CSS موجودة، لكن السمة هي مصدر الحقيقة.
الخصائص المنطقية: الحيلة كلها
الخصائص الفيزيائية تشير إلى جهات ثابتة. أما المنطقية فتشير إلى بداية ونهاية تدفق النص — وهما تتبادلان تلقائياً تحت RTL.
| فيزيائية | منطقية |
|---|---|
margin-left | margin-inline-start |
margin-right | margin-inline-end |
padding-left | padding-inline-start |
padding-right | padding-inline-end |
border-left | border-inline-start |
left / right | inset-inline-start / inset-inline-end |
text-align: left | text-align: start |
width | inline-size |
height | block-size |
والصيغ المختصرة مريحة:
.card {
margin-inline: 1rem 2rem; /* البداية، النهاية */
padding-block: 1rem; /* أعلى وأسفل */
border-start-start-radius: 8px;
}
ودعم المتصفحات لم يعد سبباً لتجنّبها. الخصائص المنطقية مدعومة في كل المتصفحات الحديثة وبلغت حالة Baseline المتاحة على نطاق واسع منذ 2021 بتغطية عالمية نحو 95%. فإن كنت على إطار حديث، تستطيع تبنّيها اليوم.
واستراتيجية الانتقال التي تنجح: فعّل قاعدة lint تمنع الخصائص الفيزيائية في الكود الجديد، وحوّل المكوّنات القائمة كلما لمستها. إعادة الكتابة الشاملة نادراً ما تكون مبررة؛ فالانحراف يتوقف لحظة توقف الكود الجديد عن الإضافة إليه.
Flexbox وGrid ينعكسان بلا جهد
هذا ما لا يتوقعه الناس: تخطيطات flex وgrid تنعكس تلقائياً تحت RTL، لأن محاورها معرّفة منطقياً أصلاً.
.toolbar {
display: flex;
gap: 1rem;
justify-content: flex-start; /* تصبح اليمين بصرياً تحت RTL */
}
قيم flex-start وflex-end وjustify-content وأسماء خطوط grid بـstart/end كلها تتبع اتجاه النص. فتحصل على انعكاس صحيح بلا كود خاص بـRTL.
وحين تحتاج صفاً لا ينعكس — أزرار مشغّل وسائط مثلاً — اضبط الاتجاه صراحةً على تلك الحاوية:
.player-controls {
direction: ltr;
}
وتجنّب row-reverse كحل لـRTL. فهو ينقلب في كلا الاتجاهين، فالتخطيط الذي يستخدمه سيكون خاطئاً في أحدهما. استخدم المحاذاة المنطقية ودع الاتجاه يتولى الأمر.
ما يجب ألا ينعكس أبداً
الانعكاس التلقائي أداة غليظة. وهذه تبقى في مكانها مهما كان الاتجاه:
- أزرار الوسائط — زر التشغيل يتجه يميناً دائماً
- الساعات والمؤقتات
- الرسوم البيانية ذات المحور الزمني
- أرقام الهواتف والآيبان والبطاقات وأرقام الإصدارات
- كتل الكود ومخرجات الطرفية
- معظم الشعارات
ولكتل الكود تحديداً:
pre, code {
direction: ltr;
text-align: left;
}
بدون هذا، يُعرض الكود في مقالة عربية وعلامات الترقيم متناثرة في الأطراف الخاطئة من الأسطر — خطأ يجعل المحتوى التقني غير قابل للاستخدام.
وللأيقونات، اعكس الاتجاهية فقط:
[dir="rtl"] .icon-arrow-back,
[dir="rtl"] .icon-chevron-next {
transform: scaleX(-1);
}
ولا تطبّق هذا عاماً أبداً. فزر تشغيل أو ساعة معكوسة هي تحديداً الخطأ الذي يمنعه هذا القسم.
قواعد طباعية مختلفة
ثلاث قواعد في CSS أهم للعربية من اختيار الخط نفسه.
letter-spacing يجب أن يكون صفراً. الخط العربي متصل — الحروف ترتبط وتتغير أشكالها بحسب موضعها. وأي تباعد حروف يقطع تلك الروابط، فيُعرض النص مكسوراً بصرياً لا متباعداً بشكل غريب فحسب.
:lang(ar) {
letter-spacing: 0;
line-height: 1.8;
}
وتباعد الأسطر يحتاج مساحة أكبر. الحروف العربية تمتد صعوداً ونزولاً أكثر من اللاتينية. وقيمة 1.4–1.5 المريحة بالإنجليزية تبدو خانقة؛ و1.7–1.8 خط أساس أفضل.
وtext-transform لا يفعل شيئاً مفيداً. العربية بلا حالة أحرف، فـuppercase بلا أثر على النص العربي — لكنه سيؤثر على أي نص لاتيني مُضمَّن، وغالباً دون قصد.
ولتحميل الخطوط وتجزئتها، راجع الخطوط العربية على الويب.
النص ثنائي الاتجاه والمحتوى المُضمَّن
الجمل العربية التي تحتوي أسماء منتجات إنجليزية أو أرقاماً أو روابط تحتاج عزلاً، وإلا وقعت علامات الترقيم في مواضع خاطئة بصرياً.
استخدم <bdi> لأي محتوى أجنبي مُضمَّن أو ينشئه المستخدم:
<p>اشترِ <bdi>iPhone 15 Pro</bdi> الآن</p>
عنصر <bdi> يعزل محتواه عن سياق الاتجاه المحيط، وهو ما تريده كلما عجزت عن التنبؤ بأبجدية المحتوى — أسماء المستخدمين، وعناوين المنتجات، ونتائج البحث.
والمكافئ في CSS للحاويات هو unicode-bidi: isolate، وتطبّقه معظم المتصفحات على <bdi> افتراضياً.
ولأي شيء يحمل ترتيب محارفه معنى، ثبّت الاتجاه صراحةً:
<span dir="ltr">+966 50 123 4567</span>
الأرقام والعملات والصيغ يغطي هذا بعمق أكبر، بما فيه واجهات Intl التي تعالج العملة صحيحاً.
الاختبار
اختبر مبكراً لا قبل الإطلاق. تحويل مشروع ناضج إلى RTL لأول مرة يُظهر عشرات الأعطال الصغيرة دفعة واحدة. فعّله في الأسبوع الأول.
فحص سريع بلا تعديل تطبيقك: اضبط dir="rtl" على <html> في أدوات المطوّر وتنقّل في الصفحات. معظم أخطاء التخطيط تظهر فوراً.
وأتمت فحص الانحدار. لقطات الانحدار البصري في الاتجاهين تلتقط المكوّن الذي كسره تعديل ما في أحدهما بصمت.
وما تبحث عنه تحديداً:
- الظلال والتدرجات بإزاحة اتجاهية
- العناصر ذات الموضع المطلق التي تستخدم
left/right - مواضع صور الخلفية
- نقاط أصل التحويلات
- سلوك التمرير في الحاويات الأفقية
- أي محتوى
::before/::afterموضوع فيزيائياً
قائمة تحقق
-
dirوlangمضبوطتان على<html> - خصائص منطقية في كل مكان؛ لا
margin-leftفي الكود الجديد - قاعدة lint تمنع الخصائص الفيزيائية
- لا ملف أنماط RTL منفصل
-
letter-spacing: 0وline-height≈ 1.8 للعربية - كتل الكود مثبّتة LTR
- الأيقونات الاتجاهية معكوسة، وأزرار التشغيل والساعات دون مساس
- أرقام الهواتف والآيبان مثبّتة LTR
-
<bdi>حول محتوى المستخدمين والنص اللاتيني المُضمَّن - اختبارات انحدار بصري في الاتجاهين
- فحص الظلال والمواضع المطلقة ومواضع الخلفيات
اقرأ أيضاً
- الدليل الكامل لتعريب التطبيقات والمواقع — طبقات التعريب الست.
- الخطوط العربية على الويب — التحميل والتجزئة.
- الأرقام والعملات والصيغ — الأرقام والعملة والنص ثنائي الاتجاه.
- دعم العربية وRTL في React Native — المكافئ في الموبايل.
- WordPress مقابل Next.js — اختيار المنصة للمواقع ثنائية اللغة.
الأسئلة الشائعة
هل أحتاج ملف أنماط RTL منفصلاً؟
لا، ولا ينبغي أن يكون لديك واحد. الخصائص المنطقية مثل margin-inline-start تُترجَم صحيحاً في الاتجاهين من ملف أنماط واحد. أما ملف RTL منفصل فينحرف عن الأصل مع إضافة مكوّنات جديدة، لأن نسخة واحدة فقط تُختبَر عادةً.
هل دعم المتصفحات للخصائص المنطقية واسع؟
نعم. الخصائص المنطقية مدعومة في كل المتصفحات الحديثة وبلغت حالة Baseline المتاحة على نطاق واسع منذ 2021 بتغطية نحو 95%، فلم يعد دعم المتصفحات سبباً لتجنّبها. تبنّها في الكود الجديد فوراً وحوّل المكوّنات القائمة كلما لمستها بدل محاولة إعادة كتابة كاملة.
هل ينعكس flexbox تلقائياً في RTL؟
نعم. محاور flexbox وgrid معرّفة منطقياً، فقيم flex-start وjustify-content وأسماء خطوط grid تتبع اتجاه النص تلقائياً. وتجنّب row-reverse كحل لـRTL — فهو ينقلب في الاتجاهين، وسيكون خاطئاً في أحدهما.
لماذا يبدو النص العربي مكسوراً؟
letter-spacing شبه مؤكد. العربية خط متصل، فالحروف ترتبط وتتغير أشكالها بحسب موضعها. وأي تباعد حروف غير صفري يقطع تلك الروابط ويُعرض النص مكسوراً بصرياً. اضبط letter-spacing: 0 للنص العربي.
كيف أمنع كتل الكود من الانكسار في صفحة RTL؟
ثبّتها من اليسار لليمين بـdirection: ltr; text-align: left; على pre وcode. وبدون هذا، يُعرض الكود داخل مقالة عربية وعلامات الترقيم والمعاملات في الأطراف الخاطئة من الأسطر، فيصبح المحتوى التقني غير مقروء.
ما هو <bdi> ومتى أستخدمه؟
<bdi> يعزل محتواه عن سياق الاتجاه المحيط. استخدمه حول أي محتوى لا تستطيع التنبؤ بأبجديته — أسماء المستخدمين وعناوين المنتجات ونتائج البحث والإنجليزية المُضمَّنة في جمل عربية. وبدونه تحسم خوارزمية الاتجاه علامات الترقيم مقابل النص المحيط وتضعها في مواضع خاطئة بصرياً.
كيف أختبر RTL دون تحويل تطبيقي كاملاً؟
اضبط dir="rtl" على عنصر <html> في أدوات مطوّر المتصفح وتنقّل في الواجهة. معظم أخطاء التخطيط تظهر فوراً. وللحماية المستمرة، أضف لقطات انحدار بصري في الاتجاهين حتى لا يكسر أي تعديل أحدهما بصمت.
الخلاصة
الخصائص المنطقية تزيل المشكلة كلها. ملف أنماط واحد، صحيح في الاتجاهين، بلا تجاوزات تُصان — ولهذا صار ملف RTL المنفصل نمطاً قديماً لا تقنية.
والاستثناءات قصيرة ومحددة. كتل الكود وأزرار الوسائط والساعات وكل ما يحمل ترتيب محارفه معنى تحتاج اتجاهاً صريحاً. وما عداها ينعكس صحيحاً وحده.
واختبر في الأسبوع الأول. أخطاء RTL تافهة منفردة وساحقة مجتمعة إن قابلتها كلها في الأسبوع السابق للإطلاق.
تبني موقعاً ثنائي اللغة؟ تواصل معنا — نبني بالعربية أولاً، ما يعني أن RTL هو الافتراضي لا إضافة لاحقة. اطّلع على خدمات تطوير الويب.