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
- Declare the language on every page with the lang attribute.
- Use dir="rtl" and logical CSS (start and end, not left and right) for right-to-left languages.
- Use fonts made for each script, such as IBM Plex Sans Arabic or Noto.
- 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?