Right-to-left design done properly: more than mirroring the page

Most design tools and templates are made for left-to-right languages. As a result, many right-to-left products feel like a rushed translation: everything is flipped, yet nothing sits quite right.

Proper RTL isn't a setting. It is a set of decisions.

Write direction logically, not physically

The first and most important technical rule: use "start" and "end" instead of "left" and "right".

CSS has logical properties. Instead of margin-left you write margin-inline-start. In Persian that means right; in English, left. One codebase, two languages.

Write this way from the beginning and a second language is almost free. This site renders both Persian and English from a single set of styles.

What flips and what doesn't

Not everything mirrors. This list prevents most errors.

Flips:

• Overall page layout and column order.
• Directional icons: "next" and "back" arrows.
• Progress bars and sliders.
• The order of steps in a process.

Doesn't flip:

• Logos.
• Icons with no direction: search, settings.
• Media playback controls; play always points right.
• Clocks, and most timelines.
• Code, URLs, email addresses and phone numbers.

Mixed-language text

Real Persian text is full of Latin words: product names, technical terms, addresses. When the two share a line, the browser has to decide where each run goes, and it doesn't always guess correctly.

Punctuation attached to the end of a Latin word suddenly jumps to the start of the line. The fix is to isolate the Latin run explicitly so the browser treats it as independent.

The same holds for inputs: email and URL fields must always be left-to-right, even on a Persian page.

Persian typography

• More line height. Persian letterforms need more vertical room. A line height that suits English feels cramped in Persian.
• No letter-spacing. Persian letters connect. Tracking them, as is common in English design, breaks the word.
• No capitals. Emphasis made with capitals in English has to come from weight or colour.
• A font with enough weights. A good Persian typeface in several weights does more for readability than any ornament.
• Line length. Very long lines are hard to read in any script.

The zero-width non-joiner

The zero-width non-joiner is part of correct Persian spelling: it separates letters that belong to one word without adding a space. Without it text looks amateur, and if a full space is used instead, the word breaks at the end of a line.

For product content, an automatic check is worth having. On this site, content validation flags the common patterns where it is missing.

Digits and dates

• Persian digits in Persian text.
• Always store Latin digits. Keep ASCII in the database and convert on display.
• Accept both on input. Users may type with either keyboard.
• The Solar Hijri calendar. Gregorian dates mean little to an Iranian user.
• Thousands separators and the percent sign have Persian forms too.

Common mistakes

• Mirroring the whole page with one rule and forgetting the exceptions.
• Arrows pointing the wrong way.
• A progress bar filling from the left.
• Stray punctuation beside a Latin word.
• A Latin number in the middle of Persian text.
• An entrance animation arriving from the wrong side.
• Not testing with real copy; Persian text is usually a different length from English.

Testing

Look at an RTL interface with real content, not placeholder text:

• Long and short words.
• Lines containing Latin words and numbers.
• Error and empty states.
• Both languages, if the product is bilingual.

The takeaway

Good RTL design goes unnoticed; it simply feels right. Logical direction, typography suited to the script, isolated Latin runs and correct digits produce a product a Persian-speaking user feels was made for them.

Related: a design system for small teams.