22 mars 2023

Internationaliser des sites et applications web avec Intl

Comprendre l’utilisation du standard web Intl et comment l’implémenter correctement.

Cet article est le premier d’une série d’articles sur les standards du web et les API des navigateurs web modernes.

Internationaliser son site ou application est indispensable, incontournable. En effet, les utilisateurs viennent des quatre coins du Monde et il est primordial d’adapter son contenu à chacun d’entre eux. Prendre en compte l’internationalisation, ici avec Intl, permet de s’appuyer sur un standard solids et performant.

Rappel : L’internationalisation (souvent abrégé i18n) et la localisation (l10n) permettent d’adapter une application à différentes langues, en prenant en compte les particularités régionales. Cela comprend la traduction, le formatage et la présentation de contenu dans la langue souhaitée, tout en respectant les usages d’un pays ou d’une région du globe.

Le standard web Intl est un ensemble de normes techniques qui permettent d’améliorer l’expérience utilisateur pour les visiteurs internationaux de votre site web. Ces normes couvrent plusieurs domaines tels que les formats de date et heures, des nombres, des valeurs monétaire et la gestion des diverses formes de pluriels, pour n’en citer que quelques-uns.

Grâce à Intl, l’internationalisation n’est plus un enjeu UX sous estimé

La prise en compte des subtilités locales et grammaticales de la langue des utilisateurs est primordiale pour offrir une expérience utilisateur de qualité. Et pourtant, bien souvent dans les applications web et mobiles, de nombreux détails sont oubliés et peu souvent finement adaptés ou traduits.

L’application perd alors une immense partie de sa cible internationale car les mauvaises pratiques d’internationalisation lui font perdre son charme, sa crédibilité, voire la rendent inutilisable.

Ce sujet, central dans la qualité de l’ UX, est souvent orphelin car il est complexe. De nombreux outils permettent de traduire les contenus mais ils nécessitent un vrai savoir-faire des designers, développeurs et traducteurs. Ainsi, le choix technique de s’appuyer sur une techno ou une autre est lourd de conséquences et difficile à changer par la suite.

Une bonne internationalisation représente un véritable levier de croissance et les avantages sont nombreux : une plus grande confiance de vos utilisateurs, une meilleur compréhension des informations affichées, etc.

Un standard Intl dédié à l’internationalisation, ça existe !

L’utilisation du standard web Intl va aider votre site web à être plus accessible et compréhensible par les visiteurs étrangers. Ca influera directement sur l’augmentation du trafic et sa conversion. Cependant, la mise en oeuvre de ces normes est essentielle : il faut être très vigilant pour éviter à tout prix les erreurs courantes comme une traduction incorrecte ou une confusion des formats de date et d’heure, par exemple.

Ces standards sont aujourd’hui largement disponibles dans les navigateurs modernes, en particulier l’API Intl qui propose de nombreuses opérations utiles dans le traitement des nombres, des dates et du texte en général.

Regardons d’un peu plus près, les utilitaires proposés par l’API Intl permettant de rendre votre site ou application web plus accessible et compréhensible pour tous :

NumberFormat

Comme son nom l’indique, cet utilitaire permet de formater de multiples représentations des nombres, avec de multiples options. En particulier, les formes :

  • Décimales
    new Intl.NumberFormat(‘en-US’, { maximumFractionDigits: 1 }).format(1000.456);
    // 1,000.5
  • Pourcentages
    new Intl.NumberFormat(‘en-US’, { style: ‘percent’ }).format(.35);
    // 35%
  • Unités
    new Intl.NumberFormat(‘en-US’, { style: ‘unit’, unit: ‘liter’ }).format(3500);
    // → 3,500 L
  • Monnaies
    new Intl.NumberFormat(‘en-US’, { style: ‘currency’, currency: ‘EUR’, currencyDisplay: ‘name’ }).format(20);
    // 20 euros

DateTimeFormat

