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 completely 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.
Text direction and structural markup 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:
What you need to know about the bidi algorithm and inline markup begins by describing how the Unicode Bidirectional Algorithm works, in simple terms. This 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:
There are still some final decisions pending, at the date of writing, about what the markup for inline text will be like in HTML5 due to recent developments in Unicode, and that information will be added in due course.
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: