I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Using Arabic, Hebrew, and Other Right-To-Left Languages In Web Pages

html / typography

Estimated reading time: 1 minute, 53 seconds

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=""> 

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, and copying and pasting the text into appropriate markup in your document.

<p>על רקע חילוקי הדעות בין ירושליה ישראלית</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>&#x202B; שרי השביעייה דנו בתשובת ישראל לארה"ב&#x202C;</title>
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.