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
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
- Arabic Script
- Other RTL Scripts
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
- Arabic Script
- Other RTL Scripts
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
I
- 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
- Make sure your document is encoded as Unicode.
- If you are using parentheses, type them first.
- Swtitch to an RTL script keyboard
- 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.
| 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 ‮ 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 ‭ 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
- Writing Backwards – Article about developing Hebrew websites for professional Web developers.
- TexTexin Right-to-Left Markup – Includes CSS style tags
- W3C Text Direction Tutorials