Bidirectionality

In this guide, you'll learn how to set up Base Web for right to left languages.

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>
  );
}