خاصية direction
آخر تحديث: 2026-09-13
direction خاصية direction
تحدد خاصية direction في CSS اتجاه كتابة النص — من اليسار إلى اليمين (ltr) أو من اليمين إلى اليسار (rtl). تؤثر بشكل رئيسي على اللغات المكتوبة من اليمين إلى اليسار مثل العربية والعبرية، وتغير أيضًا محاذاة النص وموضع شريط التمرير وتدفق التخطيط. في المواقع متعددة اللغات، يُفضَّل استخدام السمة dir على عنصر HTML بدل خاصية CSS.
| الفئة | |
|---|---|
| القيمة الأولية | ltr |
| موروث | نعم |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
direction: ltr | rtl;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
ltr | rtl | كلمة مفتاحية | اتجاه النص |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| direction | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： للغات RTL، استخدم dir="rtl" مباشرة على عنصر HTML — فهو أكثر دلالة ويؤثر تلقائيًا تدفق المستند بالكامل.
مهم： تغيّر direction التعيين الفيزيائي للخصائص المنطقية مثل margin و padding؛ ودمجها مع الخصائص المنطقية في CSS مثل margin-inline-start يوفّر دعمًا أفضل للأقلمة.
❓ الأسئلة الشائعة
Qما الفرق بين direction و writing-mode في CSS؟
Aيتحكم direction في تدفق النص أفقيًا (من اليسار إلى اليمين أو من اليمين إلى اليسار)؛ ويتحكم writing-mode في الاتجاه العام لتخطيط النص، أفقيًا أو عموديًا. يمكن الجمع بينهما لإنتاج تخطيطات طباعية مختلفة.
Qلماذا يتغير تخطيط الصفحة بعد تعيين direction: rtl في CSS؟
Aيقلب direction: rtl تدفق النص، لذا يبدأ النص من الحافة اليمنى وتنتقل شريط التمرير إلى اليسار. إذا كنت تريد فقط تغيير محاذاة النص دون التأثير على التخطيط، استخدم text-align بدلاً من ذلك.
Qكيف أضبط تخطيطًا من اليمين إلى اليسار للنصوص العربية أو العبرية في موقعي؟
Aاكتب dir="rtl" على عنصر <html> أو <body> — فهو أكثر دلالة من direction: rtl في CSS ويؤثر أيضًا سلوك المتصفح مثل النماذج وأشرطة التمرير. في CSS يمكنك كتابة direction: rtl ودمجه مع unicode-bidi للنصوص المختلطة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
