Teaching and Learning with Technology

Computing With Accents and Foreign Scripts

Skip Menu

Right to Left (R.T.L.) Text

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

Page Content

  1. Inherent Direction
  2. RTL Passages and Documents
  3. RTL Words and an LTR Document
  4. Bidirectional Override (BDO)
  5. Links

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

RTL Pages

Right and Left Align a Docment

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 direction="rtl">hello</bdo></p>

Result (Not Available in Sites at Penn State)

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 &#x202C;. The example text is "Hello World."

LTR Override

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

Links

These Web sites provide additional information on developing Right-to-Left Pages.

Top of Page

Tuesday, 28-Mar-2017 14:58:39 EDT