Direction (RTL / LTR)

To use SonoJS in a right-to-left layout, set dir="rtl"on the HTML element. That's it.

SonoJS components follow the direction automatically. You do not need to configure each component. They inherit direction from their parent.

Set direction once

Put direction on the root HTML tag. Everything inside inherits it.

RTL app

<html dir="rtl">

LTR app

<html dir="ltr">

RTL section inside an LTR app

Need one block in the other direction? Wrap it with DirectionProvider.

DirectionProvider

import { DirectionProvider } from "@/components/direction"

export function RtlSection() {
  return (
    <DirectionProvider dir="rtl">
      <LoginForm />
    </DirectionProvider>
  )
}

Try it

Use the toggle to switch LTR and RTL. The same components update automatically.

For contributors (building components)

App developers can skip this section. It is for people who add new SonoJS components.

Use CSS logical properties: ms / me, ps / pe, start / end, text-start. Avoid physical ml / mr / left / right for layout.
Do not hardcode dir on component roots. Inherit from the parent.
For arrows and chevrons along the inline axis, add class icon-dir.
For Sheet and similar edge UI, use getStartSide(dir) or getEndSide(dir).