Intended audience: HTML/XHTML and CSS content authors implementing pages in right-to-left scripts such as Arabic and Hebrew, or having to deal with embedded right-to-left script text. This material is applicable whether you create documents in an editor, or via scripting.
This tutorial gathers together and organizes pointers to articles that, taken together, help you understand the essential aspects of how to work with languages in right-to-left scripts and bidirectional text when authoring HTML and CSS.
This section is for people in a hurry who just want to know some of the key recommendations from the tutorial. If you don't understand something, or if you want more detail, work through the rest of the tutorial.
dir attribute to the
html tag to set the default base direction of your page if it is right-to-left. Use the
dir attribute on block elements within the page only where you need to change the base direction.
dir=auto to automatically set the base direction of form fields,
pre elements or text inserted into the page. Use the
dirname attribute if you need to pass information about the base direction of form input to the server.
Avoid using CSS or Unicode control codes for managing direction where you can use markup.
Use logical ordering of bidirectional text, rather than visual ordering, and let the Unicode Bidirectional Algorithm take the strain.
Parts of this material describe the latest thinking embodied in the HTML5 specification. It is important to note that the HTML5 specification is still not entirely stable.
In this section we cover the basics of markup for text direction. The first article deals with setting direction at a document and structural level. The second with inline text elements – this is somewhat more complicated than the former, because it is where you have to handle bidirectional text.
The third article describes the difference between visually and logically ordered text, in case you ever happen to come across the former. These days you are generally unlikely to have to deal with visually-ordered content.
Unicode Bidirectional Algorithm basics provides a gentle introduction to how the bidi algorithm works, highlighting concepts and terminology that you'll need to understand how to work with bidirectional text. It covers the following:
Structural markup and right-to-left text in HTML looks at basic usage of the
dir attribute at the document level and for structural markup in HTML, eg. things like paragraphs, tables, and forms. It also looks at new developments in HTML5 for dealing with direction in form elements,
pre elements and inserted text. It includes the following:
Inline markup and bidirectional text in HTML begins by describing situations in which the Unicode Bidirectional Algorithm needs help from markup. The Unicode Bidirectional Algorithm is the basis for directional control of text in all browsers, but it has its limitations, and those need to be met with markup. The article looks at the problems and proposes simple solutions. It includes the following:
Visual vs. logical ordering of text compares visual vs. logical approaches to storing bidirectional text and makes the case for the logical model. It covers the following:
Generally speaking you should manage text direction in HTML using markup rather than CSS or Unicode control characters, although there are places where the latter is the only resort. These articles look into the reasons for this in detail.
CSS vs. markup for bidi support covers:
Unicode controls vs. markup for bidi support discusses why markup is better than Unicode control characters, where it is available. It covers:
Using Unicode controls for bidi text explains how to use Unicode control characters where they are the only option. It covers: