Bidirectionality

In this guide, you'll learn how to set up Spaceweb 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 Spaceweb

You have to change the direction prop in the SpacewebProvider:

// App.tsx


import * as React from 'react';
import SpacewebProvider from '@sprinklrjs/spaceweb/spacewebProvider';
import light from '@sprinklrjs/spaceweb-themes/hyperspace/light';


const App = (): React.ReactElement => (
  <SpacewebProvider direction="ltr" theme={theme}>
    {/* your application code here */}
  </SpacewebProvider>
);


export default App;

Usage

With utility classes

<Box className="ml-2" />

With logical properties

<Box className={{ marginInlineStart: '4px' }} />;

With styleObject

const { isRTL } = useStyle();
<Box className={{ [isRTL ? 'marginRight' : 'marginLeft']: '4px' }} />;

Example

Left-to-right
G
Gandhi
Mahatma GandhiIndian lawyer
Right-to-left
G
Gandhi
مهاتما غانديمحامي هندي
<Box className="...">
  <Avatar />
  <Box className="ml-2">
    <Typography />
    <Typography />
  </Box>
</Box>