What is RTL in web design?

RTL (right-to-left) design adapts a website for scripts read from right to left, such as Arabic and Hebrew. It means setting dir="rtl" on the page, mirroring the layout and directional icons, and keeping logos, numbers, media controls and photos unchanged.

Should I set RTL direction in CSS or HTML?

In HTML. The W3C advises adding dir="rtl" to the html element and never using CSS to set base direction, because direction is part of the content's meaning and must work even without the stylesheet.

Which icons should not be mirrored in RTL?

Logos, universal marks such as the checkmark, icons of real-world objects such as clocks, controls that point to an actual direction, and media playback controls. Arrows for navigation and progress should be mirrored.

Are numbers written right to left in Arabic?

No. The digits within a number keep the same order in Arabic and Hebrew text. Arabic may use Western or Eastern Arabic numerals depending on the country, but the order of digits never reverses.

Do CSS logical properties work in all modern browsers?

Yes, the core logical properties such as margin-inline-start, padding-inline-end and text-align: start are supported in all current major browsers. Check any newer or less common property on MDN before relying on it.

Conception Web RTL : 7 règles pour les sites Web arabes et hébreux

Résumez ce post avec : 10 minutes de lecture

Une bonne conception RTL (de droite à gauche) commence dans le balisage, pas dans la feuille de style : set dir="rtl" et la droite lang sur le <html> élément de pages arabes, hébraïques, persanes ou ourdou, construisez votre CSS avec des propriétés logiques telles que margin-inline-start ainsi, la mise en page se reflète d'elle-même, puis décide élément par élément ce qui doit basculer. Les flèches de navigation, de retour et de suivi, les barres de progression et les icônes d'alignement de texte se reflètent ; les logos, les coches, les horloges, les commandes de lecture multimédia, les photos et les chiffres à l'intérieur d'un nombre ne le font pas.

Principaux points à retenir

Mettre la direction en HTML (<html dir="rtl" lang="ar">), jamais seulement en CSS. Le W3C indique de ne pas utiliser CSS pour définir la direction de base.
Remplacer left et right dans votre CSS avec logique start et end propriétés. Une feuille de style sert ensuite dans les deux sens.
Reflétez tout ce qui montre l’ordre de lecture, la navigation ou la progression. Gardez les logos, les symboles universels, les objets du monde réel et les photos tels quels.
Les nombres conservent leur ordre numérique même dans le texte RTL. L'hébreu utilise des chiffres occidentaux ; l'arabe peut utiliser des chiffres arabes occidentaux ou orientaux.
Testez avec du texte traduit réel, y compris des chaînes mixtes arabes et anglaises, avant le lancement.

Ce que signifie la conception RTL

Les scripts de droite à gauche sont lus à partir du bord droit de la page. Le W3C répertorie l'adlam, l'arabe, l'hébreu, le n'ko, le syriaque et le thaana comme écritures de droite à gauche, utilisées pour écrire des langues telles que l'arabe, le dhivehi, l'hébreu, le pachtoune, le persan, le sindhi, l'ourdou et le yiddish (Internationalisation du W3C).

La conception RTL n'est pas “alignez tout à droite”. Les lecteurs de ces langues s'attendent à ce que toute l'interface suive leur direction de lecture : le logo et la navigation principale à droite, la barre latérale échangée, une flèche arrière qui pointe vers la droite. Ils s’attendent également à ce que certaines choses ne changent pas, comme un numéro de téléphone, un logo de marque ou le bouton de lecture d’une vidéo. Obtenir cette répartition correcte est ce qui sépare une page traduite d’une page localisée.

1. Définir la direction et la langue dans le HTML

La fondation est un attribut. La réponse rapide du W3C : “Si la direction globale du document est de droite à gauche, ajoutez dir="rtl" à la balise html” (W3C).

<!DOCTYPE html>
<html dir="rtl" lang="ar">
  <head>
    <meta charset="utf-8" />
  </head>
</html>

