Unicode bidi CSS Property

Unicode bidi CSS Property

By At 05:07 0


Unicode bidi property is used to show the text in the both directions like left to right and right to left. It will show the text in the reverse direction. The English text will be from left to right, but in Arabic text will be from the right to left direction.
Unicode bidi also use the direction property to show this text in the html page. Because text from left to right text, start from the left of the page. If the text start from right to left its will start from the right side of the page. You can use the direction css property to start the text from which side of the page either left are right.

Syntax:
.sample-class{
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;
}

CSS:
.sam-cls{
direction:ltr;
unicode-bidi: bidi-override;
}

HTML:
<span class="sam-cls">Welcome to Labw3<span>

Result:
Welcome to Labw3


The unicode bidi Property will have the five different values:
  • Normal
  • Embed
  • Isolate
  • bidi-override
  • Isolate-override
  • Plaintext

Normal:The element does not offer a additional level of embedding with respect to the bidirectional algorithm. For inline elements implicit reordering works across element boundaries.

Embed: If the element is inline, this value opens an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the direction property.

bidi-override: For inline elements this creates an override. For block container elements this creates an override for inline-level descendants not within another block container element. This means that inside the element, reordering is strictly in sequence according to the direction property; the implicit part of the bidirectional algorithm is ignored.

isolate: This keyword indicates that the element's container directionality should be calculated without considering the content of this element. The element is therefore isolated from its siblings. When applying its bidirectional-resolution algorithm, its container element treats it as one or several U+FFFC Object Replacement Character, i.e. like an image.

isolate-override: This keyword applies the isolation behavior of the isolate keyword to the surrounding content and the override behavior of the bidi-override keyword to the inner content.

plaintext: This keyword makes the elements directionality calculated without considering its parent bidirectional state or the value of the direction property. The directionality is calculated using the P2 and P3 rules of the Unicode Bidirectional Algorithm.
This value allows to display data which has already formatted using a tool following the Unicode Bidirectional Algorithm.

Via : Developers Mozilla

Browser Support: All Latest Version:
Feature Chrome Firefox IE Opera Safari
Basic support Yes Yes Yes Yes Yes
Copyright Labw3