# RTL Support in Astro
## Brief
Right-to-left (RTL) language support requires careful consideration of layout, typography, and user interface elements to provide a natural experience for users of Arabic, Hebrew, Persian, and other RTL languages.
## Core Implementation
### Base Layout Configuration
```astro
---
// layouts/RTLLayout.astro
const { lang, dir = 'rtl' } = Astro.props;
---
```
### Tailwind Configuration
```javascript
// tailwind.config.mjs
export default {
theme: {
extend: {
fontFamily: {
arabic: ['Noto Sans Arabic', 'system-ui', 'sans-serif'],
},
},
},
plugins: [require('@tailwindcss/text-direction')],
}
```
### Language Switcher Component
```astro
---
// components/LanguageSwitcher.astro
const languages = [
{ code: 'en', dir: 'ltr', label: 'English' },
{ code: 'ar', dir: 'rtl', label: 'العربية' }
];
---
```
### RTL-Aware Container
```astro
---
// components/RTLContainer.astro
---
```
## Key Considerations
1. Typography
- Font selection supporting Arabic/Hebrew characters
- Adjust line height and letter spacing
- Number formatting and alignment
2. Layout
- Mirrored layouts
- Flex and Grid direction
- Margin and padding symmetry
3. UI Elements
- Icon direction
- Navigation flow
- Scroll direction
- Form elements alignment
4. Content
- Date formats
- Currency display
- Lists ordering
- Quote marks
## Recommended Libraries
- `@formatjs/intl`: Internationalization utilities
- `react-aria`: Accessibility and RTL-aware components
- `@tailwindcss/text-direction`: RTL utilities for Tailwind
## References
- [W3C - Structural markup and right-to-left text](https://www.w3.org/International/questions/qa-html-dir)
- [MDN - RTL](https://developer.mozilla.org/en-US/docs/Glossary/rtl)
- [Tailwind CSS RTL](https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support)
- [Google Material Design - RTL Guidelines](https://m2.material.io/design/usability/bidirectionality.html)