Building a bilingual website is not the same as translating a few strings. The direction of the interface changes, typography behaves differently, components need to survive longer text, and search engines need a clear relationship between language versions.
This guide presents a practical architecture for websites that support both English and Arabic without duplicating the entire frontend. Treat language and direction as document state
This helps browsers, screen readers, form controls, punctuation, and bidirectional text behave correctly.
In a React application, derive both values from the active locale: Use CSS logical properties
Directional declarations such as margin-left and padding-right create avoidable RTL bugs. Logical properties describe the purpose of the spacing instead of a physical side.
The same component now adapts automatically when the document direction changes.
Use these replacements whenever possible: margin-inline-start instead of margin-left padding-inline-end instead of padding-right inset-inline-start instead of left border-start-start-radius for direction-aware corners Do not mirror everything
Layout direction should change, but not every visual element should flip. Logos, photographs, media controls, phone numbers, code snippets, and many charts should preserve their original orientation.
Avoid applying scaleX(-1) to a whole container. It may reverse images and text rendering in surprising ways. Keep translation content separate from components
For production systems, validate message keys during the build so a missing translation cannot silently reach the interface. Design for text expansion
Arabic and English strings rarely occupy identical widths. Navigation labels, buttons, cards, and validation messages should grow naturally.
Test components with deliberately long labels. A layout that survives difficult content is more reliable than one tested only with short placeholder text. Choose and load fonts carefully
A font may look excellent in Latin characters but offer weak Arabic glyphs. Choose a family with deliberate Arabic support, or define a compatible pair.
Subset font files, preload only the critical weight, and use font-display: swap. Loading five weights for two writing systems can quickly become one of the page's largest performance costs. Give each language a stable URL
Do not change visible language only through JavaScript while keeping one URL. Separate URLs make sharing, analytics, caching, and search indexing more predictable.
Each page should also use a self-referencing canonical URL. Do not canonicalize the Arabic version to the English version; they are alternate language pages, not duplicates. Test mixed-direction content
Arabic interfaces often contain English product names, email addresses, URLs, and numbers. Wrap isolated fragments when the browser may infer the wrong direction.
Test at least: Arabic text containing an English brand name phone numbers and prices form validation messages breadcrumbs and pagination icons inside buttons mobile navigation copied URLs and email addresses Make direction part of automated testing