ویژگی direction در CSS

آموزش ویژگی direction در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی direction در CSS با من همراه باشید.
آنچه در این جلسه میخوانید :
- ۱ ویژگی direction در CSS
- ۲ مثال از این ویژگی
- ۳ جدول مشخصات ویژگی direction در CSS
- ۴ پشتیبانی مرورگرها
- ۵ شکل نوشتاری
- ۶ جدول مقادیر ویژگی direction در CSS
- ۷ نکات و توضیحات
ویژگی direction در CSS
با استفاده از ویژگی direction
در CSS میتوان جهت نوشتاری متن یک تگ را تعریف و یا مشخص کرد. منظور از جهت نوشتاری یعنی مثلا زبان فارسی از سمت راست به چپ RTL نوشته میشه و زبانی مثه انگلیسی از سمت چپ به راست LTR ، پس این میشه جهت نوشتاری.
- زبان های راست چین ( مثه فارسی و عربی ) Right To Left
- زبان های چپ چین ( مثه انگلیسی ) Left To Right
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی direction
را در زبان CSS مشاهده نمایید.
مثال شماره ۱: استفاده در یک یا چندین تگ خاص
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
|
<style>
.Box-1{
direction: rtl;
}
.Box-2{
direction: ltr;
}
</style>
|
مثال شماره ۲: استفاده در تگ Body ( اینجوری دیگه رو تمامی تگ ها اعمال میشه)
۱
۲
۳
۴
۵
۶
۷
|
<style>
body{
direction:rtl;
}
</style>
|
مثال شماره ۳ : راست چین کردن صفحه با استفاده از صفت dir در HTML
۱
۲
۳
۴
|
<body dir=“rtl”>
.
.
</body>
|
جدول مشخصات ویژگی direction در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
مقدار پیش فرض | ltr |
---|---|
قابل ارث بری | دارد |
قابل متحرک سازی | ندارد |
نسخه | CSS2 |
نحوه استفاده در جاوااسکریپت | object.style.direction=”rtl”; |
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی direction
در CSS پشتیبانی میکنند یا خیر.
نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
direction | بله | بله | بله | بله | بله |
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
۱
|
direction: ltr|rtl|initial|inherit;
|
جدول مقادیر ویژگی direction در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
مقدار | توضیح |
---|---|
ltr | مقدار پیش فرض جهت نوشتاری متن از چپ به راست ( مناسب زبان انگلیسی ) |
rtl | جهت نوشتاری متن از راست به چپ ( مناسب زبان های فارسی و عربی ) |
initial | استفاده از مقدار پیش فرض یا اولیه | |
inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | |
نکات و توضیحات
- یک صفت به اسم dir در HTML داریم که با استفاده ازش میتونیم جهت نوشتاری متن تگ هارو مشخص نماییم. ( پس در کل صفت dir و ویژگی direction یکارو میکنن )
- بهتره و پیشنهاد میشه که همیشه از این ویژگی یا اگه خواستید از صفت dir استفاده نمایید، حتما در تگ body استفاده نمایید که تمامی عناصر موجود در صفحه راست چین شوند.
- استفاده از این ویژگی برای فارسی سازی یک قالب یا یک صفحه وب اولین و مهمترین قدم می باشد، وقتی در تگ body استفاده کنید دیگه عناصر همگی راست چین میشن.