unicode-bidi

با استفاده از ویژگی unicode-bidi در کنار ویژگی direction می توان جهت و رفتار متن هایی که دارای نوشته در دوجهت هستند را کنترل کرد.

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

حال اگر عنصری دارای محتوایی با هر دو زبان باشد مرورگر از یک الگوریتم پیچیده برای نحوه نمایش متن استفاده می کند. با استفاده از ویژگی unicode-bidi می توان رفتار این الگوریتم را بازنویسی کرد و کنترل نمایش متن های دو جهته را در دست گرفت.

در حالت عادی ویژگی direction جهت عناصر بلاک را تعیین می کند.

اگر می خواهیم که ویژگی direction بر روی عناصر خطی تاثیر داشته باشد باید اول مقدار ویژگی unicode-bidi را برابر با embed قرار دهیم.

در تصویر زیر دو پاراگراف نمایش داده شده اند که جهت آنها از چپ به راست (ltr) می باشد. در وسط هر پاراگراف جمله ای فارسی نوشته شده است و از آنجایی که جهت نوشته فارسی باید از راست به چپ (rtl) باشد انتظار می رود که علامت تعجب بصورت صحیح یعنی شبیه به حالت دوم نمایش داده شود:

unicode-bidi

برای اینکه به حالت دوم برسیم باید جهت نوشته فارسی را به راست به چپ تغییر دهیم. اما از آنجا که نوشته فارسی در یک عنصر خطی (<span>) قرار دارد باید اول ویژگی unicode-bidi را تنظیم کنیم و سپس جهتش را تغییر دهیم:


span.farsi {
    unicode-bidi: embed;
    direction: rtl;
}

مقادیر unicode-bidi

تمام مقادیری که این ویژگی می تواند داشته باشد به شرح زیر هستند:


unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext | inherit

normal

این مقدار، مقدار پیشفرض و اولیه این ویژگی می باشد و برای عناصری مناسب است که فقط محتوای آنها RTL یا LTR هستند. یعنی نوشته های دو جهته ندارند.

embed

این مقدار باعث می شود تا عنصر خطی با توجه به الگوریتم یونیکد مرورگر اجازه تغییر جهت توسط ویژگی direction را داشته باشد.

bidi-override

برای عناصر خطی این مقدار کاملا شبیه به embed رفتار می کند اما برای عناصر بلاک باعث می شود محتوای عناصر خطی داخل آنها در جهت direction عنصر بلاک نوشته شوند.

البته فرزندان خطی عنصر بلاک نباید داخل یک عنصر بلاک دیگر باشند. به عنوان نمونه در مثال زیر اگر مقدار bidi-override را برای عنصر div در نظر بگیریم این تنظیمات تاثیری بر نوشته فارسی دوم نخواهد داشت. اما به نوشته فارسی اول تاثیر می گذارد.


<div>
  Lorem ipsum dolor sit amet. <span>متن فارسی</span> Lorem ipsum dolor sit amet.

  Lorem ipsum dolor sit amet. <p><span>متن فارسی</span></p> Lorem ipsum dolor sit amet.
</div>

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

 
دموی زیر را بررسی کنید:

 

See the Pen unicode-bidi by Mojtaba Seyedi (@seyedi) on CodePen.