ديفكوم- Css text alignment التفاصيل

المقالات

رجوع

Css text alignment

-

في هذا الدرس بنتعلم كيف ممكن تغيير اتجاه النص حيث يوفر CSS عدد من الخصائص الي من يمكن خلالها التحكم باتجاه.

بنتعلم في هذا الدرس الخصائص التالية :

⦁ text-align

⦁ text-align-last

⦁ direction

⦁ unicode-bidi

⦁ vertical-align

align text

تمام خلونا نعمل مثال حتى نفهم الموضوع بشكل أفضل:

نبدأ بإنشاء ملف HTML باسم Textalign وبعدها نضيف الكود التالي:

<!DOCTYPE html>
<html>
    <style>
       body {
            color: blue;
            text-align: right;
            }
    div {
            color: green;
        }
    </style>
<body>
    مرحبا بكم 
    <hr>
    Body تطبيق الاتجاه على النص في  
   <div> align تطبيق </div>            
</body>
</html>

شغل الصفحة ونشوف النتيجة (الصورة)

طيب نفهم الكود:

الكود التالي:

       body {
            color: blue;
            text-align: right;
            }

بالإضافة الى تطبيق (اللون ازرق) على جميع elements الموجودة في صفحة HTML داخل الجزء Body ، تم إضافة اتجاه النص الى اليمين.

 text-align : right;

تستخدم لمحاذاة النص لتعيين المحاذاة الأفقية horizontal alignment للنص.

تمام طريقة الكتابة بتكون بالشكل:

text-align: value;

نتعرف على القيم التي يمكن تطبيقها في parameter الي تستخدم هنا :

القيمة	الوصف
left	محاذة النص الى اليسار div { text-align: left; }
right	محاذة النص الى اليمين div { text-align: right; }
center	توسيط النص div { text-align: center; }
Justify	ضبط النص div { text-align: justify; }
start	إذا كان الاتجاه من اليسار إلى اليمين ، فسيتم محاذاة النص إلى اليسار إذا كان الاتجاه من اليمين إلى اليسار ، فسيتم محاذاة النص إلى اليمين div { text-align: start; }
end	إذا كان الاتجاه من اليسار إلى اليمين ، فسيتم محاذاة النص إلى اليمين إذا كان الاتجاه من اليمين إلى اليسار ، فسيتم محاذاة النص إلى اليسار div {text-align: end؛ }
inherit	سوف يرث العنصر محاذاة النص من parent element div { text-align: inherit; }

مثال : توسيط النص في Div

div { text-align: center; }

مثال : محاذة النص الى اليسار في Div

div { text-align: left; }

مثال : محاذة النص الى اليمين في Div

div { text-align: right; }

Text Align Last

في هذه الخاصية text-align-last يتم تحديد كيفية محاذاة السطر الأخير من النص.

نعدل على المثال السابق ونشوف النتيجة

عدل الكود الي:

<!DOCTYPE html>
<html>
    <style>
       body {
            color: blue;
            text-align: right;
            
            }
    div {
            color: green;
            text-align-last: left;
        }
    </style>
<body>
    مرحبا بكم 
    <hr>
    Body تطبيق الاتجاه على النص في  
   <div>  تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص   
       
   </div>            
</body>
</html>

شوف النتيجة :

لاحظ ان اخر سطر في div تم محاذاته الى اليسار

Text Direction

تستخدم الخصائص direction و unicode-bidi لتغيير اتجاه النص في elements، الخاصية unicode-bidi تُستخدم مع خاصية direction لتعيين أو إرجاع ما إذا كان يجب تجاوز النص لدعم لغات متعددة في نفس المستند.

عدل على الكود السابق كالتالي :

<!DOCTYPE html>
<html>
    <style>
       body {
            color: blue;
            text-align: right;
            
            }
    div {
            color: green;
            text-align-last: left;
        }
        p {
  direction: ltr;
  unicode-bidi: bidi-override;
}
    </style>
<body>
    مرحبا بكم 
    <hr>
    Body تطبيق الاتجاه على النص في  
   <div>  تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص   
       
   </div>      
   <p>  تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص   
   </p>
</div>                  
</body>
</html>

شغل الصفحة وشوف النتيجة (بتكون )

لاحظ ان تم تغير اتجاه النص في <P> الى Ltr مع تطبيق unicode-bidi

Vertical Alignment

تستخدم هذه الخاصية لتحديد المحاذاة الرأسية vertical alignment للعنصر.

نعدل على الكود السابق :

<!DOCTYPE html>
<html>
    <style>
       body {
            color: blue;
            text-align: right;
            
            }
    div {
            color: green;
            text-align-last: left;
        }
        p {
  direction: rtl;
  /*unicode-bidi: bidi-override;*/
}
.img1 {
    
  vertical-align: baseline;
  width: 30px;
  height: 30px;
}
.img2 {
  vertical-align: text-top;
  width: 30px;
  height: 30px;
}
.img3 {
  vertical-align: text-bottom;
  width: 30px;
  height: 30px;
}
    </style>
<body>
    مرحبا بكم 
    <hr>
    Body تطبيق الاتجاه على النص في  
   <div>  تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص   
       
   </div>      
   <p>  تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص    تطبيق الاتجاه على النص   
   </p>
   <p> <img class="img1"  src="bellAlert.gif">            تطبيق baseline للصورة
</p>
<p> <img class="img2" src="bellAlert.gif">  تطبيق text-top للصورة   
</p>
<p> <img class="img3" src="bellAlert.gif">   تطبيق text-bottom للصورة 
</p>
  
</div>                  
</body>
</html>