Permet de formater les dates et heures en spécifiant une unité de temps et des options, dont le fuseau horaire. Parmi les unités et options d’affichage, on retrouve :

  • Heures
    new Intl.DateTimeFormat(‘en-US’ , { timeStyle: ‘short’, timeZone: ‘UTC’ }).format(new Date(‘Fri, 20 May 2022 08:08:53 GMT’));
    // 08:08 AM
  • Dates
    new Intl.DateTimeFormat(‘en-US’ , { dateStyle: ‘full’ }).format(new Date(1653034133761));
    // Friday, May 20, 2022
  • Périodes du jour
    new Intl.DateTimeFormat(‘en-US’, { hour: ‘numeric’, dayPeriod: ‘short’, timeZone: ‘UTC’ }).format(new Date(‘Fri, 20 May 2022 08:08:53 GMT’));
    // 8 in the morning
  • Avec fuseau horaire
    new Intl.DateTimeFormat(‘en-US’, { timeZone: ‘America/Los_Angeles’, timeZoneName: ‘longGeneric’ }).format(new Date(‘Fri, 20 May 2022 08:08:53 GMT’));
    // 5/19/2022, Pacific Time

RelativeTimeFormat

Formate le temps relatif au moment présent, au passé et au futur. Il propose des options de formats numériques, courts et longs et supporte de nombreuses unités de temps. Quelques exemples d’affichage de temps relatif :

  • Abrégé
    new Intl.RelativeTimeFormat(‘en-US’, { style: ‘short’ }).format(3, ‘minute’);
    // in 3 min.
  • Numérique
    new Intl.RelativeTimeFormat(‘en-US’).format(-1, ‘day’);
    // 1 day ago
  • Littérale
    new Intl.RelativeTimeFormat(‘en-US’, { numeric: ‘auto’ }).format(-1, ‘day’);
    // yesterday

ListFormat

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator(ouvre un nouvel onglet)

Permet de lister naturellement des éléments dans une phrase. Cet utilitaire supporte plusieurs types de listes :

  • Inclusive
    new Intl.ListFormat(‘en-US’, { style: ‘short’, type: ‘conjunction’ }).format([‘Motorcycle’, ‘Bus’, ‘Car’]);
    // Motorcycle, Bus, & Car
  • Exclusive
    new Intl.ListFormat(‘en-US’, { type: ‘disjunction’ }).format([‘Motorcycle’, ‘Bus’, ‘Car’]);
    // Motorcycle, Bus, or Car

L’API Intl propose aussi quelques utilitaires, aux usages moins connus et aux noms plus exotiques, mais tout aussi intéressants.

Collator

Permet la comparaison de caractères, utile pour la recherche de correspondances et le tri alphabétique. Il gère toutes les langues et tous les alphabets. Il est également configurable avec des options permettant de gérer les accents, la ponctuation et les nombres, voire même certains systèmes de tri plus exotiques.

Segmenter

Permet de lister les éléments d’un texte, utile pour découper un texte ou compter le nombre de phrases, mots ou caractères quelque soit la langue et l’alphabet.
Indispensable pour les langues qui n’utilisent pas d’espace entre les mots, comme le Japonais, le Chinois, le Thaï, etc.

Et pour les traductions avec Intl ?!

Vous l’aurez compris, le grand absent de cette liste d’utilitaires spécifiques est un système de traduction de texte plus global. Aujourd’hui, cette fonction est souvent assurée par le très populaire messageformat, implémenté pour de nombreux frameworks par FormatJS. Or là aussi, il y a du nouveau et des perspectives extrêmement intéressantes : le format déjà standardisé, s’améliore et se dirige vers une nouvelle version MF2. Il s’agit d’une évolution intelligente, avec une implémentation qui s’adapte aux anciennes versions pour une migration en douceur.

Et notons que messageformat est en cours de standardisation pour entrer officiellement dans Intl, ce qui laisse présager une adoption massive et des performances inégalées.

J’espère que cet article vous aura donné envie d’investir un peu plus dans la qualité de l’internationalisation de vos applications, en pariant sur l’API standard du web Intl, et surtout on ne le répète jamais assez mais n’oubliez pas que les détails font toute la différence !

Suggestions