Développement : Que signifie i18n ?

Qu’est-ce que l’i18n ?

i18n est l’abréviation d’internationalisation.

• i représente la première lettre du mot
• n représente la dernière lettre du mot
• 18 représente le nombre de caractères entre le i et le n

L’internationalisation d’une application regroupe un ensemble de procédés et de bonnes pratiques consistant à l’adapter à des langues et des cultures différentes. L’objectif est ainsi de la rendre utilisable dans différentes régions du monde, sans nécessiter de modifications majeures de son code source.

Pour cela, l’internationalisation implique de considérer plusieurs facteurs :

• Les langues et systèmes d’écritures
• La direction du texte (de gauche à droite pour les langues européennes, de droite à gauche pour l’arabe…)
• Les formats de date et heure
• Les unités de mesures (°C/°F, km/miles, cm/inches…)
• Les devises (euro, dollar, livre…)
• Les formats de numérotation
• Les disposition de clavier (azerty, qwerty…)
• L’adaptation des locutions (« J’ai un chat dans la gorge » n’a aucun sens si elle est traduite littéralement)
• Etc.

Nous pourrions même citer des paramètres très spécifiques comme la psychologie variable associée aux couleurs, le respect des lois et des périodes évènementielles étant propres aux localités, etc. (vacances, soldes, jour de l’an…).

Pourquoi l’i18n est-il important ?

Porter de l’attention à l’i18n dans un projet de développement s’avère bénéfique pour plusieurs raisons.

Accroître son audience

Adapter son application à des langues et cultures différentes permet d’atteindre une audience plus large en ôtant les barrières géographiques et culturelles potentielles à son utilisation.

Dans le cas d’un site web, les robots d’indexation des moteurs de recherche, témoins de cette adaptation multiculturelle, vont ainsi accroître la couverture SEO du site dans les résultats de recherche internationaux.

Une meilleure expérience utilisateur (UX)

Lorsque nous visitons un site web, son degré d’internationalisation est un véritable critère pour l’Expérience Utilisateur (UX).

Dans cet exemple, l’internationalisation des fiches produit me permet de consulter un site :

• Dans ma langue
• Dans ma devise (€)
• Dans le format de dates local (dd/mm/yyyy)

En prenant en compte les différences culturelle avec l’i18n, vous montrez de la considération pour vos utilisateurs et leur simplifiez l’usage de votre application.

Flexibilité & évolutivité

En mettant en place une architecture i18n dès le début du développement de votre application, vous économisez du temps et des efforts sur le long terme à mesure que votre application évolue.

Une application optimisée pour l’i18n facilite l’atteinte de nouveaux marchés, sans refonte majeure.

Mettre en œuvre l’i18n dans une application

C’est bien beau de parler d’i18n, mais concrètement, comment l’implémente-t-on ? 🤔

Externalisation des chaînes de texte

L’internationalisation d’une application consiste essentiellement à adapter son contenu textuel.

Il est en ce sens important d’éviter de coder en dur les chaînes de texte spécifiques à une langue dans le code source.

Au lieu de cela, il est recommandé d’utiliser des fichiers de ressources ou des bases de données pour stocker ce texte. Le fait d’isoler ces contenus de l’application en facilitera grandement leur traduction ultérieure.

Utilisation de bibliothèques et de frameworks i18n

De nombreux frameworks et bibliothèques de développement comme i18next offrent des fonctionnalités d’internationalisation prêtes à l’emploi.

Il s’agit en quelques sortes de « super plugins » de traduction.

Voici un exemple de configuration du framework i18next pour gérer plusieurs langues, en tenant compte de la pluralité des termes et des formats d’affichage.

import i18next from 'i18next';

i18next.init({
	lng: 'fr',
	resources: {
		fr: {
			translation: {
				"horse": {
					"one": "{{count}} cheval",
					"many": "{{count}} chevaux"
				},
				"common": {
					"price": "{{amount, currency(EUR)}}"
				}
			}
		},
		en: {
			translation: {
				"horse": {
					"one": "{{count}} horse",
					"many": "{{count}} horses"
				},
				"common": {
					"price": "{{amount, currency(USD)}}"
				}
			},
		}
	}
});

export default i18n;

Voici comment nous pourrions exploiter les traductions définies dans 📄 i18n.config.js :

import i18n from './path/to/i18n.config.js';

// La clé lng étant défini à "fr", les traductions sont en français
console.log(i18next.t('horse.one', { count: 1})); // Affiche "1 cheval"
console.log(i18next.t('horse.many', { count: 3})); // Affiche "3 chevaux"
console.log(i18next.t('common:price', { amount: 75})); // Affiche "75 €"

Tests de localisation

Enfin, assurez-vous de tester votre application dans différentes langues et régions pour vous assurer que toutes les fonctionnalités et les éléments d’interface utilisateur fonctionnent correctement et sont correctement traduits.

internationalisation VS localisation

Vous avez peut-être déjà entendu parler de localisation, abrégée l10n.

La localisation est en réalité une composante de l’internationalisation, se référant à l’adaptation spécifique d’une application à une langue ou une culture particulière.

Si l’internationalisation d’une application fait référence aux procédés mis en place pour faciliter son adaptabilité à des cultures différentes, des exemples de localisation pourraient être :

• La traduction d’un site dans une langue spécifique
• La prise en charge du paiement par téléphone mobile (très utilisé en Afrique) sur un site ecommerce
• Un code promo pour le nouvel an chinois
• Etc.

Là où l’i18n implique une considération globale des cultures, l’i10n concerne l’adaptation de l’application à un public précis.