30 June 2026 · 1 min read
Right-to-left is not a CSS flag
Adding dir="rtl" mirrors your layout and breaks about nine things you were not expecting. Here is the list we work through on every bilingual build.
What mirrors correctly on its own
Text flow, block alignment, flexbox and grid direction, list markers, and most padding and margin if you have used logical properties. Modern CSS does a lot of this well.
What does not
- Icons with direction. Arrows, chevrons, back buttons and progress indicators all need flipping — but play, pause and external-link icons must not flip.
- Numbers and dates. Numerals stay left-to-right inside right-to-left text. Mixed strings need explicit isolation or they scramble.
- Charts. Axis order, legends and tooltips are almost never handled by the charting library.
- Form validation. Error text alignment and the position of inline icons.
- Tables. Column order should mirror, but a column of English product codes should not.
- Typography. Arabic needs more line height and a companion typeface with matching weights, or it looks thin next to the Latin.
- Carousels. Swipe direction, autoplay direction and the meaning of “next”.
- Shadows and gradients. Directional ones look wrong mirrored and usually should not mirror.
- Third-party embeds. Chat widgets, booking tools and payment forms often ignore direction entirely.
The rule we work to
Test navigation, forms and tables in RTL from the first prototype, not at the end. Retrofitting RTL onto a finished design system costs roughly three times what building it in costs.
Written by the OneRee team. If any of this is wrong for your situation, tell us — we would rather update the page than be right on the internet.
Keep reading
More from the team.
Next step
Tell us what you are trying to move.
Thirty minutes, no deck. We will tell you what we would do first, what it costs, and whether we are the right people for it.