Aria Lab is a concrete and geotechnical testing laboratory. Their customers read
Persian. The site had to be right-to-left, and the tempting shortcut is to build
it left-to-right and set dir="rtl" at the end.
That produces something that works and feels wrong. Here is what actually needs attention.
Mirroring is not the same as designing
dir="rtl" flips the box model, and modern CSS logical properties do most of the
mechanical work — margin-inline-start instead of margin-left, and so on. Use
those and the layout will reverse correctly.
What does not reverse correctly is everything that carries meaning through direction:
- Progress and sequence. A left-pointing arrow means “back” in a left-to-right interface and “forward” in a right-to-left one. Icons that imply direction have to be mirrored deliberately, one at a time, because some should flip and some must not.
- Logos and photographs. These never mirror. A flipped photo of a job site is simply a wrong photo.
- Numbers and Latin fragments. Equipment codes, standards references, and measurements stay left-to-right inside a right-to-left sentence. The bidirectional algorithm handles most of this, but punctuation next to a mixed run lands in surprising places and has to be checked by eye.
Type is the part that looks cheap if you rush it
Persian script joins, sits differently on the baseline, and has almost no uppercase-style hierarchy to lean on. A few things mattered more than expected:
- Line height needs to be higher than a comparable Latin setting. Ascenders and descenders in Persian collide at spacing that would be comfortable in English.
- Letter-spacing must be zero. Tracking that flatters a Latin heading breaks the joins between Persian letters and makes the word look misspelled.
- Font weight range is narrower. Many Persian faces do not have a genuine light or semibold, and synthesised weights look smeared. It is better to design hierarchy with size and colour than to reach for a weight that does not exist.
The admin panel has different rules from the public site
The public site is Persian throughout. The management panel is used by staff who work with Latin-script equipment names, file names, and database fields all day. Forcing that interface fully right-to-left made it harder to use, not easier.
The panel ended up mixed on purpose: Persian labels and navigation, left-to-right data tables where the content is codes and measurements. That is not a compromise — it matches how the people using it actually read.
What we would do again
Set direction at the root and use logical properties from the first commit. It
costs nothing at the start and is expensive to retrofit, because by then every
padding-left in the codebase is a decision you have to re-examine.
The Aria Lab project page has more on how the site and the panel are put together.