RTL Support

Component examples

Arabic labels, native form controls, a date range and a country breakdown use the same reusable exports.

Template examples

Layout, navigation and portaled controls inherit the selected direction. Template records remain local sample data.

Direction Provider

Set the host document’s language and direction, then use the shared provider around interactive content. Nest a second provider for a region in another language. The provider configures React Aria interaction locale and supplies a layout-neutral lang/dir wrapper.

import { DirectionProvider } from '@helios-ui/react';

<DirectionProvider locale="ar">
  <AccountSettings />
  <DirectionProvider locale="en-IN">
    <EnglishSupportPanel />
  </DirectionProvider>
</DirectionProvider>

Set up RTL

Set document language and direction for a complete RTL application, then pass the same locale to the provider. The examples above use a nested Arabic boundary so the surrounding documentation remains in English.

import { DirectionProvider } from '@helios-ui/react';

export default function Layout({ children }: { children: React.ReactNode }) {
  return <html lang="ar" dir="rtl"><body>
    <DirectionProvider locale="ar">{children}</DirectionProvider>
  </body></html>;
}

Existing projects

Update the provider, styles and dependent component files together. Keep a copy of local customizations, compare a new source copy with the current implementation, and verify menus, dialogs, calendars and keyboard navigation in each supported locale.

Directional styles

Use logical spacing and alignment so layout follows direction. Mirror navigation arrows when they express movement through the interface; preserve chart coordinates, canvas artwork and chronological order.

<div style={{ paddingInlineStart: 16, marginInlineEnd: 8, textAlign: "start" }}>
  <bdi dir="auto">{customerName}</bdi>
</div>

Localization & fonts

Direction support does not translate your records or labels. Supply localized visible text, accessible names, validation messages and dates; use fonts with Arabic/Hebrew coverage and test shaping, line height and mixed-language content.

Mixed content and custom portals

Use logical inline/start/end properties for your own layout. Keep addresses, source code and appropriate numeric sequences LTR; isolate mixed text with bdi. Carry the provider’s direction onto custom portals. Chart coordinates and chronological data retain their order while card layout follows the locale.

import { useDirection } from '@helios-ui/react';
import { createPortal } from 'react-dom';

function CustomOverlay() {
  const { direction, locale } = useDirection();
  return createPortal(<div lang={locale} dir={direction}>…</div>, document.body);
}

Choose a font with Arabic/Hebrew glyph coverage and verify shaping, line height, translated accessible labels and dates in the consuming application. Direction support does not translate application content.