# RTL/LTR Direction Setup ## Overview The application automatically handles Right-to-Left (RTL) and Left-to-Right (LTR) text direction based on the selected language: - **English (en)**: LTR - **Arabic (ar)**: RTL ## Implementation ### 1. Store Management (`resources/js/store/index.js`) The app store manages the direction state: ```javascript state: { direction: 'ltr', // 'ltr' or 'rtl' } actions: { setDirection(direction) { this.direction = direction this.saveToLocalStorage() this.applyDirection() }, applyDirection() { document.documentElement.setAttribute('dir', this.direction) }, initializeTheme() { // ... loads direction from localStorage or sets based on locale const locale = localStorage.getItem('locale') || 'en' this.direction = locale === 'ar' ? 'rtl' : 'ltr' } } ``` ### 2. App Initialization (`resources/js/app.js`) The app automatically syncs direction with locale: ```javascript // Set initial direction based on locale if (props.initialPage.props.locale) { const direction = props.initialPage.props.locale === 'ar' ? 'rtl' : 'ltr' appStore.setDirection(direction) } // Watch for locale changes watch( () => i18n.global.locale.value, (newLocale) => { const direction = newLocale === 'ar' ? 'rtl' : 'ltr' if (appStore.direction !== direction) { appStore.setDirection(direction) } }, { immediate: true } ) ``` ### 3. Language Switcher (`resources/js/components/ui/LanguageSwitcher.vue`) When language changes, direction is automatically updated: ```javascript const changeLanguage = (code) => { locale.value = code localStorage.setItem('locale', code) // Update direction based on language const direction = code === 'ar' ? 'rtl' : 'ltr' appStore.setDirection(direction) } ``` ### 4. CSS Support (`resources/css/app.css`) RTL/LTR styles are already configured: ```css [dir="rtl"] { direction: rtl; } [dir="ltr"] { direction: ltr; } ``` ### 5. Tailwind RTL Plugin The project uses `tailwindcss-rtl` plugin for automatic RTL support: ```javascript // tailwind.config.js plugins: [ require('tailwindcss-rtl'), ] ``` ## Usage in Components ### Using RTL-Aware Classes When writing components, use Tailwind's RTL-aware classes: - ✅ Use `ms-*` (margin-start) and `me-*` (margin-end) instead of `ml-*` and `mr-*` - ✅ Use `ps-*` (padding-start) and `pe-*` (padding-end) instead of `pl-*` and `pr-*` - ✅ Use `start-*` and `end-*` for positioning instead of `left-*` and `right-*` **Example:** ```vue
``` ### Accessing Direction in Components You can access the current direction from the store: ```vue ``` ## How It Works 1. **Initial Load**: - Direction is set based on saved locale in localStorage - If no saved locale, defaults to 'en' (LTR) 2. **Language Change**: - User changes language via LanguageSwitcher - Locale is updated in i18n - Direction is automatically updated based on locale - `dir` attribute is applied to `` element 3. **Persistence**: - Direction is saved to localStorage - Persists across page reloads ## Testing To test RTL/LTR support: 1. **Switch to Arabic**: - Click language switcher - Select Arabic (العربية) - Verify `dir="rtl"` is set on `` - Verify UI elements flip correctly 2. **Switch to English**: - Click language switcher - Select English - Verify `dir="ltr"` is set on `` - Verify UI elements return to LTR layout 3. **Page Reload**: - Set language to Arabic - Reload page - Verify direction persists ## Notes - The `dir` attribute is applied to `document.documentElement` (the `` tag) - Tailwind's RTL plugin automatically handles most spacing and positioning - Custom CSS may need RTL-specific overrides using `[dir="rtl"]` selector - The DataTable and other components automatically respect the direction