Constructing Contentsometimes include words or phrases from other languages, and when that other language is read in
another direction from the surrounding text, the result is bidirectional text (also known as bidi text, for
short).
Unicode—a standard for digital text encoding—carries instructions for text direction encoded within the text
itself. A user-agent that supports Unicode will follow a standard algorithm to render text in the proper
direction. But there are some unusual circumstances in which this algorithm causes adjacent text to be
reordered incorrectly. These specialized HTML elements can compensate for calculation errors on those
rare occasions when the Unicode bidirectional algorithm produces the wrong rendering.
The bdi element (bidirectional isolate) isolates a portion of text so it can be automatically formatted in a
direction different from the text surrounding it. This element is most useful when the direction of the text
may be unknown, especially user-generated content like usernames or comments. Wrapping such content
in a bdi element instructs the browser to treat that span of text’s directionality separately from the
directionality of its parent, setting the element’s direction to “auto” and allowing the Unicode directionality
of the content to take over. This is a new element in HTML5 and most browsers don’t yet support it, but
they will soon.
For more on the bdi element, including some practical usage examples, see Richard
Ishida’s aptly-titled post, HTML5’s New <bdi> Element (rishida.net/blog/?p=564).The bdo element (bidirectional override) defines a segment of text where the direction is explicitly reversed
from the direction of the text that surrounds it (as inherited from the parent element), or reversed from the
calculated direction (as determined by the Unicode bidirectional algorithm). The bdo element requires a
dir attribute to carry that explicit direction, with a value of either ltr for “left to right” or rtl for “right to
left.” This element has been around much longer than bdi and current browsers support it fully.
Listing 4-41 shows the bdo element used as if the offset word were written in a different language from the
rest of the document. This example uses English text for demonstration purposes only—you would never
do this in reality.
Listing 4-41. The bdo element in action
A passage containing one reversed word.
Figure 4-29 shows that the web browser reverses the text automatically
Figure 4-29. The contents of the bdo element are displayed in the direction specified by the dir attribute, regardless of
language or text encoding
Both of these elements are uncommon (especially the brand new bdi element) and you may go your
entire life without ever using them. But if you work with multilingual documents or are building a site that
needs to accept bidirectional input from users, these elements may come in handy.