Frontend Internationalisation (I18N) meilleures pratiques

Quatre étapes sont nécessaires pour réaliser l'internationalisation de la fin frontale: premièrement, utiliser JSON structuré pour gérer le contenu de traduction de manière centralisée pour éviter le codage dur; Deuxièmement, utilisez des bibliothèques i18n matures telles que React-I18Next, Vue-I18N ou FormatJS pour prendre en charge les règles de langue complexes; Troisièmement, concevez à l'avance pour s'adapter à différentes longueurs de langage et mises en page RTL, réserver l'espace et utiliser des dispositions élastiques; Quatrièmement, ajoutez des annotations de traduction pour clarifier le contexte, faciliter la collaboration. Ces quatre points peuvent réduire les coûts de maintenance et améliorer la précision d'adaptation multilingue et l'efficacité de développement.

L'internationalisation frontale (I18N) n'est pas un nouveau sujet, mais il n'y a en fait pas beaucoup de projets qui sont vraiment réalisés. Le noyau réside dans: la planification précoce, la gestion unifiée et l'adaptation flexible . Si vous développez une application frontale pour les utilisateurs multilingues, ces pratiques peuvent vous aider à éviter de nombreux pièges.

Contenu de traduction structurée

De nombreuses personnes écrivent initialement le contenu de traduction dans le code, comme l'écriture <h1 id="欢迎">欢迎</h1> directement, mais plus tard, ils constatent qu'ils doivent modifier des dizaines de fichiers. L'approche correcte consiste à utiliser des fichiers JSON structurés pour stocker au centre du contenu traduit.

Par exemple:

 // en.json
{
  "Bienvenue": "Bienvenue",
  "bouton": {
    "Soumettre": "Soumettre"
  }
}

Cela facilite non seulement l'entretien, mais facilite également l'accès ultérieur aux outils de traduction automatisés ou permet aux traducteurs de collaborer dans l'édition. Vous pouvez également charger dynamiquement le fichier JSON correspondant en fonction du code linguistique pour éviter le chargement redondant.

Utilisez la bibliothèque i18n mature au lieu de faire vos propres roues

Bien que vous puissiez implémenter un remplacement de texte simple manuellement, la véritable internationalisation est plus que de changer de texte. Le format de date, le format numérique, la forme plurielle, les différences de genre, etc. doivent être pris en compte. Pour le moment, il est recommandé d'utiliser des bibliothèques matures, telles que:

• React Project: React-I18Next
• Projet Vue: Vue-I18n
• Solution générale: formatjs (formatjs.io, maintenant appelé @formatjs)

Les règles linguistiques qu'ils prennent en charge sont plus complètes et peuvent être profondément intégrées au cadre, comme détecter automatiquement le langage du navigateur, mettre à jour l'état des composants lors de la commutation des langues, etc.

Concevez l'interface utilisateur à l'avance pour s'adapter à différentes longueurs de langue

Court anglais, long allemand et arabe de droite à gauche ... ceux-ci affecteront la mise en page. Ces situations doivent être prises en compte pendant la phase de conception de l'interface utilisateur:

• Réserver l'espace par le caractère le plus long, tel que "Annuler" peut être "Zurücksetzen" en allemand
• Évitez les largeurs à code dur et essayez d'utiliser des dispositions élastiques
• Pour les langues RTL (de droite à gauche), comme l'arabe, la superposition de style peut être effectuée en CSS par dir="rtl" ou html[lang="ar"]

Il est recommandé d'ajouter des tests de «pseudo-langage» pendant le processus de développement, comme le remplacement de tous les anglais par faux mots signés (tels que [!!!Welcome!!!] ) pour voir si la disposition est mauvaise.

Laisser des commentaires de contexte au contenu de traduction

La traduction n'est pas un simple remplacement de texte, il doit parfois être combiné avec le contexte. Par exemple, "Home" peut être "à la maison" ou "à la maison", selon la scène. C'est donc une bonne habitude d'ajouter des commentaires au fichier de traduction:

 {
  "maison": {
    "Traduction": "Home",
    "Commentaire": "Utilisé à la barre de navigation, reportez-vous à la page d'accueil du site Web"
  }
}

Ceci est très amical pour le personnel non technique (comme les traducteurs) et peut également réduire les coûts de communication. Certains outils I18N prennent en charge l'exportation de fichiers Xliff annotés à utiliser par des équipes de traduction professionnelle.

Fondamentalement, c'est tout. L'internationalisation semble simple, mais cela doit vraiment être bien fait et il y a beaucoup de détails. Ce n'est qu'en planifiant les outils et le travail d'équipe à l'avance que vos produits peuvent être vraiment «mondiaux».

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!