1.9 KiB

Raw Blame History

Story 9.8: RTL/LTR Layout Perfection

Epic Reference

Epic 9: Design & Branding Implementation

User Story

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.

Acceptance Criteria

RTL (Arabic)

Text aligns right
Navigation mirrors (logo right)
Form labels on right
Icons/arrows flip appropriately
Margins/paddings swap

LTR (English)

Standard left-to-right layout
Proper text alignment

Transitions

Seamless language toggle
No layout breaks on switch

Component Support

Calendar RTL support
Tables RTL support
All components tested in both modes

Technical Notes

/* Use logical properties */
.card {
  margin-inline-start: 1rem; /* margin-left in LTR, margin-right in RTL */
  padding-inline-end: 1rem;  /* padding-right in LTR, padding-left in RTL */
}

/* RTL-aware utilities */
[dir="rtl"] .flip-rtl {
  transform: scaleX(-1);
}

/* Tailwind RTL plugin configuration */
@theme {
  /* Use logical properties by default */
}

<!-- RTL-aware icon -->
<flux:icon
    name="arrow-right"
    @class(['flip-rtl' => app()->getLocale() === 'ar'])
/>

<!-- RTL-aware positioning -->
<div class="{{ app()->getLocale() === 'ar' ? 'right-0' : 'left-0' }} absolute">
    <!-- Content -->
</div>

<!-- Better: Use logical properties -->
<div class="start-0 absolute">
    <!-- Content -->
</div>

Testing Checklist

Navigation layout
Form layouts
Card layouts
Table layouts
Modal layouts
Dropdown menus
Pagination

Definition of Done

RTL renders correctly
LTR renders correctly
Language switch seamless
Icons flip correctly
All components tested
No layout breaks
Tests pass

Estimation

Complexity: High | Effort: 5-6 hours

1.9 KiB Raw Blame History