This page discusses some tips for working with right to left (RTL) scripts versus the more well-known left to right (LTR) Scripts.

Inherent Direction in Unicode

The Unicode specification includes a directionaly specification for each character depending on its script. Many including Latin A,B,C, etc are encoded as LTR (left to right), but characters from RTL scripts such as Arabic, Hebrew and others are encoded as being RTL. Note that some punctuation like brackets ( {}, []. () ) can have different display behaviors depending on the adjacent script.

That means if you activate a Unicode compliant keyboard, then the direction will be automatically changed for characters in an RTL language. The same is true when inserting characters via entity code.

See the following pages for examples and information.

RTL Script/Language Pages

Visual Order (AVOID) vs. Logical Order

In some older documents, particularly for Hebrew, individual letters might have been typed backwards in an LTR system in order to appear in the "correct" order in a LTR-only environment. This was called Visual Order and should be avoided.

Modern Unicode systems support logical order meaning that letters are typed in the correct sequence and are displayed as RTL text by default.

RTL Paragraphs and Documents

For documents entirely in an RTL script, it’s important to specifiy the direction as being rtl (vs. ltr). This causes punctuation such as list bullets and list numbers to be placed to the right and content to be generally right aligned. See the sample text below.

Sample RTL Aligned Section

The list below has been set to dir="rtl".

Microsoft Office and Open Office

In Microsoft Word and similar programs, the following buttons show options for setting a document to be RTL or back to LTR

ITwo paragraph symbols with arrow on left for left to right alignment or right for right to left alignment

  • Windows Office – The buttons to set paragraphs to RTL alignment are in the Layout tab. See the Microsoft support site for details.
  • Mac Office 2016 – In Office 2016 for Macintosh, the buttons to set paragraphs to RTL alignment are in the Home tab below the other paragraph alignment options.

Open Office

Open Office includes similar language formatting tools as in Microsoft Office. However they may need to be activated in the preferences.

Mac Tex Edit

The option to make a document RTL is found in the menus under Format : Text : Writing Direction : Right to Left (or Left to Right).

Right and Left Align a Document in HTML

There are several methods to mark a document or passage as dir="rtl" or dir="ltr".

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 Hebrew (he), Arabic (ar) or other appropriate language.

Use the code<html dir="ltr" lang=""> to signify that a page has left-to-right alignment. This could be important if your site is multilingual or a large segment of readers from the Middle East.

XHTML

Use this syntax to declare an "rtl" document and page language. Note that this statement also declares the language as Arabic (ar).

<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" xml:lang="ar" lang="ar">

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. This code sets a paragraph in Hebrew to RTL direction.

Sample HTML

<p lang="he" dir="rtl">...</p>

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

<p>Look for me WAAAAAY on the right!!!</p>

</div>

Result

Look for me WAAAAY on the right!!!!

LTR Override

If you are developing a Hebrew or Arabic Web site, you can use the dir="ltr" attribute to include left to right paragraphs.

AVOID align="right"

The option for align="right" in HTML or align:right are designed for LTR pages. Using these will NOT cause the punctuation to be properly aligned for an RTL language.

RTL Words in an LTR Document

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.

Direction of Punctuation

Many punctuation symbols such as the period, parentheses and others are actually "directionless" meaning their positioning may be LTR or RTL depending on what the directionality of adjacent characters are. This can cause unusual effects such as inside out-parentheses unless precautions are taken.

Inside Out Parentheses

(אבג)

vs.

)אבג(

View the Code

<p lang="he">(אבג)</p> vs.
<p lang="he">)אבג(</p>

Typing Tips

  1. Make sure your document is encoded as Unicode.
  2. If you are using parentheses, type them first.
  3. Swtitch to an RTL script keyboard
  4. 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

<p>3 Hebrew letters (<b lang="he" class="red">אבג</b>) -<b> aleph, beth, gimmel </b></p>

Bidirectional (BiDi) Text

In RTL scripts which include Western numbers, it may be important to maintain LTR direction of numbers in specific words. This is called BiDi (bidirectional) text.

BDO Tag in HTML

The bidirectional override BDO tag can be used to reverse the normal direction of a script. This could be useful for some types of explanatory text or certain types of artistic effects.

In the example below the BDO is set to RTL for some English text to cause it to be displayed backwards.

HTML Code
<p><bdo dir="rtl">hello</bdo></p>

Result

hello

Should see olleh if <bdo> is working.

Unicode Control Characters

There is also a set of Unicode bidirectional control characters which can also trigger overrides of default directionality. These should only be used when the BDO tag is not supported.

Unicode Bidirectional Formatting Codes
Code Point (Hex) Character Name Function
202A LEFT-TO-RIGHT EMBEDDING (LRE) Equivalent to dir="ltr" attribute in HTML
202B RIGHT-TO-LEFT EMBEDDING (RLE) Equivalent to dir="rtl" attribute in HTML
202C POP DIRECTIONAL FORMATTING (PDF) Ends or "pops" any BiDi overrides
202D LEFT-TO-RIGHT OVERRIDE (LRO) Causes an RTL script to be written LTR
202E RIGHT-TO-LEFT OVERRIDE (RLO) Causes an LTR text to be written RTL

Examples

RTL Override

The &#x202E code will cause English to be written right to left until the end "pop" character . The example text is "Hello World."

  • Code: ‮Hello World‬
  • Result: ‮Hello World‬

LTR Override

The &#x202D code will cause Hebrew to be written left to right until the end "pop" character . The example text is the first four letters of the Hebrew alphabet which begins with the letter alef (א).

  • Normal RTL: אבגד
  • Code: ‭אבגד‬

  • Result: ‭אבגד‬

Links

Top of Page

Skip to toolbar