CSS Reference Property

unicode-bidi

The unicode-bidi property is used in conjunction with the direction property to specify how bi-directional (Bidi) text is handled in a document.

For example, a piece of text containing both left-to-right (LTR) and right-to-left (RTL) text, like a combination of Arabic and English text in a document.

Unicode specifies an algorithm that is used by user agents to determine the direction of text in a bi-directional content. The algorithm determines directional flow of content based on properties of the characters and content, as well as explicit controls for language “embeddings” and directional overrides.

The unicode-bidi property combined with the direction property allows you to override the Unicode algorithm and control the text embedding yourself.

Using unicode-bidi you can open an additional level of embedding, and then specify the directionality of the text in that embedding using the direction property.

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

As a matter of fact, for the direction property to have any effect on inline-level elements, the unicode-bidi property’s value must be embed or override.

The unicode-bidi property is the direction property’s sister property, so make sure you refer to the direction property property entry for more information on how they work together.


The unicode-bidi property is is intended for DTD designers. Web designers and similar authors should not override it. If you decide to use it, make sure you need to. Otherwise, don’t!

Trivia & Notes

The unicode-bidi property has a markup equivalent, namely the <bdo> element. The direction property has a markup equivalent which is the dir attribute which takes the same values as the property. The unicode-bidi property’s functionality can be achieved using the HTML <bdo> element in combination with the dir attribute.

So, if you need to change the direction of text of an inline-level element, you can either use the direction property in conjunction with the unicode-bidi property and do that via CSS, or you can use the <bdo> element with the dir attribute. For example:

<p>
    This is a paragraph of text with left-to-right directionality. <span class="right">This is a piece with RTL directionality</span> inside the LTR piece of text.
</p>
                
.right {
    direction: rtl;
    /* need this in order to apply the direction to the inline-level span */
    unicode-bidi: embed; /* or bidi-override */
}
                

The directionality of the RTL piece of text inside the LTR paragraph can also be specified like this:

<p>
    This is a paragraph of text with left-to-right directionality. <bdo dir="rtl">This is a piece with RTL directionality</bdo> inside the LTR piece of text.
</p>
                

With that said, bidi best practices indicate that you should not specify the direction of text using CSS, but use markup to set the directionality of a document or chunk of information. As Nicolas Zakas says, the reason is that the direction of the text is an important part of the content of the document, and should remain even if there are no styles applied to the overall page. CSS is used to describe the presentation of the document, but the underlying content should still be valid even when consumed without presentational information (such as in an RSS reader).

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

Official Syntax

  • Syntax:

    unicode-bidi: normal | embed | bidi-override | inherit
  • Initial: normal
  • Applies To: all elements
  • Animatable: no

Notes

The CSS Writing Modes Module Level 3 introduces three new values that are still experimental at this time: isolate, isolate-override, and plaintext. The new values are supported only in Firefox, prefixed with the -moz- prefix.

Values

normal
The element does not open 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)
As MDN describes it, 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).

Notes

Because the unicode-bidi property does not inherit, setting bidi-override or plaintext on a block box will not affect any descendant blocks. Therefore these values are best used on blocks and inlines that do not contain any block-level structures.

Examples

The following sets the directionality of Arabic and Hebrew lines of text to rtl using the direction property. The content of the document would contain pieces of Arabic and/or Hebrew text inside English paragraphs of text. The Arabic chunks have a class name arabic and the hebrew pieces of text have a class name hebrew.

.arabic, .hebrew {
    unicode-bidi: bidi-override;
    direction: rtl;
}
                

Browser Support

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

The experimental values isolate, isolate-override, and plaintext are supported only in Firefox, prefixed with the -moz- prefix.

Further Reading

Written by

Last updated February 3, 2015 at 12:35 pm by Pedro Botelho

Do you have a suggestion, question or want to contribute? Submit an issue.