CSS

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

ستتعلم في هذا الدرس طريقة تحويل النصوص والعناصر من اليسار إلي اليمين ومن اليمين إلي اليسار في لغة CSS بواسطة خاصية direction.

التاريخ

29 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2274

المواضيع

24
الشروحات chevron_left CSS Text Direction chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

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

تستخدم direction في لغة CSS لتغيير إتجاه العنصر من اليسار إلي اليمين أو من اليمين إلي اليسار وهذا ينطبق أيضاً علي النصوص بداخل العنصر.


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

  • ltr وهي القيمة الأفتراضية وهي أن يبدأ العنصر من جهة اليسار.
  • rtl وهي تحويل إتجاه العنصر بالكامل من جهة اليسار إلي جهة اليمين.


    وظيفية خاصية direction  في لغة CSS:

    • تحويل إتجاه النصوص من اليسار إلي اليمين والعكس.


    متي تستخدم خاصية direction؟

    • تستخدم إذا كان العنصر يبدأ من اليمين ونريد تحولي من جهة اليسار إلي جهة اليمين وهذا ينطبق علي صفحات الويب باللغة العربية واللغات التي تبدأ من جهة اليمين.
    direction syntax

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

    direction:value;
    direction values

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

    direction:ltr|rtl|initial|inherit;
    ملاحظة
    يمكن خاصية dirction إلي عنصر صفحة HTML لتحويل جميع عناصر HTML من جهة اليمين بدلاً من جهة اليسار.

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

    تستخدم خاصية direction مع القيمة ltr في لغة CSS لتحويل العنصر من جهة اليمين إلي اليسار وهي الحالة الأفتراضية.
    CSS Text direction without ltr

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

    <!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

    خاصية direction مع القيمة ltr في لغة CSS لا يوجد خلاف بين إتجاه العنصر بدون إستخدام خاصية direction والقيمة ltr أو بدون خاصية direction هذا هو الوضع الأفترضي.

    p
    {
      direction: ltr;
    }
    ملاحظة
    ltr هي إختصار إلي left to right أي إتجاه العنصر يبدأ من اليسار إلي اليمين علي صفحة الويب.

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

    تستخدم خاصية direction مع القيمة rtl في لغة CSS لتحويل العنصر من جهة اليسار إلي جهة اليمين وهي الحالة الأفتراضية.
    CSS Text direction without rtl

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

    <!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.

    p
    {
      direction:rtl;
    }
    ملاحظة
    rtl هي إختصار إلي right to left أي إتجاه العنصر يبدأ من اليمين إلي اليسار علي صفحة الويب.

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

    تستخدم خاصية unicode-bidi في لغة CSS لتغيير إتجاه الحروف من اليسار إلي اليمين أو من اليمين إلي اليسار وهذا ينطبق أيضاً علي النصوص بداخل العنصر وتعمل جنباً ألي جنب مع خاصية direction.


    قيم خاصية unicode-bid في لغة CSS:

    • normal وهي القيمة الأفتراضية وهي أن يكون إتجاه الحروف كما هي من اليسار إلي اليمين.
    • bidi-override يكون إتجاه الحروف معكوس من اليسار إلي اليمين مع خاصية direction.


      وظيفية خاصية unicode-bid في لغة CSS:

      • تحويل إتجاه الحروف من اليسار إلي اليمين والعكس.
      • لمزيد من المعلومات حول خاصية unicode-bid قم بزيارة هذا الرابط.
      direction syntax

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

      unicode-bidi:value;
      direction values

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

      unicode-bidi:normal|embed|bidi-override|initial|inherit;
      ملاحظة
      يمكن خاصية dirction إلي عنصر صفحة HTML لتحويل جميع عناصر HTML من جهة اليمين بدلاً من جهة اليسار.
      CSS unicode bidi

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

      .rtl
      {
        direction: rtl;
        unicode-bidi: bidi-override;
      }
      معلومات تهمك
      • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
      • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
      مشاركة
      0
      0
      0
      0
      عدد المشاركات
      هل هذه المعلومات نالت إعجابك ؟
      0
      0
      عدد التقييمات