MAGIK-924: RTL Layout Support for Arabic #103
Description
Story 3 — RTL Layout Support for Arabic
Epic: EPIC-010 — Global Internationalization & Multi-Language Support (GitHub #100)
Priority: P0
User Story
As an Arabic-speaking user, I want the entire UI to render right-to-left (RTL) with proper mirroring of layout, icons, and navigation, so the experience feels natural in my language.
Requirements
HTML Direction
- Set
dir="rtl"on<html>element when locale isar - Set
dir="ltr"for all other locales (en, es, am, ti) - Add
langattribute matching current locale
RTL Stylesheet
- Create
rtl.cssoverlay loaded conditionally whendir="rtl" - Mirror horizontal padding, margins, and positioning
- Flip flexbox direction (
row→row-reversewhere needed) - Mirror border-radius (e.g., left-rounded → right-rounded)
- Flip sidebar from left to right
- Mirror breadcrumb separators
- Flip table column order awareness
- Mirror form input text alignment
Component-Specific RTL Fixes
| Component | LTR Behavior | RTL Behavior |
|---|---|---|
| Sidebar navigation | Left-anchored | Right-anchored |
| Board header gradient | Left-to-right | Right-to-left |
| Breadcrumbs | Home / Section / Page |
Page / Section / Home (visual) |
| Data tables | Left-aligned text | Right-aligned text |
| Form labels | Left of input | Right of input |
| Toggle switches | Label on left | Label on right |
| Pagination | Previous ← → Next | Next → ← Previous |
| Dropdown menus | Left-aligned | Right-aligned |
| Toast notifications | Top-right | Top-left |
| Icons (directional) | → arrows | ← arrows |
| Modal close button | Top-right | Top-left |
| Search bar | Left icon | Right icon |
CSS Logical Properties
- Prefer
margin-inline-start/padding-inline-endovermargin-left/padding-right - Use
inset-inline-startoverleft/rightwhere supported - This ensures automatic RTL flipping without duplicate rules
Font Stack
- Arabic locale: prepend
"Noto Sans Arabic", "Segoe UI"to font-family - Ensure Ge'ez script fonts also support Arabic diacritics fallback
Acceptance Criteria
| # | Criteria | Priority |
|---|---|---|
| 1 | <html dir="rtl" lang="ar"> when locale is Arabic |
P0 |
| 2 | Sidebar renders on right side | P0 |
| 3 | All text right-aligned in RTL mode | P0 |
| 4 | No horizontal scrollbar or layout overflow in RTL | P0 |
| 5 | Forms render correctly with RTL labels | P0 |
| 6 | Data tables readable in RTL | P1 |
| 7 | All 20 board views visually correct in RTL | P1 |
| 8 | CSS logical properties used where possible | P2 |
| 9 | No LTR-only icons (arrows, chevrons) broken in RTL | P1 |
Files to Create
app/app.portalv2/public/css/rtl.css
Files to Modify
app/app.portalv2/app/Views/layouts/main.php— conditional dir attribute, RTL stylesheet linkapp/app.portalv2/app/Views/partials/sidebar.php— RTL-aware positioningapp/app.portalv2/app/Views/partials/board-header.php— RTL breadcrumb rendering