unicode-bidi

The unicode-bidi property is one of two CSS properties that handle the rendering of bi-directional text in HTML and similar markup-based languages (eg XML). The other property is direction, and the two are used together to create levels of embedded text with different text directions (right-to-left and left-to-right) in a single DOM element.

.bilingual-excerpt {
    direction: rtl;
    unicode-bidi: embed;
}

The browser usually determines which direction inline text will flow, depending on the lang attribute of elements, the browser’s locale, and font-family of specific elements. unicode-bidi comes in handy when an element contains both LTR text and RTL text:

The user agent applies a complex algorithm defined by the Unicode standard to determine how the text should appear. This property specifically controls the embedding levels and overrides for the Unicode bidirectional algorithm.

The unicode-bidi property has three widely-supported values:

1. the “normal” keyword, which offers no additional levels of embedded bi-directional text (the default browser behavior). An element with this property will only contain LTR or RTL text.
2. the “embed” keyword, which allows for bi-directional text in an element (for example, RTL text flowing amidst LTR text). This is determined by the direction property, and must be applied to an inline element.
3. the “bidi-override” keyword, which acts the same as “embed” when applied to inline elements. On block-level elements, it overrides the browser’s bi-directional text algorithm and flows the text inside any inline children strictly according to the direction property.

Points of interest

• The unicode-bidi property is “is intended for DTD designers. Web designers and similar authors should not override it.” Decide carefully if you need to use it.
• While Internet Explorer technically supports unicode-bidi since version 5.5, there are “serious bugs relating to floated elements” and use is reliable in IE 8+ (see below)

Browser support

Other resources

• Mozilla Docs
• SitePoint

Related properties

Almanac on Mar 29, 2021

direction

.element { direction: rtl; }

Sara Cope

Almanac on Jul 15, 2021

text-combine-upright

span { text-combine-upright: all; }

Geoff Graham

Almanac on Dec 1, 2020

text-orientation

element { text-orientation: mixed; }

Jwahir Sundai

Almanac on Jul 15, 2021

writing-mode

.element { writing-mode: vertical-rl; }

Robin Rendle