i18n et l10n sont deux acronymes raccourcissant l'écriture de mots initialement anglais, possédant des équivalents français, en retenant leur première lettre (ici "i" ou "l"), leur dernière (ici "n"), et en précisant entre ces deux lettres le nombre de caractères manquants provenant du mot d'origine.
i18n = internationalisation
L10n = localisation
i18n signifie internationalisation et se rapporte aux processus de conception et de développement qui peuvent être adaptés pour différentes langues et cultures : le but est de prévoir le code et les ressources pour que le site web (ou l'application) soit adaptable à d'autres langues et cultures.
l10n ou L10n pour ne pas confondre le "L" minuscule avec un "I" majuscule, signifie localisation et se réfère aux processus d'adaptation spécifiques à une langue et une culture en tenant compte de la traduction du contenu, de l'adaptation des formats de date et d'heure, de la modification des images et des couleurs pour correspondre aux normes culturelles locales, etc.
Les deux pratiques font partie de la même démarche globale et il existe bon nombre de recommandations, dont des Conseils pratiques sur l’internationalisation du Web du W3C parmi lesquels on peut noter utilisez partout un encodage UTF-8
, qui peut sembler évident de nos jours.
Rappel sur la langue dans HTML
Du point de vue de HTML, pensez également à respecter la bonne pratique d'indiquer la langue du document grâce à l'attribut lang sur la balise <html> et à notifier tout changement de langue dans le contenu grâce à ce même attribut et un code ISO 639-1. Cela va affecter non seulement la prononciation d'une synthèse vocale mais aussi le fonctionnement des formulaires avec la correction orthographique.
<!doctype html>
<html lang="fr">
<body>
<h1>Cosmogonie</h1>
<p>Terry Pratchett avait écrit, dans <cite lang="en">Lords and Ladies</cite> :
<q lang="en">In the beginning there was nothing, which exploded.</q>
</p>
<p>Quant à Douglas Adams, l'un des passages célèbres dans
<cite>Le Dernier Restaurant avant la fin du monde</cite> reste toujours
<q lang="en">In the beginning, the universe was created.
This has made a lot of people very angry and has been widely regarded as a bad move.</q>
</p>
</body>
</html>
Localisation
La localisation pourrait se résumer, entre autres, par :
- La traduction de l'ensemble du contenu du site web (textes, images, boutons, sous-titres des vidéos, etc.) pour s'assurer que le public cible peut comprendre facilement le contenu.
- L'adaptation des formats de date, de temps, de devise et de mesure selon les normes en vigueur dans le pays. Y compris la présentation des calendriers, des semaines qui ne débutent pas le même jour, voire des week-ends et des périodes de vacances.
- L'utilisation de couleurs, symboles et d'images qui sont familières ou suffisamment significatives (nous dirons affordantes).
- L'ajout de fonctionnalités spécifiques pour les utilisateurs du pays, telles que la possibilité de choisir leur fuseau horaire (pour les pays qui recouvrent plusieurs fuseaux) ou leur langue préférée (pour les zones géographiques qui comptent plusieurs langues pratiquées).
- La prise en compte de contraintes matérielles, par exemple l'agencement des touches du clavier (suivez mon regard dépité si vous avez déjà été confronté à un jeu qui impose les touches W, A, S, D alors que ce n'est pas du tout adapté à la disposition AZERTY).
- La prise en compte des différences de législations dans le monde (par exemple mentions légales, conditions de vente, affichage des prix avec ou sans taxe, bannières cookies, etc).
On peut donc considérer qu'il s'agit d'une brique à part entière de l'expérience utilisateur (UX), et que cela va également faire partie de certaines stratégies de référencement du contenu (SEO).
Internationalisation
L'internationalisation peut se définir par une préparation au niveau technique de tout ce qui est nécessaire à une localisation.
- La séparation du contenu et du code, afin que le contenu puisse être facilement modifié et traduit sans avoir à modifier le code de l'application ou du site. En conservant une base de code commune, cela peut permettre une réduction des coûts et des délais de développement pour chaque nouvelle version ou adaptation régionale.
- L'utilisation de formats de date, d'heure, de devise et de mesure standardisés pour les rendre facilement adaptables au contexte, par des fonctions de mise en forme.
- L'utilisation de l'Unicode, de polices de caractères qui supportent différentes langues et scripts car certains ensemble de glyphes sont limités aux caractères latins.
- L'acceptation par les formulaires de formats d'adresses postales (champs différents selon les pays).
- L'acceptation par les formulaires d'une souplesse dans les numéros de téléphone à travers le monde (c'est bien pour cela que
<input type="tel">n'est pas doté d'une validation native). - La possibilité d'écrire de droite à gauche, commme de gauche à droite, avec l'attribut
diret les valeursrtl(right to left, de droite à gauche) etltr(left to right, de gauche à droite) soit par exemple<p lang="ar" dir="rtl">شكرا جزيلا</p>... et donc y faire également attention en CSS. Ce qu'on appelle le BiDi pour BiDirectionnel. - L'attention accordée à réserver la place pour des mots plus longs dans le design d'interface, parce que "DonaudampfschiffFahrtsgesellschaftskapitän" existe tout autant que "OK".
- Et enfin la possibilité de changer la langue d'une interface et de préserver cette préférence.
La prise en compte des caractéristiques de chaque région du monde peut aller jusqu'à l'adaptation à la qualité du réseau, de la bande passante ou de la part de marché des navigateurs. En poussant la perfection au maximum, on peut imaginer devoir s'adapter au format A4 et à la fois au format Letter des États-Unis pour l'élaboration d'une feuille de styles print.
Quelques modules pour l'internationalisation
Il existe plusieurs modules populaires en JavaScript bien pratiques.
Intl : Un object natif d'ECMAScript qui est bien supporté et fournit des fonctionnalités telles que le formattage de date avec DateTimeFormat, de temps relatif avec RelativeTimeFormat, de devises et de nombres avec NumberFormat et même de pluriels avec PluralRules.
Moment.js et date-fns : Des bibliothèques populaires pour la manipulation de dates/heures avec des capacités de calcul, de temps relatif, de formattage et de traduction dans de multiples langues grâce à l'apport de la communauté.
i18next : Une bibliothèque pour la gestion des chaînes de texte et des traductions, qui prend en charge les formats de date, de temps, de devise et de nombre, ainsi que des fonctionnalités avancées de gestion des traductions.
FormatJS : Une autre bibliothèque pour la gestion des chaînes de texte et des traductions, qui prend en charge les formats de date, de temps, de devise et de nombre, ainsi que la gestion des plurales et des règles de grammaire spécifiques à chaque langue.
Citons aussi Globalize.js et bien d'autres qui au fil du temps ont été rendues nécessaires par l'absence de fonctionnalités natives et pratiques.
Ce ne sont que des exemples relatifs à JavaScript, pour tout ce qui est CMS et langages back-end, la plupart des solutions embarquent des méthodes prêtes à l'emploi ou des extensions dédiées à cet usage, par exemple Polylang pour WordPress qui remplace désormais avantageusement WPML.
Nous avions déjà abordé le sujet avec :
- Traductions multilingues avec Timber
- Traduire vos extensions WordPress
- Préparer un thème WordPress pour l'internationalisation
Pour la traduction de chaînes de texte, de nombreuses applications existent de nos jours y compris pour centraliser et fédérer le travail de plusieurs personnes, mais n'oubliez pas que le travail d'un.e véritable traducteur.rice est irremplaçable notamment pour toutes les raisons et subtilités évoquées précédemment.
Commentaires
A noter un autre petit acronyme sympathique qui est lié à la L10N : P11N.
Non, ce n'est pas vulgaire et si vous avez vu ça c'est mal. C'est la PluralizatioN.
Un petit article sur les variétés de pluriels selon les langues : https://lingohub.com/blog/2019/02/pluralization