🌟 صفت dir :
همانطور که می دانیم ، جهت قرار گیری المان ها و محتویات صفحه در حالت پیشفرض ، از چپ به راست می باشد . اما برای طراحی صفحات وب و سایت هایی به زبان فارسی و عربی و ... نیاز است جهت محتوا و المان ها ، از راست به چپ کنید .
🌟 صفت dir ، وظیفه ی تعیین جهت المان ها را بر عهده دارد . اگر بخواهیم جهت کل صفحه از راست به چپ شود ، کافیست این صفت را در بزرگترین المان محتوای صفحه یعنی تگ body قرار دهیم . با این کار هر چه در المان body قرار دارد . یعنی محتوا و المان های کل صفحه تغییر جهت می یابند
<element dir="value" >
🌟 صفت dir ، سه مقدار می گیرد :
1 ) مقدار ltr : این مقدار ، خلاصه شده ی عبارت left to right است و تعیین می کند جهت المان از چپ به راست باشد . این مورد به صورت پیشفرض مرورگر می باشد .
2 ) مقدار rtl : این مقدار ، خلاصه شده ی عبارت right to left است و تعیین می کند جهت المان از راست به چپ باشد . در طراحی سایت های فارسی خودمان مجبوریم جهت کل صفحه را rtl کنیم .
3 ) مقدار auto : یک زمانی است که ما نمی دانیم جهت متنی یک زبان به کدام سمت است که البته خیلی کم پیش می آید . در این موارد یه مرورگر که آشنا به اکثر زبانهاست ، اجازه می دهیم که خودش دست به کار شود و جهت را یه صورت خودکار تعیین کند .
🌟 دقت شود که وقتی صفت dir در یک المان قرار می گیرد ، مکان آن المان عوض نمی شود . بلکه المان های درون آن ، تایع آن جهت می شوند .
🌟 صفت dir توسط همه ی مرورگرها پشتیبانی می شود .
🌟 مثال عملی :
راست چین کردن صفحه برای محتوا . فرض کنید می خواهیم یک متنی را به صورت راست چین در مرورگر نمایش دهیم . برای اینکار لزوما باید جهت صفحه را راست به چپ کنیم .
1 ) فایل html مثال قبل را در notepad باز کنید
2 ) در تگ body ، صفت dir با مقدار rtl را وارد کنید . سپس یک متن فارسی در المان body قرار دهید و صفحه را ذخیره کنید .
<!doctype html>
<html>
<link rel="stylesheet" href="new1.css" />
<head></head>
<body class="style" dir="rtl">
سلام . این یک متن فارسی است که قرار است در صفحه از راست به چپ نمایش داده شود . همانطور که می بینید این عمل به درستی انجام شده است !
</body>
</html>
3 ) اکنون فایل html را با مرورگر باز کنید و نتیجه ی ایجاد شده را مشاهده کنید .
برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.
