When combined with the
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
bidi-override as values.
<div>The usual direction of writing text.</div>
<div class="text1">Behavior with the embed value.</div>
<div class="text2">Behavior with the bidi-override value.</div>
unicode-bidi: embed; /* Creates an additional level of embedding */
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.
unicode-bidi property accepts the following values:
|No additional level of embedding for the bidirectional algorithm. Implicit reordering applies across element boundaries for inline elements.
|Opens an additional embedding level for the bidirectional algorithm for inline elements. The direction of this level is determined by the
|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.
|Calculates the element's container directionality without considering the content of the element, isolating it from its siblings.
|Applies the isolation behavior of
isolate to surrounding content and the override behavior of
bidi-override to the inner content.
|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.
Tips and Tricks
unicode-bidiproperty works closely with the
directionproperty 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-bidion 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
<bdo>elements, might be more suitable for handling bidirectional text than relying on
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)