Switch layout direction from locale

Use direction="auto" when the active locale should decide whether the app renders left-to-right or right-to-left.

Arabic, Hebrew, Persian, and Urdu are right-to-left languages. With automatic direction, switching to one of those locales updates App.direction and sets the root document direction.

<App
  direction="auto"
  localeBundles="{{
    en: { 'heading': 'Account settings' },
    ar: { 'heading': 'اعدادات الحساب' }
  }}">
  <VStack gap="$space-3">
    <HStack>
      <Button label="English" onClick="App.setLocale('en')" />
      <Button label="Arabic" onClick="App.setLocale('ar')" />
    </HStack>

    <Text variant="strong">{App.translate('heading')}</Text>
    <Text>Locale: {App.locale}</Text>
    <Text>Direction: {App.direction}</Text>
  </VStack>
</App>
Switch direction automatically from locale
<App
  direction="auto"
  localeBundles="{{
    en: { 'heading': 'Account settings' },
    ar: { 'heading': 'اعدادات الحساب' }
  }}">
  <VStack gap="$space-3">
    <HStack>
      <Button label="English" onClick="App.setLocale('en')" />
      <Button label="Arabic" onClick="App.setLocale('ar')" />
    </HStack>

    <Text variant="strong">{App.translate('heading')}</Text>
    <Text>Locale: {App.locale}</Text>
    <Text>Direction: {App.direction}</Text>
  </VStack>
</App>

Key points

Use direction="auto" at the app root: XMLUI derives ltr or rtl from the active locale.

Switching locale switches direction: App.setLocale('ar') changes both translations and layout direction.

Built-ins use logical CSS properties: XMLUI components are designed to mirror without per-component overrides.

Override only when necessary: Use explicit direction="ltr" or direction="rtl" when a particular app or subtree must ignore locale-derived direction.

See also