انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 14
دورة لغة CSS

إتجاه النصوص في لغة CSSCSS Text Direction

ستتعلم في هذا الدرس تحديد الاتجاه الأساسي للنص باستخدام direction، وعلاقته بسمة dir وخوارزمية النص ثنائي الاتجاه، والفرق بين الاتجاه الطبيعي وbidi-override.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
9
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
7,180
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

CSS Text Direction إتجاه النصوص في لغة CSS

تحدد direction الاتجاه الأساسي للنص وتؤثر في ترتيب المحتوى ثنائي الاتجاه وفي بعض ترتيبات التخطيط. لا تنقل كل صندوق في الصفحة آليًا إلى الجهة المقابلة ولا تعكس حروف الكلمات وحدها.

  • ltr: من اليسار إلى اليمين، وهي القيمة الابتدائية.
  • rtl: من اليمين إلى اليسار.
  • الخاصية موروثة، لذلك قد يكون الاتجاه الفعلي RTL رغم غياب تصريح على العنصر نفسه.
  • يفضل تحديد اتجاه المحتوى دلاليًا بسمة HTML مثل dir="rtl" للعربية عندما يكون ذلك ممكنًا.

direction syntax

طريقة كتابة خاصية direction في لغة CSS.

CSS 
direction:value;

direction values

قيم خاصية direction في لغة CSS.

CSS 
direction:ltr|rtl|initial|inherit;

CSS Text directionwith ltr خاصية direction مع القيمة ltr في لغة CSS

تحدد direction: ltr الاتجاه الأساسي من اليسار إلى اليمين. قد تطابق الاتجاه الابتدائي، أو تلغي اتجاهًا RTL موروثًا.

CSS Text direction without ltr

خاصية direction بدون القيمة ltr في لغة CSS.

HTML 
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h1> Text direction</h1>
<p>This is the default text direction.</p>
</body>
</html>
جرّب بنفسك
جرّب بنفسك

CSS Text direction with ltr

لا يختلف الاتجاه في هذين المثالين لأن الأول يبدأ أصلًا باتجاه LTR. لا تعمم ذلك على عنصر يرث RTL من أبيه.

HTML 
p
{
  direction: ltr;
}
جرّب بنفسك

CSS Text directionwith rtl خاصية direction مع القيمة rtl في لغة CSS

تحدد direction: rtl الاتجاه الأساسي من اليمين إلى اليسار. ليست RTL القيمة الابتدائية للخاصية، لكنها مناسبة لمحتوى عربي وموروثة إذا حددها أحد الأسلاف.

CSS Text direction without rtl

خاصية direction بدون القيمة rtl في لغة CSS.

HTML 
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h1> Text direction</h1>
<p>This is the default text direction.</p>
</body>
</html>
جرّب بنفسك
جرّب بنفسك

CSS Text direction with rtl

خاصية direction مع القيمة rtl في لغة CSS.

HTML 
p
{
  direction:rtl;
}
جرّب بنفسك

CSS unicode bidi خاصية unicode-bidi في لغة CSS

تعمل unicode-bidi مع direction للتحكم في مشاركة العنصر في خوارزمية ترتيب النص ثنائي الاتجاه.

  • normal لا تنشئ تضمينًا إضافيًا؛ لا تعني أن كل الحروف تصبح من اليسار إلى اليمين.
  • bidi-override تتجاوز الترتيب الضمني وتعرض المحتوى وفق direction. لهذا تبدو الحروف الإنجليزية معكوسة في تجربة RTL هنا.
  • توجد قيم للعزل والتضمين مثل embed وisolate؛ لا تستخدم override بدل الاتجاه الطبيعي لمحتوى عربي عادي.

راجع مرجع unicode-bidi للمزيد.

unicode-bidi syntax

طريقة كتابة خاصية unicode-bidi.

CSS 
unicode-bidi:value;

unicode-bidi values

قيم خاصية unicode-bidi؛ يوضح المثال العملي bidi-override.

CSS 
unicode-bidi:normal|embed|isolate|bidi-override|isolate-override|plaintext|initial|inherit;

CSS unicode bidi

خاصية unicode bidi في لغة CSS.

HTML 
.rtl
{
  direction: rtl;
  unicode-bidi: bidi-override;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…