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