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

---
// layouts/RTLLayout.astro
const { lang, dir = 'rtl' } = Astro.props;
---

<html lang={lang} dir={dir}>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body class="font-arabic">
    <slot />
  </body>
</html>

Tailwind Configuration

// tailwind.config.mjs
export default {
  theme: {
    extend: {
      fontFamily: {
        arabic: ['Noto Sans Arabic', 'system-ui', 'sans-serif'],
      },
    },
  },
  plugins: [require('@tailwindcss/text-direction')],
}

Language Switcher Component

---
// components/LanguageSwitcher.astro
const languages = [
  { code: 'en', dir: 'ltr', label: 'English' },
  { code: 'ar', dir: 'rtl', label: 'العربية' }
];
---

<div class="flex gap-4">
  {languages.map(lang => (
    <a 
      href={`/${lang.code}`}
      class="px-3 py-1 rounded hover:bg-gray-100"
      hreflang={lang.code}
    >
      {lang.label}
    </a>
  ))}
</div>

RTL-Aware Container

---
// components/RTLContainer.astro
---

<div class="flex [dir='rtl']:flex-row-reverse">
  <div class="me-4">Sidebar</div>
  <div>Main Content</div>
</div>

Key Considerations

Typography

Font selection supporting Arabic/Hebrew characters
Adjust line height and letter spacing
Number formatting and alignment

Layout

Mirrored layouts
Flex and Grid direction
Margin and padding symmetry

UI Elements

Icon direction
Navigation flow
Scroll direction
Form elements alignment

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

2.5 KiB Raw Blame History