Right-to-left has to be designed in, not added

Adding Arabic to a finished product is quoted as a translation job and delivered as a rewrite. The translation is the cheap part. The expensive part is that every measurement in the layout was written as left or right, and in Arabic they are the wrong way round.

Logical properties do the work

A layout written with margin-left and padding-right has to be inverted by hand, screen by screen, and then maintained in two directions forever. A layout written with margin-inline-start and padding-inline-end mirrors on its own the moment the document direction changes.

The same applies to grids and flex containers, which follow the writing direction without being told. The practical rule is that physical directions appear only where something genuinely is physical: a shadow that falls down, a border under a heading.

What mirrors and what does not

Not everything flips, and flipping the wrong things is as obvious to an Arabic reader as not flipping anything.

• Mirror: arrows, chevrons, progress and any icon that implies direction of travel. A drawer slides in from the other side.
• Do not mirror: logos, clock faces, checkmarks, and anything containing Latin text or digits.
• Numbers stay in the same order. Only the surrounding text changes direction.

Latin inside Arabic needs isolation

Product names, email addresses, technology names and registry numbers stay in Latin script inside Arabic sentences. Left alone, the punctuation at their edges migrates: a bracket opens on the wrong side, a full stop lands at the start of the line.

Marking those runs with a direction attribute rather than with invisible control characters fixes it and keeps the text searchable and copyable. This site does exactly that: every Latin run inside Arabic prose is isolated at build time.

Typography is not a swap

Arabic is not Latin in a different font. Line height needs to be noticeably larger, roughly 1.8 against 1.6, because the script has more vertical movement. Letter spacing has to be zero, since Arabic letters join and spacing them apart breaks the word. The base size usually needs a step up to match the perceived size of the Latin around it.

A display face chosen for Latin will not carry Arabic, and forcing it produces exactly the collisions between marks and letters that make a page feel unfinished.

The cost difference

Designed in from the first component, right-to-left costs a day of decisions and a stylesheet that never mentions left or right. Added afterwards it costs a pass over every screen, a second set of styles to maintain, and a class of bugs that only appear in a language most of the team does not read.

NextWR ships products with Arabic interfaces, which is why this site is fully right-to-left in Arabic rather than a translated copy of the English layout.