تراز متن (Text Alignment)
در این بخش «تراز متن (Text Alignment)» را با مثال های کوتاه می بینیم. تراز یعنی جهت قرارگیری خطوط متن. مانند دفتر مدرسه، تیتر می تواند وسط، چپ، یا راست باشد.
تراز متن با text-align
ویژگی «text-align» تراز افقی متن را می سازد. مقدارهای مهم: left ،right ،center ،justify.
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
<h1>وسط چین</h1>
<h2>چپ چین</h2>
<h3>راست چین</h3>
کشیده سازی خطوط با justify
مقدار «justify» خطوط را از هر دو طرف صاف می کند. مانند متن روزنامه ها.
<style>
div {
text-align: justify;
}
</style>
<div>متن نمونه برای نمایش حالت justify.</div>
تراز خط آخر با text-align-last
ویژگی «text-align-last» تراز «آخرین خط» را مشخص می کند. می تواند right ،center یا justify باشد.
<style>
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
</style>
<p class="a">آخرین خط راست چین می شود.</p>
<p class="b">آخرین خط وسط چین می شود.</p>
<p class="c">آخرین خط justify می شود.</p>
تراز عمودی (Vertical Alignment)
«vertical-align» تراز عمودی عنصر inline یا سلول را مشخص می کند. گزینه ها شامل baseline ،middle ،top و … است.
<style>
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
</style>
<p>نمونه های مختلف تراز عمودی تصویر در متن.</p>
جهت متن (Direction) و unicode-bidi
«direction» جهت نوشتار را تعیین می کند. «unicode-bidi» بهOverride کمک می کند تا زبان های مختلف درست نمایش یابند.
<style>
p {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
<p>این پاراگراف راست به چپ است.</p>
نکته: متن های طولانی با justify زیبا می شوند؛ اما در موبایل محتاط باش.
گام های عملی سریع
- تیتر را با center جذاب تر کن.
- پاراگراف ها را بسته به زبان راست چین یا چپ چین کن.
- در متن های طولانی، justify را امتحان کن.
برای مطالعه بیشتر درباره تراز متن و موضوعات نزدیک، صفحه متن و تزئین متن را ببین.
جمع بندی سریع
- text-align تراز افقی را تنظیم می کند.
- justify دو حاشیه را صاف می کند.
- text-align-last فقط خط آخر را می چیند.
- vertical-align برای inline و جدول است.
- direction و unicode-bidi برای زبان ها ضروری اند.