جهت در 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 می‌باشد به صورت راست به چپ خواهد بود.

تعیین جهت یک پاراگراف فارسی به صورت راست به چپ با کمک ویژگی direction در CSS

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

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *