هذا هو الجزء الثاني من درس تنسيق النصوص في CSS , وللانتقال للجزء الاول استخدم هذا الرابط : تنسيق النصوص في CSS - الجزء الأول .
لزيادة المسافة نستخدم قيمة موجبة مثل 5px أما لإنقاص المسافة نستخدم قيمة سالبة مثل 4px- , مثال :
ملاحظة : يمكنك استخدام هذه الخاصية مع النصوص المكتوبة باللغة العربية .
لزيادة المسافة نستخدم قيمة موجبة مثل 5px أما لإنقاص المسافة نستخدم قيمة سالبة مثل 4px- , مثال :
لزيادة المسافة نستخدم قيمة كبيرة مثل 30px أما لإنقاص المسافة نستخدم قيمة صغيرة مثل 13px, مثال :
لجعل النص يتجه من اليمين إلى اليسار نجعل قيمة الخاصية direction تساوي rtl (يعني right to left) , ولجعله يتجه من اليسار إلى اليمين نجعل قيمة الخاصية direction تساوي ltr (يعني left to right) , مثال :
مثال آخر يوضح التفاف النص بداخل عنصر textarea :
ملاحظة : لا نطبق الخاصية vertical-align على النصوص!! بل نطبقها مع الصورة التي نريد محاذاة النص معها , يعني الصورة التي وضعناها بداخل النص , والأمثلة ستوضح لك أكثر :
قم بتغيير كود CSS في المثال السابق بهذا الكود :
قم بتغيير كود CSS في المثال السابق بهذا الكود :
سادساً : المسافة بين الأحرف
يمكنك زيادة او انقاص المسافة بين الاحرف عن طريق الخاصية letter-spaceing ولتغيير القيم نستخدم وحدة البيكسل px وهناك وحدات اخرى لكن البيكسل اكثرها استخداماً .لزيادة المسافة نستخدم قيمة موجبة مثل 5px أما لإنقاص المسافة نستخدم قيمة سالبة مثل 4px- , مثال :
h1
{ letter-spacing: 3px;
}
h2
{ letter-spacing: -4px;
}
بعد تطبيقك للمثال ستكون النتيجة مشابهة للصورة التالية :
ملاحظة : يمكنك استخدام هذه الخاصية مع النصوص المكتوبة باللغة العربية .
سابعاً : المسافة بين الكلمات
هذه الخاصية تشابه في عملها الخاصية السابقة حيث أنها تمكنك من التحكم بالمسافة بين الكلمات زيادتها أو انقاصها , ويمكنك فعل هذا بواسطة الخاصية word-spacing , ولتغيير القيم نستخدم وحدة البيكسل px .لزيادة المسافة نستخدم قيمة موجبة مثل 5px أما لإنقاص المسافة نستخدم قيمة سالبة مثل 4px- , مثال :
h1
{ word-spacing: 3px;
}
h2 { word-spacing: -2px; }
ستصبح النتيجة مشابهة للصورة التالية :
ثامناً : المسافة بين الأسطر
تستطيع زيادة أو انقاص المسافة بين الأسطر في الفقرات بواسطة الخاصية line-height (وتعني ارتفاع السطر) , أما القيمة فتكون بوحدة البيكسل .لزيادة المسافة نستخدم قيمة كبيرة مثل 30px أما لإنقاص المسافة نستخدم قيمة صغيرة مثل 13px, مثال :
p { line-height: 35px; }
قم بتطبيق المثال وستصبح النتيجة كالصورة التالية :
تاسعاً : تغيير اتجاه النص للعناصر Text Direction
الاتجاه الافتراضي للنصوص في الويب هو من اليسار إلى اليمين , يعني لو كتبت نصاً باللغة العربية ستجد أنه يبدأ من اليسار ويتجه إلى اليمين ولكن يمكنك تغيير اتجاه النص بواسطة الخاصية direction .لجعل النص يتجه من اليمين إلى اليسار نجعل قيمة الخاصية direction تساوي rtl (يعني right to left) , ولجعله يتجه من اليسار إلى اليمين نجعل قيمة الخاصية direction تساوي ltr (يعني left to right) , مثال :
h1 { direction: rtl; }
h2 { direction: ltr; }
والنتيجة مشابهة للصورة :
عاشراً : إلتفاف النص في العناصر Text Wrapping
للتحكم في إلتفاف النص بداخل أي عنصر (قد يكون هذا العنصر body أو div أو textarea .. وغيرها) , يمكنك هذا بواسطة الخاصية white-space , وهي تحمل قيمتين :الاولى : wrap
وهي القيمة الافتراضية , هذه القيمة تمكنك من جعل النص يلتف وينتقل إلى أسطر جديدة ولا يخرج عن إطار العنصر , مثال :
p { white-space: wrap; }
ستكون النتيجة كالصورة التالية :
الثانية : nowrap
هذه القيمة تمكنك من إيقاف التفاف النص وتجعل النص يصبح كله في سطر واحد فقط!! كما تلاحظ ظهور شريط التمرير أسفل العنصر , مثال :
p { white-space: nowrap; }
والنتيجة كالتالي :
مثال آخر يوضح التفاف النص بداخل عنصر textarea :
textarea { white-space: nowrap; }
والنتيجة تشبه الصورة التالية :
أحد عشر : المحاذاة العمودية Vertical Alignment
نستخدم المحاذاة العمودية عندما نضع صورة بداخل النص (مثلاً نضع الوسم img بداخل الوسم p ) عندها نحتاج إلى جعل النص محاذياً لأعلى الصورة او محاذياً لأسفلها أو محاذياً لوسط الصورة , ونستخدم في هذا الخاصية vertical-align .ملاحظة : لا نطبق الخاصية vertical-align على النصوص!! بل نطبقها مع الصورة التي نريد محاذاة النص معها , يعني الصورة التي وضعناها بداخل النص , والأمثلة ستوضح لك أكثر :
* جعل النص محاذياً لأعلى الصورة :
لفعل هذا نجعل قيمة الخاصية vertical-align للصورة تساوي top , انظر لهذا المثال :
<html>
<head>
<style>
img { vertical-align: top; }
</style>
</head>
<body dir="rtl">
<h3>
تمت محاذاة النص مع أعلى الصورة
<img src="shifrah_logo.png"
/>
</h3>
</body>
</html>
والنتيجة كالتالي :
* جعل النص محاذياً لأسفل الصورة :
لفعل هذا نجعل قيمة الخاصية vertical-align للصورة تساوي bottom , انظر للمثال :قم بتغيير كود CSS في المثال السابق بهذا الكود :
img { vertical-align: bottom; }
والنتيجة كالتالي :
* جعل النص محاذياً لوسط الصورة :
لفعل هذا نجعل قيمة الخاصية vertical-align للصورة تساوي middle , انظر للمثال :قم بتغيير كود CSS في المثال السابق بهذا الكود :
img { vertical-align: middle; }
والنتيجة كالتالي :
انتهى الجزء الثاني من درس تنسيق النصوص في CSS , وللعودة للجزء الاول استخدم هذا الرابط : تنسيق النصوص في CSS - الجزء الأول .