ویژگی unicode-bidi در css کنترل متن در دو جهت مختلف

در این مقاله از سایت آموزی در مجموعه آموزش های صفات سی اس اس به بررسی و تحلیل خاصیت unicode-bidi در زبان CSS می پردازیم.

ویژگی کاربردی unicode-bidi در دومین نسخه این زبان طراحی یعنی css2 معرفی شده است.

ویژگی unicode-bidi در css کنترل متن در دو جهت مختلف

معرفی و کاربرد ویژگی unicode-bidi در زبان طراحی css

به کمک خاصیت unicode-bidi در CSS2 می توانیم متن تگ های html که با دو زبان مختلف در دو جهت مختلف هستند را کنترل کنیم.

مثلا جهت نوشته ها در زبان فارسی از راست به چپ ( rtl ) است. در حالی که در زبان انگلیسی جهت نوشته ها از چپ به راست ( ltr ) است.

حالا اگر نوشته ای دارای هر دو زبان فارسی و انگلیسی باشد، به متن دو جهته ( bidi ) یا bi-directional معروف است.

لذا فرض کنید یک عنصر html دارای متنی با هر دو زبان باشد، در این حالت مرورگر از یک الگوریتم پیچیده برای نمایش متون اینگونه تگ های html استفاده می کند.

اما ما با صفت unicode-bidi می توانیم این حالت را به کنترل خودمان در آوریم و متون تگ های html را در دو جهت مختلف مدیریت کنیم.

مقادیر صفت کاربردی unicode-bidi در زبان طراحی سی اس اس

صفت unicode-bidi که در زبان طراحی CSS2 معرفی شده است، ۸ مقدار می پذیرد که عبارتند از:

  1. مقدار normal
  2. مقدار embed
  3. مقدار bidi-override
  4. مقدار isolate
  5. مقدار isolate-override
  6. مقدار plaintext
  7. مقدار initial
  8. مقدار inherit

مقدار normal درون خاصیت unicode-bidi در زبان css

اگر خاصیت unicode-bidi را برای یک عنصر html برابر با مقدار normal قرار دهیم، در حقیقت می خواهیم حالت پیش فرض که تنها مناسب نوشته های یک جهته در تگ های html است، رخ دهد.

مقدار normal به عنوان مقدار پیش فرض خصوصیت unicode-bidi محسوب می شود.

[html] h3 {unicode-bidi: normal;} [/html]

مقدار embed درون خاصیت unicode-bidi در زبان سی اس اس

اگر خاصیت unicode-bidi را برای یک عنصر html برابر با مقدار embed قرار دهیم، در حقیقت می خواهیم متن یک عنصر اینلاین لول html که درون یک عنصر بلاک لول قرار گرفته مجوز تغییر جهت را در مرورگر داشته باشد. که برای این منظور هم می توان با خصوصیت direction ،متن عنصر خطی را در جهت مخالف متن عنصر بلاک لول قرار داد.

مثلا به تصویر زیر خوب نگاه کنید:

unicode-bidi | متن دو جهته | سایت آموزی | آموزش طراحی سایت

تصویر مورد نظر متنی را نشان می دهد که داخل یک تگ پاراگراف ( <p> ) که دارای متن انگلیسی است، متن کوچکی با تگ اینلاین لول <span> به زبان فارسی آمده است.

در شرایط پیش فرض علامت تعجب در قسمت راست متن فارسی توسط مرورگر قرار می گیرد. اما در صورتی که خصوصیت unicode-bidi را برای تگ <span> برابر با مقدار embed قرار دهیم، می توانیم از طریق خصوصیت direction جهت متن فارسی را درون تگ span به صورت rtl یا راست به چپ تعریف نماییم.

[html] span { unicode-bidi: embed; direction: rtl; } [/html]

ویژگی unicode-bidi در css کنترل متن در دو جهت مختلف

مقدار bidi-override درون خاصیت unicode-bidi در زبان css

اگر خاصیت unicode-bidi را برای یک عنصر html برابر با مقدار bidi-override قرار دهیم، در حقیقت می خواهیم برای عناصر خطی مانند مقدار embed جهت متن را با صفت direction تغییر دهیم.

و برای عناصر بلاک ، محتوای عناصر خطی در جهت direction عنصر بلاک نوشته شوند.

[html] div {unicode-bidi: bidi-override;} [/html]

مقدار isolate درون خاصیت unicode-bidi در زبان سی اس اس

در صورت استفاده از مقدار isolate درون خاصیت unicode-bidi ، عنصری که قصد داریم متن آن در جهت دیگری بیاید از خواهر و بردارانش جدا می شود. مقدار isolate فعلا به صورت تستی می باشد و در اکثر مرورگرهای اینترنتی پشتیبانی نمی شود.

مقدار isolate-override درون خاصیت unicode-bidi در زبان css

مقدار isolate-override فعلا به صورت تستی می باشد و در اکثر مرورگرهای اینترنتی پشتیبانی نمی شود.

مقدار plaintext درون خاصیت unicode-bidi در زبان سی اس اس

مقدار plaintext فعلا به صورت تستی می باشد و در اکثر مرورگرهای اینترنتی پشتیبانی نمی شود.

مقدار initial درون خاصیت unicode-bidi در زبان css

اگر خاصیت unicode-bidi را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت unicode-bidi در زبان سی اس اس

اگر خاصیت unicode-bidi را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

ویژگی unicode-bidi در css کنترل متن در دو جهت مختلف

بررسی خاصیت unicode-bidi از نظر نسخه زبان طراحی css

ویژگی کاربردی unicode-bidi در دومین نسخه این زبان طراحی یعنی css2 معرفی شده است.

بررسی ساختاری خصوصیت unicode-bidi در زبان طراحی سی اس اس