Les défis d’un site bilingue français/arabe
Créer un site multilingue ne se limite pas à traduire le texte. L’arabe est une langue RTL (Right-to-Left) qui s’écrit de droite à gauche, ce qui impacte toute la mise en page : les menus passent à droite, les icônes s’inversent, les marges changent de côté. Ce tutoriel vous montre comment gérer le RTL proprement avec HTML et CSS, et comment structurer un site bilingue français/arabe.
Étape 1 : la base HTML avec l’attribut dir
<!-- Page en français (LTR par défaut) -->
<html lang="fr" dir="ltr">
<!-- Page en arabe (RTL) -->
<html lang="ar" dir="rtl">L’attribut dir="rtl" inverse automatiquement :
- L’alignement du texte (de gauche à droite → droite à gauche)
- L’ordre des éléments en Flexbox et Grid
- Les propriétés CSS
margin-inline-start,padding-inline-end, etc.
Étape 2 : CSS avec les propriétés logiques
Les propriétés CSS « logiques » s’adaptent automatiquement au sens de lecture. Utilisez-les à la place des propriétés physiques :
/* ❌ ANCIEN — Ne s'adapte PAS au RTL */
.card {
margin-left: 20px;
padding-right: 16px;
text-align: left;
border-left: 3px solid blue;
}
/* ✅ NOUVEAU — S'adapte automatiquement au RTL */
.card {
margin-inline-start: 20px; /* gauche en LTR, droite en RTL */
padding-inline-end: 16px; /* droite en LTR, gauche en RTL */
text-align: start; /* gauche en LTR, droite en RTL */
border-inline-start: 3px solid blue;
}Table de correspondance
| Propriété physique | Propriété logique |
|---|---|
margin-left |
margin-inline-start |
margin-right |
margin-inline-end |
padding-left |
padding-inline-start |
padding-right |
padding-inline-end |
text-align: left |
text-align: start |
float: left |
float: inline-start |
left: 0 |
inset-inline-start: 0 |
width |
inline-size |
height |
block-size |
Étape 3 : Flexbox et Grid en RTL
Bonne nouvelle : Flexbox et Grid s’inversent automatiquement avec dir="rtl".
/* Ce CSS fonctionne dans les deux sens sans modification */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* En LTR : logo à gauche, liens à droite */
/* En RTL : logo à droite, liens à gauche */
/* AUTOMATIQUE — rien à changer */Étape 4 : Inverser les icônes directionnelles
Les icônes qui indiquent une direction doivent être inversées en RTL :
/* Inverser les flèches et icônes directionnelles */
[dir="rtl"] .icon-arrow,
[dir="rtl"] .icon-chevron,
[dir="rtl"] .icon-back {
transform: scaleX(-1);
}
/* NE PAS inverser : les icônes non-directionnelles */
/* ✓ Horloge, téléphone, email, recherche → restent identiques */
/* ✕ Flèche retour, chevron suivant, progress bar → à inverser */Étape 5 : le switch de langue
<nav class="lang-switch">
<a href="/fr/" class="active">Français</a>
<a href="/ar/">العربية</a>
</nav>.lang-switch {
display: flex;
gap: 8px;
}
.lang-switch a {
padding: 6px 16px;
border: 1px solid #ddd;
border-radius: 20px;
text-decoration: none;
color: #333;
}
.lang-switch a.active {
background: #4a90d9;
color: white;
border-color: #4a90d9;
}Étape 6 : les polices pour l’arabe
/* Police système pour l'arabe */
[dir="rtl"] body {
font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
line-height: 1.8; /* L'arabe nécessite plus d'interligne */
}
/* Google Fonts pour l'arabe */
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&display=swap" rel="stylesheet">Polices arabes recommandées : Noto Sans Arabic (Google, gratuite), Cairo, Tajawal, IBM Plex Sans Arabic.
Approche JavaScript pour le switch dynamique
function setLanguage(lang) {
const html = document.documentElement;
if (lang === 'ar') {
html.setAttribute('dir', 'rtl');
html.setAttribute('lang', 'ar');
} else {
html.setAttribute('dir', 'ltr');
html.setAttribute('lang', 'fr');
}
// Sauvegarder la préférence
localStorage.setItem('lang', lang);
}
// Au chargement, restaurer la langue
const savedLang = localStorage.getItem('lang') || 'fr';
setLanguage(savedLang);Exercice
- Créez une page avec un header, une section hero et 3 cartes de services
- Utilisez uniquement des propriétés CSS logiques
- Ajoutez un bouton de switch FR/AR qui change
diretlang - Vérifiez que la mise en page s’inverse correctement
- Ajoutez les polices Google Fonts appropriées pour chaque langue
