RTL

Turn on right to left support for the whole site, or for single components only.

The theui-svelte components follow the direction of the page, so Arabic, Persian, Hebrew and Urdu layouts need no second stylesheet and no extra build. Set the direction and everything turns around with it: spacing, borders, icons that point somewhere, and the arrow keys inside the components that use them.

RTL For The Entire Website

To enable RTL across your entire site, set the dir attribute on the <html> tag in src/app.html, next to the lang attribute for the language you are writing in. By default, theui-svelte components display in LTR (Left-to-Right) mode, but adding this attribute will switch all components and elements to RTL mode.

src/app.html 
<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <!-- your head content -->
  </head>
  <body>
    <!-- your body content -->
  </body>
</html>

Keep lang and dir in step. Screen readers pick the voice from the language, so a page marked Arabic that is left as dir="ltr" reads badly even when it looks fine.

RTL For A Component

If you want to apply RTL only to a part of the page, put dir="rtl" on an element around it. Components read the direction from where they sit, so anything inside that element turns around and the rest of the page is untouched. This is what you want for a quoted message, an address, or a form in another language.

Svelte 
<!-- Only this part of the page is right to left -->
<div dir="rtl">
  <AnyComponent />
</div>

Accordion Example

The accordion below is currently dir="ltr". Press the button to turn it around, and watch the heading, the arrow and the padding all follow.

Svelte 
<div dir="rtl">
  <Accordion>
    <AccordionItem title="مرحبا بكم">
      <p>تتبع المكونات اتجاه الصفحة.</p>
    </AccordionItem>
  </Accordion>
</div>

Writing Classes That Turn Around

The components are built with logical properties, the ones that talk about the start and the end of a line rather than left and right. Write your own classes the same way and they will follow the direction for free.

  • Use ms-* and me-* instead of ml-* and mr-*.
  • Use ps-* and pe-* instead of pl-* and pr-*.
  • Use start-* and end-* instead of left-* and right-*.
  • Use text-start and text-end instead of text-left and text-right.
  • Use border-s-* and border-e-* instead of border-l-* and border-r-*.
Both directions from one class 
<!-- Turns around on its own -->
<div class="ms-4 border-s-2 ps-2 text-start">...</div>

<!-- Stays on the left, whatever the direction -->
<div class="ml-4 border-l-2 pl-2 text-left">...</div>

Left and right still have their uses. A logo, a chart or a video player that should never flip is better off with the physical class, and Tailwind also gives you the rtl: and ltr: prefixes when one case needs a rule of its own.

What Turns Around By Itself

Layout follows the direction through CSS, but a few components also change how they behave, because reading right to left changes what "next" means.

  • DatePicker and TimePicker swap their left and right arrow keys, so the keyboard moves with the reading order, and the month arrows of the calendar point the other way.
  • Slider moves and swipes the other way, and its arrow keys follow.
  • Progress fills from the right, and the track of a Range fills with it.
  • Drawer slides in from the side you asked for, read as start and end rather than left and right.
  • Smaller touches follow too: the dot on a Badge, and the way avatars overlap in an AvatarGroup.

These components read the direction from the element they are in, so dir anywhere above them is enough. A Slider reads it as it appears on the page, so give the element its direction before the slider renders rather than switching it afterwards.

Text you write yourself is still yours to mind. The default Pagination buttons read "← Prev" and "Next →", and those arrows are characters rather than layout, so set previousButton and nextButton to the wording and the arrows your language expects.