Skip to content
← Academy

Lesson 009 · Design Principles 101 · 4 min

One site, two directions

Principle: Speak your visitors' language, properly.

1 · The crime

What goes wrong

A clinic offers an Arabic version. Clicking it shows machine-translated text, aligned left, with English words left inside and numbers in the wrong order. Patients wonder if the care is as careless as the translation.

2 · The law

Speak your visitors' language, properly.

  • Offer the languages your visitors actually use, and only link to translations that exist.
  • Arabic, Hebrew, Persian and Urdu read right to left: the whole layout should mirror, not just the text.
  • Machine translation is a draft. A native speaker should review anything public.

3 · The tool

Check it yourself, for free

  • Switch your site's language and click through the main pages.
  • Your browser's inspector: check the <html> tag has lang="ar" and dir="rtl" on Arabic pages.
  • A native speaker, the best tool of all.

4 · The fix

Step by step

  1. Declare the language on every page with the lang attribute.
  2. Use dir="rtl" and logical CSS (start and end, not left and right) for right-to-left languages.
  3. Use fonts made for each script, such as IBM Plex Sans Arabic or Noto.
  4. Remove language links until the translation is reviewed and complete.

5 · Homework

If your site has a second language, switch to it and visit the contact page. Is everything translated and laid out correctly?