Language & RTL Rules
RTL layout rules
RTL layout rules — documentation pending.
Complete
Arabic flips the layout via `dir="rtl"` on the root element. No per-page RTL CSS exists — the design system uses logical properties (`padding-inline-*`, `border-inline-start`, `inset-inline-*`) so layouts mirror automatically.
How RTL is applied
- Root attribute
- Every page template binds `[attr.dir]="locale() === 'ar' ? 'rtl' : 'ltr'"` on the outer wrapper. The browser flips block-direction, text-direction, and logical properties.
- Logical CSS properties
- Use `padding-inline-start/end`, `margin-inline`, `border-inline-start/end`, `inset-inline-*`. AVOID `left`, `right`, `padding-left`, `padding-right`, `border-left`, `border-right`.
- Tailwind logical utilities
- Tailwind v4 ships `ps-*` / `pe-*` / `ms-*` / `me-*` / `start-*` / `end-*` / `border-s` / `border-e`. Use these instead of `pl-*` / `pr-*` / `left-*` / `right-*`.
Icon flip rule
Directional icons (chevrons, arrows, back/forward) must flip in RTL. Add `.icon-flip` class to the SVG — the global guard applies `transform: scaleX(-1)` when `[dir="rtl"]`. Non-directional icons (search, calendar, user) do NOT get the flip class.
Mirroring rules by element type
MIRROR in RTL
- Layout direction (flex, grid order)
- Chevrons + back/forward arrows (.icon-flip)
- Number-list markers + ordered lists
- Breadcrumb separator direction
- Side borders (border-inline-start / -end)
DO NOT mirror
- Logos and brand wordmarks
- Photographs and editorial illustrations
- Numbers and dates (Western digits 0-9)
- Phone numbers and email addresses
- Code blocks and technical identifiers