Direction

Direction

The same samples twice, left to right and right to left. Nothing here is written for the right-to-left side: every stylesheet speaks of the start and the end of a line, so a block given `dir="rtl"` — or a page in Arabic — mirrors on its own. Arrows point the other way, the knob of a switch travels the other way, a menu opens toward the end, and an email or a path keeps reading left to right.

Left to right

Navigation

Controls

Notifications
Weekly digest
Upload

Data

Owner
Layla Haddad
Email
layla.haddad@example.test
Site
https://example.test/account/42
Amount
1,250.00 EUR
OwnerEmailAmount
Layla Haddad layla.haddad@example.test 1,250.00
Omar Benali omar.benali@example.test 84.10

Text

A lead paragraph carries its rule on the side the line starts from.

Values keep their own direction inside a sentence — ask layla.haddad@example.test, run git switch main, assets/css/shapes/_zone.scss .

Delivered Documentation
Right to left

Navigation

Controls

Notifications
Weekly digest
Upload

Data

Owner
Layla Haddad
Email
layla.haddad@example.test
Site
https://example.test/account/42
Amount
1,250.00 EUR
OwnerEmailAmount
Layla Haddad layla.haddad@example.test 1,250.00
Omar Benali omar.benali@example.test 84.10

Text

A lead paragraph carries its rule on the side the line starts from.

Values keep their own direction inside a sentence — ask layla.haddad@example.test, run git switch main, assets/css/shapes/_zone.scss .

Delivered Documentation