Grow your CSS skills. Land your dream job.

unicode-bidi

Last updated on:

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".