Bidirectional Components
Understanding and handling mixed-direction text (BiDi) in your applications for proper rendering of multilingual content.
What is BiDi?
BiDi (Bidirectional) text refers to content that contains both left-to-right (LTR) and right-to-left (RTL) scripts in the same context. Common scenarios include:
- • Arabic text with English brand names or technical terms
- • Hebrew content with numbers and Latin characters
- • Mixed language user interfaces
- • Email addresses and URLs in RTL text
Handling Mixed Text
Use the dir="auto" attribute for automatic direction detection:
Browser Auto-Detection
Modern browsers automatically detect text direction with dir="auto", analyzing the first strong directional character.
Form Inputs with BiDi
Input fields should adapt to content direction:
Numbers and Dates
Special handling for numeric content in RTL text:
BiDi Best Practices
- • Numbers remain LTR even in RTL text (1234, not 4321)
- • Dates in ISO format should stay LTR (2025-01-15)
- • Phone numbers should always be LTR with proper alignment
- • Email addresses and URLs remain LTR
- • Use Unicode BiDi controls sparingly and only when necessary
Component Support
All Noor UI components handle BiDi text automatically:
- ✓ Input fields auto-detect direction
- ✓ Text areas support mixed content
- ✓ Labels align correctly with inputs
- ✓ Tooltips position based on direction
- ✓ Dialogs and modals handle mixed text