Right-to-Left (RTL) Support
Lumeo flips automatically for RTL scripts (Arabic, Hebrew, Persian, Urdu). Flip the whole page with a single service call.
Quick Start
Direction is a property of ThemeService.
Call SetDirectionAsync(LayoutDirection.Rtl)
once — it sets document.documentElement.dir = "rtl",
persists the choice to localStorage,
and raises OnThemeChanged.
The initial direction is applied inline by theme.js
on first paint, so there is no flash-of-wrong-direction when the page loads.
Live Demo
Toggle the button below to flip this whole page between LTR and RTL. Notice how padding, margins, alignment and the arrows / chevrons on text all flow from the opposite side.
Input with leading icon
Alignment
Aligned to the logical start — flips in RTL.
Aligned to the logical end — flips in RTL.
Logical spacing
Border, padding and icon all sit on the start edge — swap automatically.
What flips automatically?
Lumeo is built on Tailwind v4 logical utilities, which compile to CSS logical properties
(padding-inline-start,
margin-inline-end,
inset-inline-start, …).
The browser flips these automatically when dir="rtl".
| Category | Status | Notes |
|---|---|---|
Layout / spacing (ps-*, me-*, border-s…) |
Auto |
Resolves to CSS logical properties. |
Text alignment (text-start, text-end) |
Auto |
Flips based on document direction. |
| Overlay / sheet / drawer slide animations | Auto |
Lumeo overrides the X-axis keyframes under [dir="rtl"]. |
Arrow / chevron icons (ChevronLeft, ArrowRight…) |
Manual |
You decide. A "back" chevron has directional meaning, so we don't flip it for you. |
| Charts (ECharts) | Manual |
Pass xAxis.inverse: true or flip the series order if you want bars to read from right to left. |
If you've hand-written CSS with physical properties
(padding-left,
margin-right,
translateX(100%)), migrate to logical variants
(padding-inline-start, …)
or add a [dir="rtl"] override.
API Reference
IThemeService (direction members)
| Member | Type | Description |
|---|---|---|
| CurrentDirection | LayoutDirection | The resolved active direction. |
| SetDirectionAsync(LayoutDirection) | Task | Sets dir on <html>, persists to localStorage, fires OnThemeChanged. |
| GetDirectionAsync() | Task<LayoutDirection> | Reads the current direction from document.documentElement.dir. |
LayoutDirection Enum
| Value | Description |
|---|---|
| Ltr | Left-to-right (English, German, Spanish, …). Default. |
| Rtl | Right-to-left (Arabic, Hebrew, Persian, Urdu). |