آموزش ویژگی unicode-bidi در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی unicode-bidi در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی unicode-bidi در CSS
با استفاده از ویژگی unicode-bidi در CSS میتوان متن / محتواهای چند جهته ( مثلا راست به چپ یا چپ به راست ) را برای نمایش هرچه بهتر در مرورگرها کنترل نماییم.
مثلا ممکنه بخوایم از یک کلمه ( یا متن ) انگلیسی درون یک متن فارسی استفاده نماییم، در اینجا میتوانیم جهت این متن ها را برای نمایش هرچه بهتر در مرورگرها کنترل نماییم.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی unicode-bidi را در زبان CSS مشاهده نمایید.
|
1 2 3 4 5 6 7 8 |
<style> span.f1{ direction:rtl; unicode-bidi:embed; } </style> |
مثال شماره ۲ : برعکس کردن متن
|
1 2 3 4 5 6 7 8 9 |
h2.f1{ direction:rtl; unicode-bidi:bidi-override; } h2.f2{ direction:ltr; unicode-bidi:bidi-override; } |
Free-Learn
جدول مشخصات ویژگی unicode-bidi در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | normal |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS2 |
| نحوه استفاده در جاوااسکریپت | object.style.unicodeBidi=”bidi-override”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی unicode-bidi در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| 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 ) همانند embed عمل میکند و فقط تا ۱ سطح از عنصر رو تحت تاثیر قرار میدهد. یعنی اگه عنصر درون خطی درون یک عنصر بلاکی قرار گرفته باشد دیگه عمل نخواهد کرد. برای عناصر بلاکی میتوان جهت متن را با توجه به مقدار ویژگی direction برعکس کرد. برای برعکس کردن متن انگلیسی باید مقدار direction برابر باشد با rtl و برای برعکس کردن متن فارسی باید مقدار direction برابر باشد با ltr |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- برای استفاده و مشاهده عملکرد ویژگی unicode-bidi باید حتما از ویژگی direction استفاده کرده باشید.
این ویژگی دارای ۳ مقدار دیگه به شرح زیر می باشد ولی معمولا ازشون استفاده ای نمیشه، چون اکثر مرورگرهای اینترنتی یا اصلا ازشون پشتیبانی نمیکنند یا بصورت جزئی پشتیبانی میکنند :
- isolate
- isolate-override
- plaintext
- isolate » جهت عنصر بدون در نظر گرفتن وضعیت خواهر و برادرانش محاسبه شود.
- isolate-override » با برگرفتن از isolate و bidi-override عمل میکند.
- plaintext » جهت عنصر بدون در نظر گرفتن وضعیت دو طرفه والد ( عنصر پدر ) یا مقدار ویژگی direction محاسبه شود.
