HTML and CSS Reference
In-Depth Information
sometimes 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
<p>A passage containing one <i lang="en">
<bdo dir="rtl">reversed</bdo>
</i> word.</p>
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.