Right-to-Left Text Direction RTL

What does right-to-left text direction mean?

Arabic is written from right to left, and anyone who reads it has done so since childhood. Most websites and apps, though, were first designed for English, which runs from left to right. So a site needs a special setup before it can show Arabic properly.

That setup is called RTL, short for Right to Left. Its opposite is LTR, Left to Right, the direction of English, French and most European languages. Persian, Urdu and Hebrew are also written from the right.

RTL support goes further than translating the words. The whole page flips, as if you held it up to a mirror: the menu, the buttons, the arrows, where the picture sits and where the text sits. An Arabic reader then feels the site was made for them, and not moved over in a hurry.

How does RTL work in websites and apps?

Every web page is built with a language called HTML, which holds the page's content. A styling file called CSS sits on top of it and decides the colours, the spacing and where each element goes. When a site supports Arabic, two things happen:

1. Declaring the direction: the page states that its language is Arabic and that it runs from right to left, using a setting called dir with the value rtl. The browser then starts showing the text from the right. (The browser is the program you open websites with, such as Chrome or Safari.)
2. Flipping the design: the styling rules avoid fixed words like "left" and "right" and speak of "the start of the line" and "the end of the line" instead. In Arabic the start is on the right; in English it is on the left. One design then works for both languages.

Phone apps work in much the same way. iOS and Android both understand Arabic and flip the screen on their own, as long as the app was built the right way. If the developer pinned every element to a fixed spot, nothing flips, and the Arabic screen comes out in a strange order.

Mixed text

A single line often mixes Arabic, English and numbers. Picture an Arabic sentence that says "Your order 4521 for an iPhone is ready to ship". The number and the English word must still read from left to right, inside a sentence that runs from the right. Browsers and phones have a system that sorts this out by itself, called bidirectional text, or Bidi. It gets things wrong now and then, mostly with punctuation at the end of a line, so a full stop or a question mark lands on the wrong side. The fix is for the team to test these cases and handle them one by one.

Why does RTL support matter to you?

• Comfort: an Arabic reader's eye starts on the right. When the text begins on the wrong side, reading becomes tiring, and the visitor may simply leave.
• Trust: a tidy site shows that its owner cares about detail. A flipped-the-wrong-way site gives the opposite impression, even if your services are excellent.
• Sales: in an online shop, a reversed "Next" arrow or a buy button in an odd place makes customers hesitate. Hesitation means fewer orders.
• Search visibility: when a site clearly declares its language, Google understands the page is in Arabic and shows it to people searching in Arabic.
• Access for everyone: screen readers used by blind people need to know the language and the direction to read the page in the right order.

Think of a clinic with an online booking site. An older patient opens it on their phone. If the calendar starts on the wrong side and the "Book" button is somewhere unexpected, they will give up and call the clinic instead. If everything is where they expect it, booking takes a minute.

What flips and what stays the same?

Not everything on the page flips. The table below covers the most common cases:

How do you get RTL support right?

The most important rule: ask for Arabic support from day one. Adding RTL after a site is finished is like turning a staircase around after the house is built. You can do it, but it is harder and slower, and it leaves small mistakes everywhere.

When you talk to any development team, ask them:

• Is the design built for Arabic and English together from the start?
• Are the pages tested in Arabic on real phones?
• Is the chosen Arabic font clear on small screens?
• Do automatic messages, such as error messages and notifications, appear in Arabic and in the right direction?
• Do reports and printed files support Arabic too?

For websites

With our Website Design & Development service at Linkysoft, every site is built from scratch with no ready-made templates, with Arabic and RTL support from day one and several languages. We design for the phone first, then test on real phones before launch, so you see the Arabic version exactly as your visitors will. The client owns the site, its content and its code.

For web applications and management systems

A web application is a program you open in your browser, like a system for managing stock, staff or bookings. These systems are full of tables, dashboards and reports, and all of them need a correct Arabic layout if staff are to work in comfort every day. Our Web Applications & Management Systems service builds systems around the way your company works. They support Arabic, RTL and several languages, run on every device, and the client owns the code and the data in full.

For phone apps

Our Mobile App Development service builds iPhone and Android apps that support Arabic and several languages, with a custom design made from scratch and both light and dark modes. Each app is tested on many real phones before it goes to the App Store and Google Play, and the team keeps updating and monitoring it afterwards.

Not sure what your project needs? You can ask the Linkysoft team for a free consultation before you start.

Common mistakes to avoid

• Translating without flipping the design: the words are Arabic, but the menu and buttons stay where English put them.
• Flipping everything: numbers, logos and the play icon too, so they come out reversed and meaningless.
• Forgetting mixed text: sentences with English names or numbers end up scrambled and hard to read.
• Choosing a font with weak Arabic support: letters appear disconnected, or far too small on a phone.
• Forgetting the out-of-the-way places: emails, notifications, PDF files and error windows. Many teams forget these.
• Testing only on a computer: many visitors come from phones, and a small screen shows mistakes a big one hides.