الخاصية direction
الخاصية direction
في CSS تضبط اتجاه النص، ونستخدم القيمة rtl
معها للإشارة إلى اللغات التي تُكتَب من اليمين إلى اليسار مثل اللغة العربية، و ltr
للغات التي تُكتَب من اليسار إلى اليمين مثل اللغة الإنكليزية. لاحظ أنَّ اتجاه النص يُعرَّف عادةً باستخدام الخاصية dir
على عنصر <html>
لكامل المستند، وليس باستخدام الخاصية direction
.
بطاقة الخاصية
القيمة الابتدائية | ltr
|
---|---|
تُطبَّق على | جميع العناصر. |
قابلة للوراثة | نعم |
قابلة للحركة | لا |
القيمة المحسوبة | كما حُدِّدَت. |
/* الكلمات المحجوزة */
direction: ltr;
direction: rtl;
/* القيم العامة */
direction: inherit;
direction: initial;
direction: unset;
وعلى النقيض من الخاصية dir
في HTML، الخاصية direction
في CSS لن تُورَّث من أعمدة الجداول إلى خلايا الجدول، لأنَّ الوراثة في CSS تتبع لبنية المستند، وتكون خلايا الجداول ضمن أسطر الجدول وليس ضمن الأعمدة.
الخاصية direction
(والخاصية unicode-bidi
) هي الخاصية الوحيدة التي لا تتأثر بالخاصية all
المختصرة.
أمثلة
مثال عن استخدام الخاصية direction
لضبط اتجاه فقرة عربية ضمن صفحة إنكليزية:
<p>هذا نصٌ عربيٌ يستعمل الخاصية direction لضبط اتجاهه</p>
شيفرة CSS
p {
direction: rtl;
}
نُذكِّر مرةً أخرى أنَّ من الأفضل استخدام عناصر وخاصيات HTML لضبط الاتجاه، كما في عنصر <bdi>
والخاصية dir
.
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 2.0 | 1.0 | 5.5 | 9.2 | 1.3 |
البنية العامة
الخاصية direction
تقبل قيمةً واحدة من الكلمتين المحجوزتين التاليتين.
ltr
اتجاه النص هو من اليسار إلى اليمين (Left-to-Right). هذه القيمة هي القيمة الافتراضية.
rtl
اتجاه النص هو من اليمين إلى اليسار (Right-to-Left)، كم في النصوص العربية.
البنية الرسمية
direction: ltr | rtl;
انظر أيضًا
- صفحة الخاصية
float
التي تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها. - صفحة الخاصية
right
التي ساهم في تحديد الموضع الأفقي الأيمن لأحد العناصر التي يمكن أن يتغير مكانها. - صفحة الخاصية
left
التي ساهم في تحديد الموضع الأفقي الأيسر لأحد العناصر التي يمكن أن يتغير مكانها.
مصادر ومواصفات
- مسودة CSS Writing Modes Module Level 3.
- مواصفة CSS Level 2 (Revision 1).