Edit this page

Bidirectionality

For user interfaces for languages that are read from right-to-left (RTL), the interface should be mirrored. This ensures that the application is easy to understand.

Setup

In HTML

Add the dir attribute to the body of your application:

<body dir="rtl"></body>

In Base Web

You have to change the direction property in the Base Web theme:

import {Client as Styletron} from 'styletron-engine-atomic';
import {Provider as StyletronProvider} from 'styletron-react';
import {LightTheme, BaseProvider} from 'baseui';
import {StatefulInput} from 'baseui/input';
const engine = new Styletron();
export default function Hello() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={{...LightTheme, direction: 'rtl'}}>
        <StatefulInput />
      </BaseProvider>
    </StyletronProvider>
  );
}