جهت در CSS – ویژگی direction

ویژگی direction در CSS برای تعیین جهت متن، ستون های جدول و سرریز افقی مورد استفاده قرار می‌گیرد.

مقدار پیشفرض این ویژگی، ltr (برگرفته از حروف ابتدای کلمات در عبارت left to right به معنی چپ به راست) است. این مقدار برای متون زبان های چپ به راست (مانند زبان انگلیسی) به کار می‌رود. برای متون زبان های راست به چپ (مانند زبان فارسی و عربی) نیز از مقدار rtl (برگرفته از حروف ابتدای کلمات در عبارت right to left به معنی راست به چپ) استفاده می‌شود.

البته فراموش نکنید معمولا به جای استفاده مستقیم از ویژگی direction، از خصوصیت dir در المان های HTML برای تعیین جهت متن استفاده می‌شود.

نحوه استفاده از ویژگی direction برای تعیین جهت در CSS

برای تعیین جهت و استفاده از ویژگی direction در CSS کافیست مقدار موردنظر خود نظیر ltr یا rtl را مشابه با مثال زیر به این ویژگی تخصیص دهید.

.ptext {
  direction: rtl;
}

در مثال فوق، جهت متن المان‌های دارای کلاس ptext به صورت راست به چپ تعیین می‌شود. فرض کنید دو المان <p> مطابق با نمونه زیر در سند HTML قرار دارند.

<p>This paragraph is in English.</p>
<p class="ptext">این پاراگراف به زبان فارسی است و جهت آن به صورت راست به چپ تعیین شده است.</p>

نتیجه اعمال قانون CSS پیشین روی کد HTML فوق به صورت زیر رندر می‌شود. از آنجایی که جهت پاراگراف اول مشخص نشده است با همان جهت پیشفرض (یعنی چپ به راست) نمایش داده می‌شود. جهت پاراگراف دوم (شامل متن فارسی) نیز با توجه به اینکه دارای کلاس ptext می‌باشد به صورت راست به چپ خواهد بود.

بازگشت به فهرست مجموعه آموزشی CSS