Intended audience:
users, XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), CSS coders, schema developers (DTDs, XML Schema, RelaxNG, etc.), XSLT developers, Web project managers, and anyone who is new to internationalization and needs guidance on topics to consider and ways to get into the material on the site. yyy adapt this to describe the intended reader of the article.
What should I look out for when authoring HTML content that will help when localizing into a language that uses a right-to-left script?
The screen shots below, of the Arabic and Russian pages of BBC World News, show how content layout is mirror imaged for text written in right-to-left vs. left-to-right scripts. Note also how the Arabic text in each paragraph is right-aligned.
Much of the directional difference in the page can be achieved simply by setting the dir attribute to rtl or (by default) ltr – ie. changing the base direction of the content. But sometimes to get the correct the positioning of items you need to intervene explicitly, using properties such as float, position, or text-align. This article urges caution when doing that, in light of the fact that you may need to localize pages from one language to another, and you need that process to be as efficient as possible.
Values of right and left in attributes need to be reversed when translating the document into a language using a right-to-left script.
It can save a lot of time to use CSS style sheets to align text, since it is far easier to make one small change in a CSS file than edit code in many HTML documents.
Attributes in HTML 4.01 that had values of right and left are align and clear. The use of these attributes is deprecated in HTML5, in favour of CSS.
For example, to right-align an image pointing back to a table of contents, rather than adding align="right" to the img tag, you should do something like this in the CSS style sheet:
img.TOClink { float: right; }
You can achieve the same effect as the clear attribute using the following CSS. This rule ensures that the h2 element has no floated content to its left.
It is not hard to find examples of pages where text-align has been used when it is not actually required.
Values of right and left need to be reversed when you translate the document
into a language that uses a script with a different direction. To reduce the effort and complexity of adapting the styles it is better to only use text-align where it is actually needed to override the alignment produced by setting the base direction with dir.
It is also better to use text-align in an external style sheet, rather than embedded in the HTML code, since that makes it easier to change.
The latest CSS3 Text working draft (not yet stable) introduces the new values start and end for use with text-align. The value start refers to the beginning of the line of text – ie. left for English text, right for Arabic. The end value is the opposite.
If you use these values, and the positioning is relative to the direction of the text, there is no need to change the style sheet values for text-align when localizing a page to or from a language that uses a right-to-left script. As the base direction of the text (set by the dir attribute) changes, so will the alignment.
At the time of writing, of the major browsers, only Chrome, Safari and Firefox support these values. Internet Explorer and Opera do not. The latest drafts, at the time of writing, for properties such as float and clear do not propose start and end values.
So this is perhaps not something that can be widely used yet, but may be useful in the future if it is implemented by all major browsers.
