Right-to-Left Text

Go to Vertical Text Options

The technologies for creating right-to-left text have evolved in the past five years. The easiest option is to create or import Unicode text and post it online. The text will be correctly positioned in most cases.

Recommended Browsers

The following browsers support most right-to-left text consistently

Firefox, Internet Explorer 5+ (Windows), Mozilla, Opera 8+ supports Unicode and all the tags described below
Safari supports properly encoded Right-to-left Alignment ("dir=rtl"), but not bidirectional override (BDO)
Internet Explorer for Mac and Netscape 4.7 only support the "align=right". These browsers should be avoided.

See the Right Aligned version of this Page to test properly encoded RTL pages.

RTL Words

The easiest way to input right to left text is to use an Arabic or Hebrew keyboard for Windows or Mac and type the text into a text or HTML document. The text will be typed in right to left. If you switch back to English, then text will return to left to right input. By switching keyboards, you can mix languages.

Tips

The application should support Unicode text. These include Microsoft Office (2004 for Mac), Dreamweaver MX 2004, Front Page, Notepad (Windows), Text Edit (Macintosh). Select "Unicode" or "UTF-8" encoding when saving the file.
If inputting a RTL word in an English document (or vice-versa). Create a area in the HTML code before switching keyboards. This will minimize unexpected spacing or punctuation placement effects in RTL passages.
Check to be sure Arabic letters are adjoining correctly. Some programs support right-to-left text, but not joining of Arabic letters.

An Example

3 Hebrew letters (אבג) - aleph, beth, gimmel

View the Code

3 Hebrew letters (אבג) - aleph, beth, gimmel

RTL Paragraphs

There are several methods to mark a document or passage as dir="rtl". Note that unlike align="right", the punctuation will also relocated. For instance sentence periods appear towards the "begining" or the left edge of a line.

Right Align a Docment

HTML - Use the code <html dir="rtl" lang=""> to ensure that all paragraphs and headers are right aligned and that the page language is set to either Hebrew (he) or Arabic (ar).

XHTML - Use this syntax to declare an "rtl" document and page language. Note that this statement also declares the language as Hebrew (he).

See Sample RTL Document

Right Aligned Divs and P

The dir="rtl" attribute can be added to DIV's, P's headers and other tags to set alignment for those areas in the text.

Sample HTML - ...

To create left-to-right English passages in a RTL document, use the attribute dir="ltr" (left to right)

Sample HTML

RTL Text
...

Right Alignment with CSS

Use the CSS property direction: rtl for right to left text or direction: ltr for left to right text. Note that this option also places the punctuation to the left of the text.

HTML Code
<div style="direction: rtl" >
Look for me WAAAAAY on the right!!!
</div>

Result

Look for me WAAAAY on the right!!!!

Bidirectional Override (BDO)

Note: These tags are supported in Mozilla, Firefox and Internet Explorer for Windows but not Safari or Opera.

If you wish to insert an Arabic or Hebrew word in an English document, you can use the <bdo dir="rtl"> to temporarily override the left-to-right direction of text. Again this only works only on Netscape 7, Mozilla 1 and Internet Explorer 6 (Windows). If older browsers are involved, then the text may need to be typed in backwards.

HTML Code
<bdo direction="rtl">hello</bdo>

Result

hello

Should see olleh <bdo> is working)

If you are developing a Hebrew or Arabic Web site, you can use <bdo dir="ltr">English Text Here</bdo> to insert English left-to-right text.