ویژگی unicode-bidi در CSS برای کنترل نحوه نمایش متن دوجهته در یک سند استفاده می‌شود. متن دوجهته شامل هم متن از چپ به راست (LTR) و هم از راست به چپ (RTL) است.
ویژگی unicode-bidi به توسعه‌دهندگان اجازه می‌دهد تا رفتار پیش‌فرض مرورگر را بازنویسی کرده و اطمینان حاصل کنند که متن دوجهته به درستی نمایش داده می‌شود.
مقادیر ممکن:
-
normal: این مقدار پیش‌فرض است و مشخص می‌کند که متن باید بر اساس جهت ذاتی خود متن نمایش داده شود. به عبارت دیگر، از جهت حروف در متن برای تعیین نحوه نمایش استفاده می‌کند. -
embed: این مقدار برای تنظیم جهت متن در یک عنصر به صورت صریح استفاده می‌شود. زمانی که شماunicode-bidiرا بهembedتنظیم می‌کنید، می‌توانید از ویژگیdirectionنیز استفاده کنید تا مشخص کنید متن باید از چپ به راست (ltr) یا از راست به چپ (rtl) نمایش داده شود. -
bidi-override: این مقدار یک تغییر ناگهانی برای عناصر درونی ایجاد می‌کند. در مورد عناصر بلوکی، الگوریتم متن دوجهته مرورگر را نادیده می‌گیرد و متن داخل هر عنصر درونی را به طور دقیق بر اساس ویژگیdirectionجریان می‌دهد. -
isolate: این مقدار عنصر را از خواهرانش جدا می‌کند. -
isolate-override: این مقدار رفتار ایزوله کلمه کلیدیisolateرا به محتوای اطراف و رفتار دیدگاه متن دوجهته کلمه کلیدیbidi-overrideبه محتوای داخلی می‌دهد. -
plaintext: جلوگیری از تأثیر الگوریتم‌های متن دوجهته بر متن درون عنصر.
اعمال به: تمام عناصر موقعیت‌دار، اما برخی از مقادیر تأثیری بر عناصر غیر مستقیم ندارند.
ترکیب unicode-bidi و direction تنها ویژگی‌هایی هستند که تحت تأثیر ویژگی مختصر هستند. این ویژگی عموماً توسط طراحان انواع مستند (DTD) استفاده می‌شود و معمولاً برای طراحان وب یا نویسندگان مشابه توصیه نمی‌شود.
normal Value
در این مثال، ویژگی unicode-bidi با مقدار normal استفاده شده است. این مقدار به مرورگر می‌گوید که متن باید به صورت پیش‌فرض و با توجه به جهت متن خود نمایش داده شود. به عبارت دیگر، از جهت کاراکترهای متن برای تعیین نحوه نمایش متن استفاده می‌شود.
در این مثال، یک div با کلاس box وجود دارد که متن داخل آن به صورت پیش‌فرض از راست به چپ (RTL) نمایش داده می‌شود. این متن شامل متن آزمایشی Lorem Ipsum است.
<html>
<head>
<style>
.box {
direction: rtl;
unicode-bidi: normal;
color:red;
}
</style>
</head>
<body>
<h2>CSS unicode-bidi - normal Value</h2>
<p>The following text is displayed in its default order from right-to-left direction.</p>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>در این مثال، متن “Lorem Ipsum” به صورت پیش‌فرض و با توجه به جهت متن خود (RTL) نمایش داده می‌شود.
bidi-override Value
در این مثال، ویژگی unicode-bidi با مقدار embed استفاده شده است. این مقدار به مرورگر می‌گوید که جهت متن باید درون محتوای اطراف آن تعبیه شود. زمانی که جهت به rtl تنظیم شود، متن به صورت راست به چپ (RTL) نمایش داده می‌شود.
<html>
<head>
<style>
.box {
direction: rtl;
unicode-bidi: embed;
color:red;
}
</style>
</head>
<body>
<h2>CSS unicode-bidi - embed Value</h2>
<p>The following text is displayed in its default order from right-to-left direction.</p>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>در این مثال، یک div با کلاس box وجود دارد که متن داخل آن با جهت RTL نمایش داده می‌شود. به عبارت دیگر، متن “Lorem Ipsum” به صورت راست به چپ (RTL) نمایش داده می‌شود.
isolate Value
در این مثال، مقدار unicode-bidi به isolate تنظیم شده است. این مقدار برای جدا کردن متن دو جهتی از متن اطراف آن استفاده می‌شود.
<html>
<head>
<style>
.box {
direction: rtl;
unicode-bidi: isolate;
color:red;
}
</style>
</head>
<body>
<h2>CSS unicode-bidi - isolate Value</h2>
<p>The following text is displayed in its default order from right to left.</p>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>isolate-override Value
در این مثال، مقدار unicode-bidi به isolate-override تنظیم شده است. این مقدار برای جدا کردن و نادیده گرفتن متن دو جهتی از متن اطراف آن استفاده می‌شود.
<html>
<head>
<style>
.box {
direction: rtl;
unicode-bidi: isolate-override;
color:red;
}
</style>
</head>
<body>
<h2>CSS unicode-bidi - isolate-override Value</h2>
<p>The following text is displayed in reverse order of the characters in right-to-left direction.</p>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>در این مثال، یک div با کلاس box وجود دارد که متن داخل آن به صورت RTL نمایش داده می‌شود و از متن اطرافش جدا می‌شود. به عبارت دیگر، متن “Lorem Ipsum” به صورت معکوس نمایش داده می‌شود و از متن اطراف آن مجزاست.
plaintext Value
در این مثال، مقدار unicode-bidi به plaintext تنظیم شده است. این مقدار به معنای رساندن متن به عنوان متن ساده بدون اعمال هیچگونه الگوریتم متن دو جهتی استفاده می‌شود.
<html>
<head>
<style>
.box {
direction: rtl;
unicode-bidi: plaintext;
color:red;
}
</style>
</head>
<body>
<h2>CSS unicode-bidi - plaintext Value</h2>
<p>The following text is displayed in its default order from left-to-right direction.</p>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>در این مثال، یک div با کلاس box وجود دارد که متن داخل آن به صورت RTL نمایش داده می‌شود، اما هیچ الگوریتم خاصی برای تغییر جهت متن اعمال نمی‌شود. بنابراین، متن به صورت معمول از چپ به راست نمایش داده می‌شود.
Related Properties
ویژگی CSS unicode-bidi برای کنترل نحوه نمایش متن دوجهتی در یک سند استفاده می‌شود. در زیر لیستی از ویژگی‌های مرتبط با unicode-bidi آورده شده است:
- direction: این ویژگی تنظیم می‌کند که متن در یک عنصر بلوکی به کدام جهت نمایش داده شود. این ویژگی می‌تواند مقادیر
ltr(از چپ به راست) یاrtl(از راست به چپ) را بپذیرد.
این ویژگی‌ها برای کنترل دقیق‌تر جهت نمایش متن دوجهتی در سند‌هایی با ساختارهای مختلف مورد استفاده قرار می‌گیرند. به عنوان مثال، اگر نیاز داشته باشید متن RTL را در داخل یک عنصر بلوکی (مانند یک div یا p) نمایش دهید، می‌توانید ویژگی direction را به rtl تنظیم کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام