---
url: https://brand.okrado.com/foundations/i18n-rtl/
title: Language and right to left
description: "English, French and Arabic: logical CSS, direction on the root, and what to test."
kind: reference
owner: hmdmsd
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - developer
  - designer
---

# Language and right to left

> English, French and Arabic: logical CSS, direction on the root, and what to test.

Okrado ships in English and French, with Arabic ready. Arabic is right to left; layouts must mirror without a second stylesheet.

## Rules

- **Logical CSS only**: `margin-inline-start`, `padding-block`, `inset-inline-end`, and the Tailwind `ms-`, `pe-`, `start-`. Physical `left` and `right` are a defect.
- Set `lang` and `dir` on `<html>`. Portalled layers (dialogs, drawers, toasts) sit outside the page’s own wrapper, so direction lives on the root.
- Drawers open from the inline end and mirror in right to left.
- Icons that show direction (arrows, chevrons) mirror; icons that show an object do not.
- Numbers stay tabular; Arabic text uses Readex Pro.
- Strings come from `messages/{en,fr}.json`; never concatenate a sentence from parts.

## What to test

Render every screen in French (longer strings) and in Arabic (mirrored). Look for truncation, text under an icon, and anything that does not mirror.