Selon le W3C, cet attribut unique aligne les paragraphes à droite, fait fonctionner les colonnes du tableau de droite à gauche, démarre la saisie du formulaire à droite, place correctement la ponctuation et, si votre feuille de style est bien écrite, permet au CSS de refléter la mise en page.

Trois règles issues du même guide :

N'utilisez pas CSS comme direction de base. La direction affecte le sens, elle appartient donc au balisage, où elle fonctionne toujours si le CSS ne parvient pas à se charger.
Déclarer lang séparément. lang="ar" n'implique pas dir="rtl", et vice versa. Définissez les deux.
Utiliser dir="auto" sur la saisie de l'utilisateur. Les champs de formulaire et le texte inséré de direction inconnue (un nom d'utilisateur, un commentaire) doivent détecter leur direction au moment de l'exécution.

Si vous marquez uniquement des blocs individuels comme RTL alors que la page reste LTR, vous lutterez partout contre l'alignement, la ponctuation et l'ordre des tableaux. Placez-le une fois en haut.

2. Écrire du CSS avec des propriétés logiques

La plupart des bugs RTL proviennent de CSS qui dit “gauche” ou “droite”. Une carte avec padding-left: 24px conserve son rembourrage à gauche en arabe, qui est maintenant le bord le plus éloigné.

Les propriétés logiques CSS décrivent plutôt la mise en page par rapport à la direction du texte (MDN). Le W3C les recommande exactement pour cette raison : utiliser start et end pour les marges, le remplissage et l'alignement “pour faciliter la gestion des changements de direction lors de la localisation”.

Physique (éviter)	Logique (utilisation)
`margin-left`	`margin-inline-start`
`padding-right`	`padding-inline-end`
`left: 0`	`inset-inline-start: 0`
`text-align: left`	`text-align: start`
`border-left`	`border-inline-start`
`float: left`	`float: inline-start`

Flexbox et grid suivent déjà la direction du document : une rangée d'éléments flexibles commence à droite dans une page RTL. C'est pourquoi une mise en page construite avec flex ou grille et espacement logique se reflète généralement correctement sans aucun CSS supplémentaire.

Choses que les propriétés logiques ne gèrent pas pour vous :

Transforme et positionne les décorations. transform: translateX(10px) se déplace à droite dans les deux sens.
Positions et dégradés d'arrière-plan définir avec left ou right.
Icônes dessinées sous forme de formes CSS ou de SVG simples qui pointent dans une direction (voir étape 4).

Pour ceux-ci, utilisez un sélecteur de direction :

[dir='rtl'] .chevron {
  transform: scaleX(-1);
}

3. Reflétez la mise en page, pas le contenu

Lorsque la page se retourne, ceux-ci se déplacent vers le côté opposé :

Logo et navigation principale (généralement en haut à droite).
Barres latérales et colonnes secondaires.
Fil d'Ariane, qui se lit désormais de droite à gauche avec des séparateurs pointant vers la gauche.
Étiquettes de formulaire, marqueurs requis et icônes de validation.
Colonnes du tableau, qui commencent par la droite.
Carrousels et pagination, qui avancent vers la gauche.

Ceux-ci restent tels quels :

Photos et illustrations. Les directives d'interface utilisateur d'Apple déconseillent de retourner des photographies et des œuvres d'art, car “retourner une image change souvent la signification de l'image” et peut créer des problèmes de droits d'auteur. Si le contenu d'une image dépend de la direction de lecture (par exemple une capture d'écran d'une interface), créez plutôt une version localisée (Apple HIG).
Lecteurs vidéo et audio. La lecture fait référence à la direction du média et non à la langue.
Barres de défilement. Le W3C note que la position de la barre de défilement fait partie du navigateur, contrôlée par l'utilisateur, et non par la page.

Lorsque les images apparaissent dans un ordre significatif, comme une chronologie ou une liste classée, inversez leur ordre plutôt que de retourner chaque image.

