Text Direction (§8.2)

Text directionality is governed by the complex and subtle Unicode directionality algorithm, which I myself have trouble understanding. The default text direction is generally left‐to‐right, unless one is using certain character sets for languages like Hebrew or Arabic. Displaying text left‐to‐right in languages written right‐to‐left could even express unintended meanings.

Sometimes a Web browser must be informed what the default text direction is. Though most alphabets have implicit directionality, directionally neutral characters—including most numbers and punctuation—often do not.

Text direction

The common dir attribute sets the default text direction for directionally neutral text.

Example:

If your Web browser supports bidirectional text, both of these expressions should read the same from left to right.

<p><span dir="ltr">&frac12; &times; &frac12; = &frac14;</span></p>
<p><span dir="rtl">&frac14; = &frac12; &times; &frac12;</span></p>

Your Web browser renders it like this:

½ × ½ = ¼

¼ = ½ × ½

Related Mozilla bug reports: Text-Dir.

Table directionality

When set on a <table> element, the dir attribute not only sets the direction of directionally neutral text within the table, but also determines whether the columns are rendered in a left‐to‐right or right‐to‐left order.

Example:

If your Web browser supports bidirectional text, this table should be rendered with “3” in the left column, “2” in the middle column, and “1” in the right column.

<table frame="box" rules="all" dir="rtl">
<tr><td>1 <td>2 <td>3
</table>

Your Web browser renders it like this:

1 2 3

Bidirectional override

The <bdo> (bidirectional override) element overrides the current text direction.

XHTML 2.0: The W3C is considering removing <bdo> in XHTML 2.0 and adding lro (left‐to‐right override) and rlo (right‐to‐left override) to the values the common dir attribute can take.

Example:

<p dir="ltr">This sentence should be rendered left&#8208;to&#8208;right, <bdo dir="rtl">except for this phrase</bdo>.</p>

Your Web browser renders it like this:

This sentence should be rendered left‐to‐right, except for this phrase.

Related Mozilla bug reports: Text-Dir.

Direction mark characters

The left‐to‐right mark (&lrm;) and right‐to‐left mark (&rlm;) characters force the directionality of directionally neutral characters. They have no width, so the marks should not be visible.

However, the dir attribute offers a better guarantee of document structural integrity and alleviates some problems when editing bidirectional HTML text with a simple text editor.

Example:

If your web browser supports bidirectional text, both of these expressions should read the same from left to right.

<p>&lrm;&frac12; &times; &frac12; = &frac14;&lrm;</p>
<p>&rlm;&frac14; = &frac12; &times; &frac12;&rlm;</p>

Your Web browser renders it like this:

‎½ × ½ = ¼‎

‏¼ = ½ × ½‏

Related Mozilla bug reports: Text-Dir.

Bidirectional override characters

According to section 8.2.4 of the HTML 4.0 standard, the Unicode left‐to‐right override (&#8237;) and right‐to‐left override (&#8238;) characters may be used to override the current text direction. The pop directional formatting (&#8236;) character then restores the previous directional state.

However, the W3C and Unicode Consortium strongly discourage using them in HTML 4.0, because <bdo> is available and better suited to handle the stateful nature of their effect.

Example:

<p>This sentence should be rendered left&#8208;to&#8208;right, &#8238;except for this phrase&#8236;.</p>

Your Web browser renders it like this:

This sentence should be rendered left‐to‐right, ‮except for this phrase‬.