# How GeoLibre Implements Internationalization with react-i18next and RTL Support
> Discover GeoLibre's internationalization strategy using react-i18next. Learn how it automatically detects RTL languages and adapts layouts with Tailwind logical utilities.
- Repository: [Open Geospatial Solutions/GeoLibre](https://github.com/opengeos/GeoLibre)
- Tags: how-to-guide
- Published: 2026-08-03
---
**GeoLibre uses react-i18next for full-stack internationalization, automatically detecting right-to-left languages and applying `dir="rtl"` to the HTML root, with Tailwind logical utilities ensuring layouts adapt seamlessly.**
The open-source GeoLibre desktop application delivers a multilingual, RTL-ready user interface built on a robust **react-i18next** foundation. This article examines the complete implementation—from bootstrap configuration to dynamic language switching and bidirectional layout support—based on the actual source code in the `opengeos/GeoLibre` repository.
## i18n Bootstrap Configuration
The internationalization engine initializes in [`apps/geolibre-desktop/src/i18n/index.ts`](https://github.com/opengeos/GeoLibre/blob/main/apps/geolibre-desktop/src/i18n/index.ts). This file creates an **i18next** instance, loads locale resources, and wires up React integration.
```typescript
// apps/geolibre-desktop/src/i18n/index.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en.json';
import fr from './locales/fr.json';
import ar from './locales/ar.json';
// …additional imports
i18n
.use(initReactI18next)
.init({
resources: { en, fr, ar, /* … */ },
fallbackLng: 'en',
supportedLngs: ['en', 'fr', 'ar', /* … */],
interpolation: { escapeValue: false },
});
```
Key configuration options include:
- **`fallbackLng: 'en'`** — English serves as the default when a translation key is missing
- **`supportedLngs`** — Explicit whitelist of available locales derived from the `locales/` folder
- **`interpolation.escapeValue: false`** — Disabled because React's JSX already handles escaping
- **`initReactI18next`** — Plugin enabling the `useTranslation()` hook throughout component trees
## TypeScript Type Safety
GeoLibre augments i18next's default types via [`i18next.d.ts`](https://github.com/opengeos/GeoLibre/blob/main/i18next.d.ts) in the same directory. This declaration file ensures autocompletion and compile-time validation for translation keys across the codebase.
- File: [`apps/geolibre-desktop/src/i18n/i18next.d.ts`](https://github.com/opengeos/GeoLibre/blob/main/apps/geolibre-desktop/src/i18n/i18next.d.ts)
The augmentation maps the JSON structure of locale files directly into TypeScript definitions, eliminating string-typo errors when calling `t('settings.title')` or similar keys.
## Component Integration with useTranslation
Components consume translations through the standard **react-i18next** hook. The following pattern appears throughout GeoLibre's UI layer:
```tsx
// apps/geolibre-desktop/src/components/layout/SettingsDialog.tsx
import { useTranslation } from 'react-i18next';
export function SettingsDialog() {
const { t } = useTranslation();
return
{t('settings.title')}
;
}
```
The [`en.json`](https://github.com/opengeos/GeoLibre/blob/main/en.json) file acts as the **canonical catalogue**—all translation keys are defined there first, with other locales providing equivalent mappings.
## Right-to-Left (RTL) Language Support
GeoLibre's **RTL support** operates through two coordinated mechanisms: runtime direction detection and logical CSS utilities.
### HTML Direction Attribute
After resolving the active language, the bootstrap code sets the `dir` attribute on `document.documentElement`:
```typescript
const htmlEl = document.documentElement;
htmlEl.setAttribute('dir', i18n.dir(i18n.language));
```
The **`i18n.dir()`** method returns `'rtl'` for languages listed in i18next's internal `rtlLanguages` array (including Arabic `ar`, Hebrew `he`, Persian `fa`, and others). This single attribute change triggers the browser's bidirectional text algorithm and enables CSS logical properties.
### Dynamic Language Switching with Direction Update
When users select a new language, the application recomputes directionality:
```tsx
import { useTranslation } from 'react-i18next';
export function LanguageSelector() {
const { i18n } = useTranslation();
const change = (e: React.ChangeEvent) => {
const lng = e.target.value;
i18n.changeLanguage(lng).then(() => {
document.documentElement.setAttribute('dir', i18n.dir(lng));
});
};
return (
);
}
```
The `changeLanguage()` call updates the translation catalogue and triggers component re-renders; the subsequent `setAttribute` ensures the layout mirrors correctly for RTL languages.
### Tailwind Logical Utilities
GeoLibre styles its UI with **Tailwind CSS logical properties** rather than physical directional classes. This approach makes spacing and alignment automatically adapt when `dir` changes.
| Logical Utility | Physical Equivalent (LTR) | Physical Equivalent (RTL) |
|---------------|-------------------------|-------------------------|
| `ms-4` | `ml-4` (margin-left) | `mr-4` (margin-right) |
| `me-2` | `mr-2` (margin-right) | `ml-2` (margin-left) |
| `ps-4` | `pl-4` (padding-left) | `pr-4` (padding-right) |
| `pe-2` | `pr-2` (padding-right) | `pl-2` (padding-left) |
| `text-start` | `text-left` | `text-right` |
| `text-end` | `text-right` | `text-left` |
Example usage in components:
```tsx