Right-to-left languages

Right to left languages

import { OrbitProvider, defaultTheme } from "@kiwicom/orbit-components";
<OrbitProvider useId={React.useId} theme={{ ...defaultTheme, rtl: true }}>
<App />
<html dir="rtl">

Rendering Bidirectional Text in RTL Mode

Fully RTL Text

Bidirectional Text

Handling Bidirectional Text

  1. Use fully RTL text to ensure proper rendering.
  2. If using bidirectional text is necessary, wrap the LTR part with an element that has dir="ltr" to enforce the correct rendering order.
<div dir="rtl">שלום <span dir="ltr">world</span></div>
  1. Alternatively, if you don’t know the direction of the text, use the bdi element to wrap the unknown part.
<div dir="rtl">שלום <bdi>world</bdi></div>