CSS unicode-bidi Property

The CSS unicode-bidi property together with the direction property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding.

The initial value of CSS unicode-bidi property is normal. You can apply it to all elements, though some values have no effect on non-inline elements. This property is not inheritable. The final computed value of the unicode-bidi property is the exact same value that you initially supplied. This property is not animatable.

The unicode-bidi and direction properties are the two only properties that are not affected by the all shorthand.

Syntax

This is the formal syntax for using unicode-bidi property.

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

Here are some examples of using this property.

/* Keyword values */
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;

/* Global values */
unicode-bidi: inherit;
unicode-bidi: initial;
unicode-bidi: unset;

Acceptable Values

normal

In this case, the element does not offer an 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. Inside the element, reordering is done implicitly.

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 (experimental)

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 (experimental)

This combines the isolation behavior of isolate with the directional override behavior of bidi-override: to surrounding content, it is equivalent to isolate, but within the box content is ordered as if bidi-override were specified.

plaintext

This value behaves as isolate except that for the purposes of the Unicode bidirectional algorithm, the base directionality of each of the box’s bidi paragraphs (if a block container) or isolated sequences (if an inline) is determined by following the heuristic in rules P2 and P3 of the Unicode bidirectional algorithm (rather than by using the direction property of the box).

Working Examples

Browser Support

The CSS unicode-bidi property is supported in all major browsers like Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Further Reading

  1. Read more about the CSS <unicode-bidi> property on MDN.
  2. You can also read the CSS <unicode-bidi> property on CSSWG.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top