By default, text runs from left-to-right in web pages, as all Indo-European languages are written in this direction. However Arabic, Hebrew, Urdu and several other languages are written in the opposite direction, i.e. right-to-left. Getting the text itself onto the page is not a particular issue, but forming it to run in the right direction can be.
Step One: Set The Direction Of The Text
The base direction of text in a web page is determined by the dir attribute in the <html> tag. dir by default is set to “ltr” (left to right), and does not need to be explicitly declared. To set the opposite direction, we set dir to “rtl” (right to left):
<html dir="rtl">At the same time we should declare the language being used on the page (assuming that the body text is primarily in one language). I will use Hebrew for this example:
<html lang="he" dir=”rtl” xml:lang="he" xmlns="http://www.w3.org/1999/xhtml">So long as you are using UTF-8 encoding on your pages, as we discussed in setting up your HTML document, everything else should follow naturally. I would recommend that you follow general recommendations for creating body copy: writing text in a correctly configured word processor or other tool, and copying and pasting the text into appropriate markup in your document.
<p><span dir="rtl" lang="he">על רקע חילוקי הדעות בין ירושליה ישראלית</span></p>Step Two: Deal With Exceptions
Assuming that the majority of the document was in Hebrew and you wanted to write an English paragraph somewhere in the body, you would declare that paragraph as an exception:
<p lang="en" dir="ltr">I have reverted to English for a moment</p>If it was only a word or a short phrase inside a sentence that you wanted to effect, you would use <span> around the relevant text, with the same values for lang and dir using in the <span> as used for the paragraph above.
Step 3: Form The Title
The one remaining issue is that text in the <title> tag will ignore directionality, and be left-to-right no matter what we have stated. We cannot use the dir attribute there; instead, we use HTML entities, in the form of Unicode control characters:
<title>‫ שרי השביעייה דנו בתשובת ישראל לארה"ב‬</title>Photograph by ghalam_DAR, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
