CSS Text Spacing
-
في هذا الدرس بنتعلم كيف ممكن التحكم بالمسافات في النص حيث يوفر CSS عدد من الخصائص الي من يمكن خلالها التحكم بها.
بنتعلم في هذا الدرس الخصائص التالية :
⦁ text-indent
⦁ letter-spacing
⦁ line-height
⦁ word-spacing
⦁ white-space
Text Indentation
تُستخدم هذه الخاصية لإضافة مسافة بادئة للنص للسطر الأول من النص:
نبدأ بإنشاء ملف HTML باسم TextSpacing وبعدها نضيف الكود التالي:
<!DOCTYPE html>
<html>
<style>
body {
color: blue;
text-align: left;
}
div {
color: green;
text-indent: 50px;
}
</style>
<body>
<body>
<div> apply text-indent apply text-indent apply text-indent apply text-indent apply text-indent apply text-indent apply text-indent apply text-indent apply text-indent apply text-indent apply text-indent apply text-indent apply text-indent
</div>
</div>
</body>
</html>
شغل الصفحة ونشوف النتيجة (الصورة)
طيب نفهم الكود:
الكود التالي:
div {
color: green;
text-indent: 50px;
}بالإضافة الى تطبيق (اللون الاخضر) على div elements الموجودة في صفحة HTML ، تم إضافة مسافة بادئة في اول الفقرة بمقدار 50px.
Text Indentation with rtl
تمام لاحظ ان تم تطبيق هذه المسافة على النص باللغة الإنجليزية طيب شو لو كان النص باللغة العربية كيف ممكن نضيف مسافة من البداية:
المطلوب هو تعديل الكود الي الآتي :
<!DOCTYPE html>
<html>
<style>
body {
color: blue;
text-align: left;
}
div {
color: green;
direction:rtl;
text-indent:50px;
text-align:justify
}
</style>
<body>
<body><div> تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة</div>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة:
Letter Spacing
تُستخدم هذه الخاصية لتحديد المسافة بين الأحرف في النص.
وحتي نفهم الموضوع نعدل على المثال السابق :
<!DOCTYPE html>
<html>
<style>
body {
color: blue;
text-align: left;
}
div {
color: green;
direction:rtl;
text-indent:0px;
text-align:justify
}
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}
</style>
<body>
<html><h1>مرحبا بكم </h1><h2>حياكم الله</h2><div> تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة</div>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة:
Line Height
تُستخدم خاصية line-height لتحديد المسافة بين السطور:
نعدل على المثال السابق الى
<!DOCTYPE html>
<html>
<style>
body {
color: blue;
text-align: left;
}
div {
color: green;
direction:rtl;
text-indent:0px;
text-align:justify;
line-height: 2.8;
}
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}
</style>
<body>
<html><h1>مرحبا بكم </h1><h2>حياكم الله</h2><div> تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة</div>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة :
Word Spacing
تُستخدم خاصية word spacing لتحديد المسافة بين الكلمات في النص.
عدل الكود في الملف السابق الى :
<!DOCTYPE html>
<html>
<style>
body {
color: blue;
text-align: left;
}
div {
color: green;
direction:rtl;
text-indent:0px;
text-align:justify;
line-height: 2.8;
word-spacing: 10px;
}
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}
</style>
<body>
<html><h1>مرحبا بكم </h1><h2>حياكم الله</h2><div> تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة تطبيق المسافة البادئة</div>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة:
White Space
تحدد خاصية white-space كيفية معالجة White spaceداخل elements.بحيث يتم تنسيق النص حسب هذه الخاصية في حال اعطاءها قيمة nowrap فسيتم عرض جميع النص في سطر واحد.
طريقة الكتابة
p {
white-space: nowrap;
}جرب طبق هذه الخاصية وراسلنا اذا في أشياء غير واضحه
اترك تعليقك