Designing for RTL Languages: Getting Started
I should start off by admitting that I'm a philologist -- a lover of languages. Languages have always been a curiosity and a passion of mine. I earned a degree in International Business in large part because it required fluency in another language as one vital component (I chose French). I've studied German, Spanish, and Russian all for fun and to gain at least tourist-level proficiency. My latest challenge: Arabic.
Arabic is the first right-to-left (RTL) language that I've attempted and as I surf more and more Arabic-language web sites, I'm able to better appreciate and understand some of the design challenges one must take into consideration. A couple years ago, Viget designed its first web site for an RTL language -- Persian, which uses a modified version of the Arabic alphabet -- and it was a big learning curve for our team at the time.
To jump-start you on some of the basics when designing web sites for RTL languages, I've interviewed some of our team members who worked on the Persian project (Kara and Jim), as well as added some points I've picked up along the way:
- Character Set. You’ll need the Middle East version of Photoshop (which offers bi-directional text flow, the Western version does not) in order to create any text graphics. While you may be able to type in characters if you just install the fonts, they won’t be connected to each other correctly and will be illegible (cutting and pasting text also does not work as the text will flip around). You will also need to specify the language (fa), character set (UTF-8), and text direction (rtl) within your page code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" xml:lang="fa" lang="fa"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - Dates. On Persian sites, at least, you’ll need to add a little script to convert dates from the Gregorian calendar to the Persian calendar.
- Layout. Users will naturally be looking at the site from right-to-left. That's how all words and sentences are written, so your horizontal navigation should start on the right. Utility navigation, typically found in the top right portion of the screen in English, is usually placed in the top left of the page instead. Vertical scroll bars belong on the left side of the browser window instead of the right. Search boxes with "go" buttons will have the active buttons to the left of the search field. Dropdown menus will drop from the left corner and display choices listed in right-aligned format. Arrows and similar icons should be flipped horizontally. Thumbnail images should appear on the right, etc. It may be helpful to think of the site as a mirror-image of a site you'd lay out in English.
- Flash/JavaScript. Tickers and fly-in text should be set from left-to-right to allow proper reading, just as the reverse is true in English.
- Captcha. Even on all-Arabic sites, I've seen the English Captcha tool integrated into the site.
- URLs. You have two choices when deciding on which URLs to use: transliteration or English text. After researching other sites, our team chose English text URLs because they appeared to be the convention.
- Font Size. When we included larger font sizes in our designs to promote content hierarchy, native speakers reacted poorly, noting that the fonts looked ugly when they were too large. We ended up knocking down most of our headers several points.
- RTL vs. LTR in CSS. Specify “direction: rtl;” for all right-to-left elements. We found that the bulleted lists were a bit tricky, but got the hang of it eventually. Telephone numbers, email addresses, and any other Roman text should still be presented left-to-right, so you’ll need to call those out as well.
- Content Management. ExpressionEngine allowed us to specify when a text entry field was left-to-right or right-to-left, which was very necessary, so that’s something to consider if you’re evaluating CMS solutions.
Good luck with your own RTL web sites! Shokran.