An Arabic website is not an English interface pushed to the right. Arabic affects direction, reading order, typography, navigation, forms, numbers and the way mixed-language content behaves.
A bilingual product should be designed in both directions from the start. These seven mistakes make otherwise professional businesses look careless.
1. Using alignment instead of real direction
Right-aligning text with CSS does not establish the document’s reading direction. For an Arabic page, use semantic HTML such as <html lang="ar" dir="rtl">. W3C and MDN recommend the dir attribute because direction is part of the content’s meaning, not merely decoration.
2. Forgetting the page language
Set the lang attribute correctly for the page and for passages that switch language. Assistive technology uses it to choose appropriate pronunciation. lang does not replace dir; both are needed.
3. Mirroring everything blindly
Navigation flow and directional icons may need to mirror, but not every symbol does. Brand marks, media controls, clocks, charts and recognised product imagery may retain their original orientation. Define component-level behaviour instead of flipping the whole screen mechanically.
4. Breaking mixed Arabic and English text
Names, phone numbers, prices, product codes and English terms can cause punctuation to jump. Isolate embedded content with the appropriate language and direction. For user-generated text of unknown direction, dir="auto" can help, with testing for edge cases.
5. Translating words without localising meaning
Literal translation can produce unclear buttons and culturally unnatural messages. Localisation should review tone, date and number formats, address fields, currencies, plural forms and examples, not only words.
6. Choosing a weak Arabic type system
The Arabic and Latin fonts should feel related in weight and hierarchy. Test small text, diacritics, numerals and bold styles on real devices. Do not reduce Arabic font size merely because its visual texture appears larger.
7. Testing one language at the end
Late RTL testing reveals structural problems when they are expensive to fix. Test every component in Arabic and English during development: menus, tables, charts, validation errors, emails, PDFs and mobile layouts.
A bilingual release checklist
- Correct
langanddirat page level - Logical CSS properties such as start/end where appropriate
- Keyboard and screen-reader checks
- Mixed-direction names, numbers and punctuation tested
- Arabic content reviewed by a native language specialist
- Mobile, email and generated-document layouts verified
- Language choice remembered without trapping the user
- Arabic and English paths included in analytics and SEO
Bilingual quality is not polish added after development. It is part of product architecture and customer trust.