Skip to content

Language and right to left

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

  • 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.

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

Owner
Okrado founders
Updated
Review by
Markdown version
/foundations/i18n-rtl.md