RTL

coach-admin serves coaches and clients who work in Arabic. Every layout works right-to-left, from the same code: switch the direction in the header and this whole site mirrors.

Set the direction once

<html lang="ar" dir="rtl">

Everything below follows from dir. Don't build separate RTL stylesheets; coach-admin's current RTL stylesheet goes away with the migration.

Use logical properties

Write start and end, never left and right.

Instead of	Use	Tailwind
`margin-left`	`margin-inline-start`	`ms-4`
`padding-right`	`padding-inline-end`	`pe-4`
`left: 0`	`inset-inline-start: 0`	`start-0`
`border-left`	`border-inline-start`	`border-s`
`text-align: left`	`text-align: start`	`text-start`
`rounded-l-md`	`border-start-*-radius`	`rounded-s-md`

A row in both directions

Switch the preview's direction. The avatar moves to the start, the numbers to the end, and nothing else needs to change.

Sara Al-Otaibi

12-week strength · Week 3

82.5 kg

Checked in 2 days ago

What mirrors

Layout: sidebar, navigation order, alignment, padding.
Icons that show direction: arrows, chevrons, back and forward, progress that moves.
Swipe and slide directions: a sheet opens from the start edge.

What does not mirror

Media controls: play, fast-forward and video timelines keep their direction.
Numbers, phone numbers and times: +966 55 123 4567 reads left to right inside Arabic text. Wrap them in <bdi> or dir="ltr".
Charts: time axes and values stay left to right; the legend and labels follow the page.
Logos and the brand mark.
Code.

See Iconography for a live list.

Numerals and units

Use Western digits (0–9) in both languages (QUESTIONS Q22). Units follow the number with a space, in the reading language: 82.5 kg and 82.5 كغ. Currency: SAR 450 and 450 ر.س.

Mixed-language text

A program name in English inside an Arabic sentence, or a client's Arabic name in an English table: isolate the run with <bdi> and mark its lang. See Typography.

Related: Typography, Content, Iconography.