RTL Support

AIIA provides full right-to-left (RTL) layout support for Arabic. The entire interface mirrors when Arabic is selected, ensuring a native reading experience.

How RTL Works

When Arabic is selected, the platform applies:

• dir="rtl" to the HTML document
• lang="ar-SA" for Arabic locale
• CSS logical properties for layout mirroring
• Right-aligned text for all UI elements

What Mirrors

Element	LTR (English)	RTL (Arabic)
Sidebar	Left side	Right side
Text alignment	Left-aligned	Right-aligned
Navigation flow	Left → Right	Right → Left
Icons with direction	→ arrows	← arrows
Table layout	Left-to-right columns	Right-to-left columns
Form labels	Left of inputs	Right of inputs
Breadcrumbs	Home → Module → Page	الرئيسية ← الوحدة ← الصفحة

Charts and Diagrams

• Mermaid diagrams are direction-aware and render RTL for Arabic
• Bar charts maintain standard orientation (left-to-right axis)
• Tables mirror column order

Mixed Content

When Arabic content includes English text (e.g., technical terms):

• The browser's Unicode Bidirectional Algorithm handles the direction automatically
• English words within Arabic text display left-to-right
• No manual intervention is needed

RTL Testing

All RTL layouts are tested against:

• Navigation and sidebar positioning
• Form input and label alignment
• Table rendering
• Modal and dialog positioning
• Date picker direction
• Chart rendering