Summary
Set the base direction for right-to-left text to ensure that it is rendered correctly.
Techniques
- Set the
dir
attribute on thehtml
element [[WCAG-1.3.2]] - Set the
dir
attribute whenever the default direction changes [[WCAG-1.3.2]]
Examples
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 toauto
on forms and inputs to allow the reading system to determine the text direction at run-time. - When do I use the
bdi
andbdo
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>