تنظیمات جهت صفحه و ترازبندی متن ها در CSS

تنظیمات پیش فرض صفحات وب برای زبان لاتین در نظر گرفته شده است که نوشتار آن از سمت چپ صفحه آغاز می شود. در صورتیکه قصد داشته باشید محتوای فارسی در صفحات خود قرار دهید ابتدا باید جهت آن را تنظیم نمایید.

نحوه استفاده

در صفحات وب دو نوع جهت (direction) وجود دارد:

LTR: چپ به راست، که برای نوشته های لاتین مناسب می باشد.
RTL: راست به چپ که برای زبان هایی مانند فارسی و عربی مناسب است.

بنابراین از این پس قبل از انجام هرگونه کاری می بایست direction صفحه را تعیین نمایید.

<style>
  body{
    direction: rtl;
  }
</style>

نکته: هنگامیکه تنظیماتی را برای body اعمال میکنیم، بصورت پیش فرض روی تمامی عناصر زیر مجموعه آن نیز اعمال می شوند.

ترازبندی

پس از تعیین جهت صفحه، می توان ترازبندی آن را نیز تعیین نمود که توسط دستور text-align و به چهار حالت امکان پذیر است:

right: راست چین.
center: وسط چین.
left: چپ چین.
justify: ترازبندی دو طرفه.

  direction: rtl;
  text-align: justify;
}

هنگامیکه مقدار text-align را برابر justify قرار دهید، متن های استفاده شده از هر دو طرف در یک راستا خواهند بود.

مثال:

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      body {
        direction: rtl;
        text-align: justify;
      }
      div{
        width: 400px;
        height: auto;
        background-color: lightgray;
        margin: 10px auto;
        border: 1px solid black;
        padding: 10px 15px;
      }
    </style>
  </head>
  <body>
    <div>
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
    </div>
  </body>
</html>