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.