الفرق بين المراجعتين لصفحة: «CSS/direction»

المراجعة الحالية بتاريخ 11:14، 7 أكتوبر 2022

الخاصية 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)‎.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>direction</code>}}</noinclude>
-الخاصية <code>direction</code> في CSS تضبط اتجاه النص، ونستخدم القيمة <code>rtl</code> معها للإشارة إلى اللغات التي تُكتَب من اليمين إلى اليسار مثل اللغة العربية، و <code>ltr</code> للغات التي تُكتَب من اليسار إلى اليمين مثل اللغة الإنكليزية. لاحظ أنَّ اتجاه النص يُعرَّف عادةً باستخدام الخاصية <code>dir</code> على عنصر <code>[[HTML/html|<html>]]</code> لكامل المستند، وليس باستخدام الخاصية <code>direction</code>.<syntaxhighlight lang="css">
+الخاصية <code>direction</code> في CSS تضبط اتجاه النص، ونستخدم القيمة <code>rtl</code> معها للإشارة إلى اللغات التي تُكتَب من اليمين إلى اليسار مثل اللغة العربية، و <code>ltr</code> للغات التي تُكتَب من اليسار إلى اليمين مثل اللغة الإنكليزية. لاحظ أنَّ اتجاه النص يُعرَّف عادةً باستخدام الخاصية <code>dir</code> على عنصر <code>[[HTML/html|<html>]]</code> لكامل المستند، وليس باستخدام الخاصية <code>direction</code>.
-/* الكلمات المحجوزة */
-direction: ltr;
-direction: rtl;
-/* القيم العامة */
-direction: inherit;
-direction: initial;
-direction: unset;
-</syntaxhighlight>وعلى النقيض من الخاصية <code>dir</code> في HTML، الخاصية <code>direction</code> في CSS لن تُورَّث من أعمدة الجداول إلى خلايا الجدول، لأنَّ الوراثة في CSS تتبع لبنية المستند، وتكون خلايا الجداول ضمن أسطر الجدول وليس ضمن الأعمدة.
-الخاصية <code>direction</code> (والخاصية <code>unicode-bidi</code>) هي الخاصية الوحيدة التي لا تتأثر بالخاصية <code>[[CSS/al|all]]</code> المختصرة.
+== بطاقة الخاصية ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 30: / سطر 21: @@
 |}
+<syntaxhighlight lang="css">
+/* الكلمات المحجوزة */
+direction: ltr;
+direction: rtl;
+/* القيم العامة */
+direction: inherit;
+direction: initial;
+direction: unset;
+</syntaxhighlight>وعلى النقيض من الخاصية <code>dir</code> في [[HTML]]، الخاصية <code>direction</code> في CSS لن تُورَّث من أعمدة الجداول إلى خلايا الجدول، لأنَّ الوراثة في CSS تتبع لبنية المستند، وتكون خلايا الجداول ضمن أسطر الجدول وليس ضمن الأعمدة.
+الخاصية <code>direction</code> (والخاصية <code>unicode-bidi</code>) هي الخاصية الوحيدة التي لا تتأثر بالخاصية <code>[[CSS/al|all]]</code> المختصرة.
 == أمثلة ==
@@ سطر 60: / سطر 64: @@
 الخاصية <code>direction</code> تقبل قيمةً واحدة من الكلمتين المحجوزتين التاليتين.
-=== القيمة <code>ltr</code> ===
+===  <code>ltr</code> ===
-اتجاه النص هو من اليسار إلى اليمين (Left-to-Right). هذه القيمة هذ القيمة الافتراضية.
+اتجاه النص هو من اليسار إلى اليمين (Left-to-Right). هذه القيمة هي القيمة الافتراضية.
-=== القيمة <code>rtl</code> ===
-اتجاه النص هو من اليمين إلى اليسار (Right-to-Left)، كم في النصوص العربية.
+===  <code>rtl</code> ===
+اتجاه النص هو من اليمين إلى اليسار (Right-to-Left)، كما في النصوص العربية.
 === البنية الرسمية ===
 <syntaxhighlight lang="css">
@@ سطر 69: / سطر 75: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصية <code>[[CSS/float|float]]</code> التي تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.
+* صفحة الخاصية <code>[[CSS/right|right]]</code> التي ساهم في تحديد الموضع الأفقي الأيمن لأحد العناصر التي يمكن أن يتغير مكانها.
+* صفحة الخاصية <code>[[CSS/left|left]]</code> التي ساهم في تحديد الموضع الأفقي الأيسر لأحد العناصر التي يمكن أن يتغير مكانها.
 == مصادر ومواصفات ==
 * مسودة [https://drafts.csswg.org/css-writing-modes-3/#direction CSS Writing Modes Module Level 3].
 * مواصفة ‎[http://www.w3.org/TR/CSS2/visuren.html#direction CSS Level 2 (Revision 1)‎].
-[[تصنيف:CSS]]
+[[تصنيف:CSS|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Property]]
+[[تصنيف:CSS Property|{{SUBPAGENAME}}]]