RTL/LTR Internationalization

BeatUI provides comprehensive support for right-to-left (RTL) and left-to-right (LTR) text directions. The system automatically detects direction from locale and provides utilities for mixed-direction content.

Automatic Direction Detection

BeatUI automatically detects text direction based on the locale. RTL languages include Arabic (ar), Hebrew (he), Persian (fa), Urdu (ur), and others.

Current locale: en-US
Detected direction: ltr
Direction preference: auto

Layout Components

Layout components automatically adapt to text direction:

Sample Text

English text (LTR): This text flows from left to right.

Arabic text (RTL): هذا النص يتدفق من اليمين إلى اليسار.

Hebrew text (RTL): הטקסט הזה זורם מימין לשמאל.

Direction Utilities

BeatUI provides utility classes for direction control:

Direction Override

.bu-dir-ltr - Force LTR

.bu-dir-rtl - Force RTL

Text Alignment

.bu-text-start - Align to start

.bu-text-end - Align to end

Logical Properties

.bu-ps-4 - Padding inline start

.bu-pe-4 - Padding inline end

.bu-ms-4 - Margin inline start

.bu-me-4 - Margin inline end

Mixed Content

.bu-isolate-ltr - Isolate LTR content

.bu-isolate-rtl - Isolate RTL content

.bu-bidi-isolate - Bidirectional isolation

Migration Guide

To add RTL support to existing BeatUI projects:

Update to the latest version of BeatUI
Use logical property utilities (bu-ms-*, bu-me-*, bu-ps-*, bu-pe-*) instead of directional ones
Replace bu-text-left/right with bu-text-start/end for direction-aware alignment
Test your components with RTL locales (ar-SA, he-IL, fa-IR)
Use direction override utilities for mixed-direction content