این آموزش در تاریخ ۱۴۰۰/۱۱/۲۶ آپدیت شده است.
آموزش ویژگی unicode-bidi در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی unicode-bidi در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی unicode-bidi در CSS
با استفاده از ویژگی unicode-bidi در CSS میتوان متن های چند جهته ( مثلا راست به چپ یا چپ به راست ) را برای نمایش هرچه بهتر در مرورگرها کنترل نماییم.
مثلا ممکنه بخوایم از یک کلمه ( یا متن ) انگلیسی درون یک متن فارسی استفاده نماییم، در اینجا میتوانیم جهت این متن ها را برای نمایش هرچه بهتر در مرورگرها کنترل نماییم، همین تموم شد رفت
برای عمل کردن ویژگی unicode-bidi باید حتما از ویژگی direction استفاده کرده باشید.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی unicode-bidi را در زبان CSS مشاهده نمایید.
|
1 2 3 4 5 6 7 8 |
<style> .MyBox{ direction: rtl; unicode-bidi: embed; } </style> |
مثال شماره ۲ : استفاده از مقدار bidi-override برای برعکس کردن متن
|
1 2 3 4 5 6 7 8 9 |
.Text-1{ direction: rtl; unicode-bidi: bidi-override; } .Text-2{ direction: ltr; unicode-bidi: bidi-override; } |
مثال شماره ۳ : تا وقتی ویژگی Direction هستش منطقا نیاز نیست از unicode-bidi با مقدار embed استفاده کنید، خیلی راحت با استفاده از این ویژگی جهت کل صفحه رو راست چین میکنید ، به همین سادگی
|
1 2 3 4 5 6 7 |
<style> body{ direction: rtl; } </style> |
Free-Learn
جدول مشخصات ویژگی unicode-bidi در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | normal |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS2 |
| نحوه استفاده در جاوااسکریپت | object.style.unicodeBidi=”bidi-override”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی unicode-bidi در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| unicode-bidi | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
unicode-bidi: normal|embed|bidi-override|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی unicode-bidi در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| normal | مقدار پیش فرض – هیچ حالتی بروی محتوا اعمال نمیشه |
| embed | برای استفاده در تگ های درون خطی ( یا Inline ) باید حتما از ویژگی direction استفاده کنیم |
| bidi-override | برای استفاده در تگ های درون خطی ( یا Inline ) برای برعکس کردن متن انگلیسی باید مقدار direction برابر باشد با rtl و برای برعکس کردن متن فارسی باید مقدار direction برابر باشد با ltr |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- برای مشاهده عملکرد ویژگی unicode-bidi باید حتما از ویژگی direction استفاده کرده باشید
- این ویژگی فقط بروی تگ های اینلاینی یا Inline عمل میکنه
- با استفاده از تگ bdo در HTML هم میشه یک متن رو برعکس کرد
- با استفاده از ویژگی direction در CSS و یا صفت dir در HTML میتوان جهت یک تگ یا کل صفحه رو مشخص کرد
