فاصله متن (Text Spacing)
اینجا درباره «فاصله متن» حرف می زنیم. «فاصله متن» یعنی کنترل فاصله حروف، کلمات، خطوط، و تورفتگی اول خط. مثل فاصله دفتر مشق، اما برای وب.
ویژگی های اصلی فاصله متن
CSS چند ویژگی دارد: «text-indent» برای تورفتگی، «letter-spacing» برای فاصله حروف، «word-spacing» برای فاصله کلمات، «line-height» برای فاصله خطوط، و «white-space» برای مدیریت فاصله های خالی.
تورفتگی اول خط با text-indent
ویژگی «text-indent» تورفتگی خط اول را تعیین می کند. مقدار منفی هم مجاز است و خط را به چپ می برد.
<style>
p {
text-indent: 50px;
}
</style>
<p>این پاراگراف خط اول تو رفته است.</p>
فاصله حروف با letter-spacing
«letter-spacing» فاصله بین کاراکترها را عوض می کند. مقدار منفی هم مجاز است.
<style>
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}
</style>
<h1>HELLO</h1>
<h2>hello</h2>
فاصله خطوط با line-height
«line-height» فاصله بین خطوط را تنظیم می کند. مقدار منفی مجاز نیست.
<style>
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
</style>
<p class="small">خطوط فشرده تر هستند.</p>
<p class="big">خطوط بازتر و خواناتر می شوند.</p>
فاصله کلمات با word-spacing
«word-spacing» فاصله بین کلمات را زیاد یا کم می کند. مقدار منفی هم مجاز است.
<style>
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}
</style>
<p class="one">فاصله ی بین کلمات بیشتر است.</p>
<p class="two">فاصله ی بین کلمات کمتر است.</p>
مدیریت فاصله های خالی با white-space
«white-space» تعیین می کند فاصله ها و شکستن خط چگونه باشد. مقادیر مهم: normal، nowrap، pre، pre-line، pre-wrap.
<style>
p {
white-space: nowrap;
}
</style>
<p>این متن در یک خط می ماند و نمی شکند.</p>
گام های تمرینی سریع
- یک پاراگراف یا تیتر بساز.
- کلاس بده و ویژگی فاصله را تنظیم کن.
- خروجی را مقایسه و مقدار را بهینه کن.
نکته: برای خوانایی، «line-height» را کمی بیشتر از 1 بگذار.
هشدار: «letter-spacing» و «word-spacing» منفی را با احتیاط استفاده کن؛ متن سخت خوان می شود.
برای متن های عمومی صفحه متن و برای چیدمان، صفحه تراز متن را ببین. همچنین راهنمای فاصله متن را نشانه گذاری کن.
جمع بندی سریع
- text-indent تورفتگی خط اول را می سازد.
- letter-spacing فاصله حروف را تنظیم می کند.
- word-spacing فاصله کلمات را تغییر می دهد.
- line-height فاصله خطوط را تعیین می کند.
- white-space رفتار شکستن خط را کنترل می کند.