Web Development

Arabic & English Websites: The RTL Mistakes That Cost You Visitors

A website that is merely translated feels wrong to an Arabic reader. These are the right-to-left details that separate a bilingual site that looks built for them from one that looks flipped.

Most bilingual websites fail in the same quiet way. Everything is translated, and nothing feels right. The text reads from the right, but the layout still leans left, an arrow points the wrong way, a phone number looks scrambled. The visitor cannot say why, but they trust the site less.

Here are the mistakes I check first when I build or review an Arabic and English website.

1. Flipping the page with a hack instead of building for both directions

Setting the text direction is not enough. Margins, padding, floats and positions written as “left” and “right” stay where they were. The modern answer is logical properties: “start” and “end” instead of “left” and “right”. Write the layout once and it mirrors correctly in both languages.

2. Mirroring the wrong icons (or none)

Icons that show direction, such as arrows, “next” and “back”, must flip. Icons that show a real-world thing must not: a logo, a clock, a play button, a checkmark. A flipped logo is a quick way to look careless.

3. Mixed text and numbers that scramble

Arabic sentences often contain English brand names, numbers, prices and phone numbers. Without care, punctuation jumps to the wrong side and a phone number reads backwards. Mark such pieces so the browser isolates them, and test real sentences, not placeholder text.

4. Treating Arabic type like English type

  • Line height: Arabic needs more space between lines than Latin text, or the marks above and below the letters collide.
  • Letter spacing: adding it to Arabic breaks the joins between letters. Leave it at zero for Arabic.
  • Font: pick a typeface designed for Arabic, not a fallback that borrows glyphs. Check the weights you really use.
  • Size: Arabic often needs a slightly larger size to feel as comfortable as the English next to it.

5. Forms that fight the reader

Labels and text align to the start of the line, in the reader’s direction. But email addresses, phone numbers and web addresses are left-to-right by nature, so those fields should accept and display them that way even on an Arabic page.

6. Sliders, progress bars and anything that moves

A carousel that advances to the right in an Arabic page feels backwards. Steps, progress bars and timelines should run in the reading direction. These are easy to forget because they look fine in the English version.

7. Translating words instead of meaning

A button that says the literal translation of “Get started” may sound stiff or even odd. Write the Arabic as a person who speaks it would say it. The same goes for headlines, error messages and the small text around forms. This is where a native reader catches what software does not.

8. One address for two languages

Give each language its own address (for example the Arabic pages under their own path), set the page’s language and direction in the code, and tell search engines about the pairs with language alternates. Otherwise search engines may show the wrong language to the wrong person, and the language switch may send visitors to the home page instead of the same page.

9. Testing with fake content and on one device

Real headings are longer than “Lorem ipsum”. Arabic headings wrap differently. Test with the real text, on a phone and on a desktop, and ask someone who reads Arabic every day to look at it for five minutes.

A quick checklist

  • Layout built with start and end, not left and right.
  • Direction icons flip, logos and real-world icons do not.
  • Numbers, prices and brand names inside Arabic sentences look right.
  • Arabic line height and letter spacing set for Arabic.
  • Email, phone and web fields behave left-to-right.
  • Sliders and steps follow the reading direction.
  • Arabic written, not just translated.
  • Separate addresses, language and direction set, language alternates in place.
  • Checked with real content on real phones by a real reader.

Frequently asked questions

Do I need two separate websites?

No. One website with two language versions, each with its own addresses, is the right structure.

Can a plugin make my site right-to-left?

A plugin can flip a layout. It cannot fix typography, icons, mixed text or the quality of the translation.

Should the Arabic addresses use Arabic letters?

Short Latin addresses are easier to share, because Arabic letters turn into long percent codes in many places.

Building a bilingual site, or fixing one that feels flipped? See my web development work or tell me about your site.

Let's talk

Have a question or a request? Send a message and you will get a reply as soon as possible.

Contact me