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)

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works 8.0+ Works Works


  1. User Avatar
    Permalink to comment#

    This is really cool! Just learned something from this!

    • User Avatar
      Permalink to comment#

      I knew about U+202D and U+202E but I didn’t know there was css to do the same thing more legibly!
      What confuses me is when Unicode and HTML do the same thing (e.g. character tabulation U+0009 and HTML tables; I thought HTML just displayed text on the table, not formatted the table around the text?)
      btw rtl is ‮Right to Left U+202E
      and ltr is Left to Right U+202D

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.