---
id: 9-8
title: 9-8 RTL/LTR Layout Perfection
status: Done
date: 2026-09-27
parent: 9
---

## Description

As a user, I want perfect RTL layout for Arabic and LTR for English, So that the content is natural to read in my language. Full implementation history: docs/stories/story-9.8-rtl-ltr-layout-perfection.md

## Acceptance Criteria

- [ ] `dir="rtl"` dynamically set on `<html>` when locale is `ar`
- [ ] Text aligns right naturally
- [ ] Navigation mirrors (sidebar on right for RTL)
- [ ] Form labels on right side of inputs
- [ ] Icons/arrows flip appropriately (chevrons, arrows)
- [ ] Margins/paddings swap using logical properties
- [ ] `dir="ltr"` set on `<html>` when locale is `en`
- [ ] Standard left-to-right layout
- [ ] Proper text alignment
- [ ] Seamless language toggle without page reload issues
- [ ] No layout breaks on switch
- [ ] No flash of wrong direction on page load
- [ ] Calendar component RTL support (date picker)
- [ ] Tables RTL support (horizontal scroll direction)
- [ ] Dropdowns open in correct direction
- [ ] Modals position correctly
- [ ] All Flux UI components tested in both modes