Conception adaptée à chaque marché

Une fonctionnalité est prête pour le monde entier lorsqu'elle fonctionne dans toutes les langues et respecte les conventions de chaque lecteur sans modification du code. Cette page suit les recommandations de Microsoft. Liste de vérification d'internationalisation: chaque section explique les différences entre les marchés, comment écrire un code qui fonctionne correctement, et le Contrôle de Globalisation code qui indique la mauvaise pratique utilisée.

Tout se résume à une règle : laisser la locale du lecteur décider. L'API du navigateur Intl les API, le formateur de votre framework et les données sous-jacentes Culture connaît les conventions de chaque marché ; un code qui les hardcode pour un seul marché ne convient pas.

Texte et phrases#

Chaque texte lu par une personne doit figurer dans le catalogue source, sous une clé, et être affiché via la fonction de traduction du projet. Cela inclut les étiquettes, les titres, les boutons, les messages, les erreurs affichées aux utilisateurs, les champs de saisie, alt texte et étiquettes ARIA. Codes : hardcoded_text.

Une phrase correspond à un message. L'ordre des mots diffère selon les langues, donc une phrase assemblée à partir de parties ne peut pas être traduite. Transmettez les valeurs sous forme de champs de saisie et les compteurs sous forme de formes plurielles. Codes : concatenated_text.

// Not world-ready: English word order and English plurals
'You have ' + count + ' new ' + (count === 1 ? 'message' : 'messages');

// World-ready: one ICU message
t('inbox.new', { count });
// "inbox.new": "{count, plural, one {You have # new message} other {You have # new messages}}"

Les langues nécessitent différentes formes plurielles : l'anglais en utilise deux, l'arabe six, le japonais une seule. Écrivez le message source avec des formes plurielles ICU et le moteur ajoutera les formes requises pour chaque langue.

Nombres#

Les marchés écrivent le même nombre différemment : 1 234,5 aux États-Unis, 1.234,5 en Allemagne, 1 234,5 en Suède et en France, et avec d'autres chiffres dans certains marchés arabes. Formatez-le selon la locale du lecteur. Codes : locale_number.

new Intl.NumberFormat(locale).format(1234.5);
new Intl.NumberFormat(locale, { style: 'percent' }).format(0.25);

Lisez le nombre saisi par une personne avec la même locale, ou utilisez un champ de saisie numérique dont la valeur est normalisée par le navigateur. parseFloat('1,5') correspond à 1, et non à un et demi. Codes : locale_parsing.

Dates, heures et fuseaux horaires#

L'ordre des Date, les séparateurs, les noms des mois, le système de 12 ou 24 heures et le calendrier diffèrent tous. Formatez-les selon la locale du lecteur et jamais avec un modèle fixe comme MM/dd/yyyy. Codes : locale_date.

new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short', timeZone }).format(when);

• Stockez les instants en UTC, au format ISO 8601 avec un décalage, et formatez-les selon le fuseau horaire du lecteur. Calculez « aujourd'hui » et les limites de jour dans ce fuseau horaire, et non celui du serveur.
• Les semaines commencent un jour différent: le dimanche aux États-Unis, le lundi dans la plupart des pays européens, le samedi dans certaines régions du Moyen-Orient. Les week-ends diffèrent également. Prenez ces informations dans la locale (new Intl.Locale(locale).getWeekInfo() lorsque disponible, ou les données de locale de votre bibliothèque de dates), jamais une constante. Codes : calendar_names.
• Noms des jours de la semaine et des mois proviennent de la locale (Intl.DateTimeFormat(locale, { weekday: 'long' })), pas d'une liste intégrée au code. Codes : calendar_names.
• Calendriers. L'Arabie saoudite, Israël et le Japon utilisent le calendrier grégorien en parallèle des calendriers Umm al-Qura, hébraïque et japonais ; la Thaïlande et l'Iran utilisent par défaut les calendriers bouddhiste et persan. La culture indique quel calendrier est utilisé dans un marché.

Argent#

Formatez les montants avec la devise et la locale du lecteur, jamais avec un symbole à côté du nombre. Le même montant s'écrit $1,234.50, 1.234,50 $ ou US$1,234.50 selon le lecteur, et plusieurs marchés partagent le même symbole. Codes : hardcoded_currency.

new Intl.NumberFormat(locale, { style: 'currency', currency }).format(1234.5);

La devise est une décision commerciale, pas une question de formatage : changer la locale du lecteur ne doit pas convertir les prix. La culture enregistre la devise utilisée dans chaque marché.

Tri, comparaison et casse#

Chaque langue trie à sa manière : le suédois place å, ä et ö après z, l'allemand classe ä avec a, et le chinois trie par pinyin ou par traits. Triez le texte lu par les personnes selon la locale du lecteur. Codes : ordinal_sort.

names.sort(new Intl.Collator(locale).compare);

Le mappage de la casse dépend également de la langue : en turc, la majuscule de i est İ. Utilisez toLocaleUpperCase(locale) pour le texte lu par les personnes. Codes : case_mapping.

Listes#

« Anna, Ben et Chen » s'écrit différemment dans chaque langue. Assemblez les listes selon la locale. Codes : joined_list.

new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' }).format(names);

Noms, adresses, codes postaux et numéros de téléphone#

