# RTL Support Source: https://lumeo.nativ.sh/docs/rtl # 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`. @inject IThemeService ThemeService // Flip to RTL (persisted across reloads) await ThemeService.SetDirectionAsync(LayoutDirection.Rtl); // Back to LTR await ThemeService.SetDirectionAsync(LayoutDirection.Ltr); // Read the current direction LayoutDirection dir = await ThemeService.GetDirectionAsync(); 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. Switch to RTL dir = ltr ### 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 ``, persists to localStorage, fires OnThemeChanged. GetDirectionAsync() Task 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).