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

.ltr - Force LTR

.rtl - Force RTL

Text Alignment

.text-start - Align to start

.text-end - Align to end

Logical Properties

.ps-4 - Padding inline start

.pe-4 - Padding inline end

.ms-4 - Margin inline start

.me-4 - Margin inline end

Mixed Content

.isolate-ltr - Isolate LTR content

.isolate-rtl - Isolate RTL content

.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 (ms-*, me-*, ps-*, pe-*) instead of directional ones
Replace text-left/right with 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