91 lines
1.9 KiB
Markdown
91 lines
1.9 KiB
Markdown
# 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
|
|
|
|
```css
|
|
/* 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 */
|
|
}
|
|
```
|
|
|
|
```blade
|
|
<!-- 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
|