4. Décidez quelles icônes se retournent

Les directives d'Apple donnent les règles les plus claires et fonctionnent tout aussi bien pour les sites Web (Apple HIG):

Retourner :

Flèches Retour, Suivant et précédent, et tout ce qui permet de parcourir les éléments dans un ordre fixe. “Un bouton de retour doit pointer vers la droite” dans RTL.
Barres de progression et curseurs, qui doivent se remplir de droite à gauche. Inversez l’ordre de tous les nombres qui les entourent, mais ne retournez jamais les chiffres.
Icônes qui représentent du texte ou une direction de lecture, telles que l'alignement du texte ou les icônes de liste.
Icônes montrant un mouvement vers l'avant ou vers l'arrière.

Ne retournez pas :

Des logos, même ceux qui contiennent du texte. Apple prévient qu'un logo inversé “déroute les gens et peut avoir des répercussions juridiques”.
Marques universelles telles que la coche.
Objets du monde réel, comme une horloge, qui “fonctionnent de la même manière partout”.
Contrôles qui signifient une direction réelle, comme “aligner à droite”, qui doit toujours pointer vers la droite.

Une approche pratique : étiquetez chaque icône de votre système de conception comme mirror ou fixed une fois, et appliquez le flip avec une seule règle CSS pour le mirror ensemble.

5. Gérer les nombres, les dates et le texte mixte

Nombres. « Les chiffres d’un numéro spécifique, comme '541', un numéro de téléphone ou un numéro de carte de crédit, apparaissent toujours dans le même ordre », indique les directives d’Apple. L’hébreu utilise des chiffres arabes occidentaux (0-9). Le texte arabe peut utiliser des chiffres arabes occidentaux ou orientaux (٠-٩), et l’usage varie selon les pays et même les régions. Décidez par marché, et gardez le choix cohérent entre les prix, les dates et les formes.

Direction mixte. Les phrases arabes contiennent souvent des noms de produits, des URL ou du code anglais. L'algorithme bidirectionnel du navigateur place ces exécutions, mais la ponctuation à côté d'elles peut atterrir du mauvais côté. Enveloppez les fragments fournis par l'utilisateur ou dans une direction inconnue <bdi> ou donnez-les dir="auto", comme le suggère le W3C pour le texte inséré.

Titres. Si le titre d'une page RTL commence par des lettres latines (un acronyme, une marque), le W3C note que les navigateurs peuvent l'afficher dans le mauvais ordre dans les onglets et les signets. Ajout &rlm; (la marque invisible de droite à gauche) au début du titre le fixe.

6. Choisissez les polices et les tailles pour le script

Les lettres arabes se rejoignent et changent de forme en fonction de leur position dans le mot, et l'hébreu et l'arabe n'ont pas de majuscules. Deux conséquences pour le design :

Choisissez les polices conçues pour le script. Une police Web latine revient à une police système pour l'arabe, qui semble souvent incompatible. Chargez une police arabe ou hébraïque dédiée avec de bonnes indications sur les petites tailles.
Balances. Apple note que le texte arabe ou hébreu peut paraître trop petit à côté d'un texte latin en majuscules de la même taille, et qu'augmenter la taille de la police RTL d'environ 2 points l'équilibre souvent.
Ne mettez pas d'espace entre les lettres en arabe. Un suivi supplémentaire interrompt les jointures entre les lettres. Évitez également text-transform: uppercase sur les éléments susceptibles de contenir du texte RTL ; cela n'a aucun effet à ce niveau, donc toute conception qui s'appuie sur des majuscules pour mettre l'accent sur le texte nécessite un autre traitement.
Autoriser différentes hauteurs de ligne. Les écritures arabes utilisent plus d'espace vertical pour les points et les marques, alors testez la hauteur de la ligne et le texte coupé dans les boutons.

7. Testez avec du contenu réel et de vrais lecteurs

Les maquettes remplies de texte d'espace réservé latin masquent la plupart des problèmes RTL. Avant le lancement :