• Noms. De nombreux marchés écrivent le nom de famille en premier, et beaucoup de personnes n'ont qu'un seul nom ou plus de deux. Saisissez le nom d'une personne dans un seul champ sauf si un marché nécessite de le diviser en parties. Acceptez tous les systèmes d'écriture : Åsa, José, 王 et Мария sont tous des noms. Codes : latin_only_input.
• Adresses. Les champs, leur ordre et leurs appellations diffèrent : un État et un code postal aux États-Unis, une préfecture au Japon, aucun code postal dans certains marchés. La culture indique comment l'adresse d'un marché est rédigée par la poste. N'exigez pas de champs non utilisés dans un marché.
• Codes postaux. Conservez-les sous forme de texte et validez-les par pays, ou pas du tout. Un motif à cinq chiffres exclut la plupart des pays du monde. Codes : postal_code_format.
• Numéros de téléphone. Stockez-les au format E.164 (+46 8 123 456 78), formatez-les et validez-les avec une bibliothèque connaissant le plan de numérotation de chaque pays, comme libphonenumber. Un motif comme (555) 555-1234 refuse tout nombre en dehors de l'Amérique du Nord. Codes : phone_number_format.

Unités et papier#

La plupart du monde utilise les kilomètres, les kilogrammes et les degrés Celsius ; les États-Unis emploient les miles, les livres et les degrés Fahrenheit ; le Royaume-Uni combine les deux. Prenez l'unité selon la région du lecteur et formatez-la selon la globalisation. Codes : fixed_unit.

new Intl.NumberFormat(locale, { style: 'unit', unit: 'kilometer' }).format(12);

La sortie imprimée et PDF suit le format du papier du marché : le format Letter en Amérique du Nord, le format A4 presque partout ailleurs. Codes : paper_size.

Méthodes de saisie et polices de caractères#

Le chinois, le japonais et le coréen s'écrivent via un éditeur de méthode de saisie : on appuie sur Entrée pour choisir un mot, pas pour valider. Un gestionnaire qui soumet à l'appui sur Entrée doit l'ignorer tant qu'un mot est en cours de composition. Codes : ime_composition.

onKeyDown={event => {
  if (event.key === 'Enter' && !event.nativeEvent.isComposing) submit();
}}

Choisissez des polices couvrant tous les alphabets que vous diffusez, ou faites appel aux polices système qui le font ; l'arabe, le chinois, l'hébreu, le japonais, le coréen et le thaï nécessitent chacun leur propre police. Laissez suffisamment d'espace dans la hauteur de ligne pour les alphabets ayant des caractères hauts, n'utilisez pas d'italique (le chinois et le japonais n'en possèdent pas), et ne placez jamais de texte dans des images, car celles-ci ne peuvent pas être traduites.

Écriture de droite à gauche#

L'arabe et l'hébreu s'écrivent de droite à gauche, et toute la mise en page s'inverse en conséquence : navigation, alignement, icônes indiquant une direction, et ordre des colonnes.

• Définissez dir="rtl" sur l'élément racine pour ces langues, et lang pour chaque langue.
• Utilisez des propriétés logiques : margin-inline-start à la place de margin-left, padding-inline-end, inset-inline-start, text-align: start, float: inline-start, ainsi que les classes utilitaires logiques de votre framework CSS (ms-4, pe-2, text-start). Codes : physical_direction, unmirrored_layout.
• Inversez les icônes indiquant une direction, comme les flèches et les chevrons, mais pas les autres, comme une horloge ou un bouton de lecture.
• Les nombres, le code, les URL et les noms en alphabet latin restent de gauche à droite au sein d'un texte écrit de droite à gauche. Isolatez le texte provenant de personnes ou de données en <bdi> afin d'éviter qu'il ne réorganise son environnement.

Marge pour l'expansion#

Les traductions sont souvent plus longues qu'en anglais, et les étiquettes courtes augmentent le plus : un « OK » allemand peut devenir un mot entier, et une étiquette de dix caractères peut doubler de taille. Laissez de la marge au texte : autorisez le retour à la ligne, laissez les boutons et les onglets s'agrandir avec leurs étiquettes, et évitez les largeurs et hauteurs fixes pour le texte. Ne tronquez pas les étiquettes dont les utilisateurs ont besoin pour agir. Codes : clipped_text.

Le pseudo-traduction allonge chaque chaîne de ces montants, afin que vous puissiez voir le problème avant même qu'un traducteur n'intervienne :

Le chinois, le japonais et le coréen sont généralement plus courts mais nécessitent des lignes plus hautes.

Une liste de contrôle pour chaque modification.#

• Le texte que les utilisateurs lisent provient du catalogue, et chaque phrase constitue un message.
• Les nombres, les dates, les heures, l'argent, les unités et les listes sont adaptés à la localisation du lecteur.
• Le tri et le mappage des majuscules/minuscules suivent la localisation du lecteur.
• Les noms, adresses, codes postaux et numéros de téléphone sont compatibles avec tous les marchés.
• La touche Entrée ne soumet pas de données tant qu'un mot est en cours de composition.
• La mise en page utilise des propriétés logiques et prévoit suffisamment d'espace pour les textes plus longs.

Lié#

• Le contrôle de la Globalisation
• La pseudo-Localisation
• Préparation au marché mondial et à la culture
• Globalisation