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:
- 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.
- 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. - 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)
Related Properties
Browser Support
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
Works | Works | Works | Works | 8.0+ | Works | Works |
Leave a Reply