The CSS unicode-bidi Property

Overview

When combined with the direction property, unicode-bidi manages the rendering of bidirectional text in HTML and similar languages like XML. These properties work together to establish different levels of embedded text with mixed text directions within one DOM element.

Specifically, a block of content could include both LTR(left-to-right) and RTL(right-to-left) text, and the user-agent will employ a sophisticated Unicode algorithm to decide how the text should be displayed. By using the unicode-bidi property, the algorithm can be overridden to ensure the proper presentation of mixed-direction content.

Examples and Usage

The example below demonstrates the behavior of the unicode-bidi property with embed and bidi-override as values.

HTML Structure

<div>The usual direction of writing text.</div>

<div class="text1">Behavior with the embed value.</div>

</br>

<div class="text2">Behavior with the bidi-override value.</div>

CSS Styling

div {
  font-size: 50px;
  font-family: Tahoma;
} 

div.text1 {
  direction: rtl;
  unicode-bidi: embed; /* Creates an additional level of embedding */
}

div.text2 {
  direction: rtl;
  unicode-bidi: bidi-override; /* Enforces strict reordering within the element */
}

We can observe the first div that has the default text direction, which is determined by the browser's locale or the lang attribute. The second div has a right-to-left direction with the embed value applied to the unicode-bidi property. This value adds another level of embedding, effectively mixing LTR and RTL text within the element. The last div uses the bidi-override value, which forces the text direction to be strictly right-to-left, regardless of the original text direction.

Values

The unicode-bidi property accepts the following values:

Value	Description
`normal`	No additional level of embedding for the bidirectional algorithm. Implicit reordering applies across element boundaries for inline elements.
`embed`	Opens an additional embedding level for the bidirectional algorithm for inline elements. The direction of this level is determined by the `direction` property.
`bidi-override`	Creates an override for inline elements and inline-level descendants of block container elements. Reordering within the element strictly follows the `direction` property, ignoring the implicit part of the bidirectional algorithm.
`isolate`	Calculates the element's container directionality without considering the content of the element, isolating it from its siblings.
`isolate-override`	Applies the isolation behavior of `isolate` to surrounding content and the override behavior of `bidi-override` to the inner content.
`plaintext`	Determines the element's directionality without considering its parent bidirectional state or the `direction` property. Directionality is calculated using the P2 and P3 rules of the Unicode Bidirectional Algorithm.

Associated Properties

direction

Tips and Tricks

The unicode-bidi property works closely with the direction property and relies on the Unicode Bidirectional Algorithm.
Remember that the property is primarily intended for DTD designers. Web designers and similar professionals should exercise caution when overriding it, or shy away from it entirely.
Consider the implications of unicode-bidi on user experience and accessibility, as it might affect the readability of your content for users with different language preferences or assistive technologies.
When working with mixed-direction text, thoroughly test the rendering of your content across various devices and browsers to ensure consistency.
In some cases, using HTML markup, such as <bdi> or <bdo> elements, might be more suitable for handling bidirectional text than relying on unicode-bidi.

Browser Compatibility

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes	Yes*	Yes	No	Yes	Yes*

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers (see more in the Useful Resources below)