Charger du texte traduit réel dans chaque modèle, y compris les chaînes les plus longues, les messages d'erreur et les e-mails.
Tester des cordes mixtes: une phrase arabe avec un nom de marque anglais, une URL et un prix.
Vérifiez les formulaires de bout en bout: direction de frappe, alignement des espaces réservés, messages de validation, champs de téléphone et de carte (qui restent de gauche à droite).
Test sur mobile, où les gestes de balayage et les menus hors toile doivent s'ouvrir par la droite.
Demandez à un lecteur natif pour cliquer sur les trajets principaux. Ils repéreront une flèche inversée ou une virgule mal placée en quelques secondes.
Gardez les bases du référencement par langue: chaque version de langue RTL sur sa propre URL, avec hreflang la reliant aux autres langues. Voir notre aperçu du référencement multilingue.

Comment ConveyThis aide avec les langages RTL

ConveyThis traduit votre site en arabe, hébreu, persan, ourdou et le reste de ses 210 langues prises en charge, et sert chaque langue sur sa propre URL. Pour les langues de droite à gauche, vous pouvez activer un paramètre qui fait passer les pages traduites de droite à gauche, comme indiqué dans notre article d'aide sur changement de direction du texte. Lorsqu'elle est activée, la page traduite est définie sur dir="rtl" avec du texte aligné à droite, tandis que vos pages en langue originale sont laissées telles que vous les avez construites.

Ce que ce paramètre ne peut pas faire, c'est corriger une feuille de style pleine de left et right. Plus votre CSS est propre (étapes 2 à 4), meilleur est le fonctionnement du commutateur automatique. Pour le travail linguistique lui-même, vous pouvez affiner les traductions automatiques dans l'éditeur visuel, garder les termes de marque cohérents avec un glossaire et échanger des images par langue avec traduction d'images et de médias. Notre guide étape par étape pour traduire un site Web en arabe couvre le processus depuis le choix de la langue jusqu'au lancement, et le aperçu de la localisation explique comment ConveyThis gère les parties au-delà de la traduction.

Questions fréquemment posées

Qu'est-ce que RTL dans la conception Web ?

La conception RTL (de droite à gauche) adapte un site Web aux scripts lus de droite à gauche, tels que l'arabe et l'hébreu. Cela signifie définir dir=“rtl” sur la page, refléter la mise en page et les icônes directionnelles et conserver les logos, les numéros, les contrôles multimédias et les photos inchangés.

Dois-je définir la direction RTL en CSS ou HTML ?

En HTML. Le W3C conseille d'ajouter dir=“rtl” à l'élément html et de ne jamais utiliser CSS pour définir la direction de base, car la direction fait partie de la signification du contenu et doit fonctionner même sans la feuille de style.

Quelles icônes ne doivent pas être mises en miroir dans RTL ?

Logos, marques universelles telles que la coche, icônes d'objets du monde réel tels que des horloges, commandes indiquant une direction réelle et commandes de lecture multimédia. Les flèches pour la navigation et la progression doivent être en miroir.

Les chiffres sont-ils écrits de droite à gauche en arabe ?

Non. Les chiffres d’un nombre conservent le même ordre dans les textes arabes et hébreux. L'arabe peut utiliser des chiffres arabes occidentaux ou orientaux selon les pays, mais l'ordre des chiffres ne s'inverse jamais.

Les propriétés logiques CSS fonctionnent-elles dans tous les navigateurs modernes ?

Oui, les propriétés logiques de base telles que margin-inline-start, padding-inline-end et text-align: start sont prises en charge dans tous les principaux navigateurs actuels. Vérifiez toute propriété plus récente ou moins courante sur MDN avant de vous y fier.

Commencez par la traduction

Une mise en page RTL propre nécessite toujours un contenu arabe ou hébreu précis. Tu peux créer un compte ConveyThis, ajoutez une langue de droite à gauche et examinez le résultat sur vos propres pages.