Summary

Set the base direction for right-to-left text to ensure that it is rendered correctly.

Techniques

Examples

Example 1 — Declaring the default base direction
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="he"
      lang="he"
      dir="rtl">

Frequently Asked Questions

Do I need to declare the dir attribute for left-to-right documents?

No. HTML defaults to left-to-right directionality for text, so it is not necessary to set the dir attribute for left-to-right documents. Only left-to-right text embedded in a right-to-left document needs to be specified.

Can I just set the language of the text?

No. The language declaration does not affect the display directionality. Setting the language is important for text-to-speech rendering.

Can I use CSS to set the direction instead?

No. CSS is not always available or respected in reading systems. Both the HTML and CSS specifications recommend using markup to set the text direction.

Refer to CSS vs. markup for bidi support for more information.

What if I have forms that accept text input?

Set the dir attribute to auto on forms and inputs to allow the reading system to determine the text direction at run-time.

When do I use the bdi and bdo elements?

It is not common to need these elements in publications.

The bdi element is used to insert user-generated text into a document. As you cannot be sure the directionality of the text, it allows the reading system to examine the content and adjust the base direction as needed.

The bdo element is used to override the base directionality of the text. It can be used, for example, to force right-to-left text to render in left-to-right form.

Explanation

It is important to set the base text direction for right-to-left text in HTML and SVG documents to ensure that it is displayed properly by reading systems and read properly by assistive technologies.

The way that right-to-left text is encoded in the markup and stored in memory is not the same as how it is displayed or read. If the correct base direction is not specified, the contents of a page may be read out of order. This is particularly problematic when left-to-right text is embedded in a right-to-left document. Weakly typed characters such as numbers and punctuation may be rendered in the wrong place, for example, or list entries could be placed out of order.

To indicate that a document's base direction is right-to-left, simply add a dir attribute to the root html or svg element:

<html … dir="rtl">

<svg … dir="rtl">

If text with a left-to-right base direction is embedded in a right-to-left document, add a dir attribute to its enclosing element. For example, if the document contained a quote with a left-to-right base direction, you would add the dir attribute to the enclosing blockquote:

<blockquote dir="ltr">
   <p>It was the best of times, it was the worst of times, …</p>
</blockquote>

If the base direction changes within a run of text, add a span element with a dir attribute:

<p>
   <!-- right-to-left text -->
   <span dir="ltr">Accessible EPUB 3</span>
   <!-- right-to-left text -->
</p>

Related Links