Skip to content
Back

5 min read

RTL is not a CSS property

Setting dir="rtl" flips your layout. It does not make your product usable in Persian. The gap between those two things is where the real work lives.

  • i18n
  • css
  • accessibility

I have shipped three products into Persian-speaking markets. Every one of them taught me something the documentation did not.

Logical properties are the easy half

Replacing margin-left with margin-inline-start costs an afternoon and solves perhaps sixty percent of the problem. Do it first, and do it everywhere, including in the places you are certain are symmetric.

Numbers do not flip

A phone number, a version string, a code snippet, a duration — these stay left-to-right inside right-to-left text. If you let the bidi algorithm guess, it will eventually guess wrong, usually in a screenshot a customer sends you.

Icons carry direction

An arrow meaning "next" must mirror. A play button must not. A checkmark must not. There is no rule that covers both cases; you have to go through them by hand once and then encode the answer.

Fonts are not interchangeable

Most Latin faces have no Persian coverage at all, and the ones that claim to often have the wrong letter joining behaviour. Pick a face built for the script and set a slightly looser line-height — Persian ascenders and descenders need the room.