Skip to content

MAGIK-924: RTL Layout Support for Arabic #103

@MAGIKBIT

Description

@MAGIKBIT

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 is ar
  • Set dir="ltr" for all other locales (en, es, am, ti)
  • Add lang attribute matching current locale

RTL Stylesheet

  • Create rtl.css overlay loaded conditionally when dir="rtl"
  • Mirror horizontal padding, margins, and positioning
  • Flip flexbox direction (rowrow-reverse where 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-end over margin-left / padding-right
  • Use inset-inline-start over left / right where 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 link
  • app/app.portalv2/app/Views/partials/sidebar.php — RTL-aware positioning
  • app/app.portalv2/app/Views/partials/board-header.php — RTL breadcrumb rendering

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions