Internationalisation (i18n) pour les applications web

Internationalisation : faire parler votre site web en plusieurs langues

L'internationalisation (i18n) est la pratique qui consiste à concevoir votre site web pour qu'il puisse être adapté à différentes langues et régions. Un site web bien internationalisé peut être traduit dans de nouvelles langues sans réécrire le code, et il gère correctement les formats de date, les devises et la direction du texte pour chaque locale.

Séparer le texte du code

Le principe fondamental de l'internationalisation est de ne jamais coder en dur le texte. Au lieu d'écrire 'Bienvenue' directement dans votre modèle, vous utilisez une fonction comme t('bienvenue') qui recherche la traduction pour la langue courante. Les traductions sont stockées dans des fichiers séparés, un par langue, donc ajouter une nouvelle langue signifie simplement ajouter un nouveau fichier de traduction.

Les fichiers de traduction sont généralement des objets JSON avec des clés pour chaque chaîne. Le fichier anglais pourrait avoir 'bienvenue': 'Welcome', et le fichier italien aurait 'bienvenue': 'Benvenuto'. Cette séparation signifie que les traducteurs peuvent travailler sur les fichiers de traduction sans toucher au code.

Gérer les pluriels et les variables

Le simple remplacement de texte ne suffit pas. Différentes langues ont des règles de pluriel différentes. L'anglais a deux formes (un, autre), mais l'arabe en a six, et le japonais en a essentiellement une. Une bonne bibliothèque i18n gère cela automatiquement — vous spécifiez la traduction pour chaque forme plurielle, et la bibliothèque choisit la bonne en fonction du nombre.

Les variables dans les traductions sont également gérées différemment selon les langues. En anglais, vous pourriez dire 'Hello, {name}' — la variable apparaît à une position spécifique. Dans d'autres langues, l'ordre des mots peut être différent. Une bonne bibliothèque gère cela en permettant des espaces réservés nommés et en laissant les traducteurs les réorganiser si nécessaire.

Dates, nombres et devises

Différentes régions formatent les dates, les nombres et les devises différemment. Les Américains écrivent 04/01/2024 (1er avril), les Européens écrivent 01/04/2024, et les Japonais écrivent 2024/04/01. Les nombres utilisent des séparateurs différents : 1 234,56 aux États-Unis contre 1.234,56 dans une grande partie de l'Europe. Les devises ont des symboles différents et des règles de placement différentes.

L'API Intl intégrée aux navigateurs modernes gère tout cela. Intl.DateTimeFormat, Intl.NumberFormat et Intl.RelativeTimeFormat formatent correctement les dates, les nombres et les temps relatifs pour la locale de l'utilisateur. Vous n'avez pas besoin d'une bibliothèque pour cela — le navigateur s'en charge.

Direction du texte et mise en page

Toutes les langues ne se lisent pas de gauche à droite. L'arabe, l'hébreu, le persan et l'ourdou s'écrivent de droite à gauche. Votre mise en page doit gérer cela — le texte doit s'écouler de droite à gauche, et l'interface utilisateur doit se refléter en conséquence. CSS dispose de propriétés logiques (margin-inline-start, padding-inline-end) qui s'adaptent automatiquement à la direction du texte, vous n'avez donc pas besoin de feuilles de style séparées pour la gauche à droite et la droite à gauche.

Bibliothèques i18n populaires

Pour les projets JavaScript, la bibliothèque la plus populaire est i18next. Elle est indépendante du framework mais dispose d'intégrations pour React, Vue et d'autres frameworks. Elle gère la pluralisation, l'interpolation, le formatage et plus encore. Pour React spécifiquement, react-intl et react-i18next sont des choix populaires. La clé est de choisir une bibliothèque et de l'intégrer tôt — rétrofitier i18n dans une application existante est beaucoup plus difficile que de la construire dès le départ.