Introduction

L’une des erreurs les plus courantes que je vois en internationalisation est la tendance à découper de simples expressions ternaires en plusieurs appels de traduction. Cela ressemble souvent à quelque chose comme ceci :

const gt = useGT()

return (
  <>
    <span>
      <T> Mode sombre : </T>
    </span>
    <Button>{enabled ? gt('Activé') : gt('Désactivé')}</Button>
  </>
)

Dans l’ensemble, cela fonctionne comme prévu. Avant de mettre en place l’i18n, le code ressemblait probablement à quelque chose comme { enabled ? 'On' : 'Off' }. Ajouter la fonction gt() pour l’i18n a sans doute simplement semblé être un prolongement naturel de la structure de code existante.

Chaque fois que je vois ça, j’ai un léger mouvement de recul. Ce n’est absolument pas comme ça que la bibliothèque a été conçue pour être utilisée. Il y a deux raisons pour lesquelles c’est une erreur, en particulier dans le contexte de l’utilisation de la traduction automatique : (1) le contexte et (2) la flexibilité.

Contexte

Le sens ne réside pas uniquement dans les mots eux‑mêmes, mais aussi dans la façon dont ils sont présentés. Le mot « back », s’il se trouve sur une flèche de retour, signifie probablement quelque chose de très différent du mot « back » sur le CV d’un chiropracteur. De plus, sans un contexte plus large, les traducteurs (même humains) peuvent avoir du mal à traduire correctement le mot. On raconte souvent que l’équipe i18n de WhatsApp a traduit le mot « crop » dans un éditeur d’images par « crop » au sens agricole en allemand.

Pour contourner ce problème de contexte, nous pouvons transmettre des informations sur la présentation du contenu avec les composants <T> et <Branch>. Dans notre exemple, cela donnerait à notre « traducteur » une vision plus large de ce que signifient « on » et « off ».

<T>
  <span>Mode sombre :</span>
  <Button>
    <Branch branch={enabled.toString()} true="Activé" false="Désactivé" />
  </Button>
</T>

Flexibilité

Au‑delà du contexte, une autre façon intéressante d’exploiter la traduction par LLM est de tirer parti de sa compréhension du code. Voyons un exemple où l’ordre des composants peut changer en fonction de la langue :

<T>
  Je déjeune à <Branch branch={atHome.toString()} true="la maison" false="au travail" />.
</T>

Nous avons donc deux phrases possibles :

• "Je déjeune à la maison"
• "Je déjeune au travail"

En mandarin, nous aurions :

• "我在家吃午餐"
• "我在公司吃午餐"

Le composant <T> reconnaît que l'ordre de la phrase doit changer ici et réorganise donc ses enfants en conséquence — ce qui n'est pas facilement possible lorsqu'on utilise des opérateurs ternaires avec des chaînes de traduction.

<T>
  Je déjeune
  <Branch branch={atHome.toString()} true="à la maison" false="au bureau" />
  .
</T>

Conclusion

S’il y a une chose à retenir de cet article, c’est que vous devriez toujours chercher des moyens d’exploiter le contexte et la flexibilité dans votre code. Utiliser le composant <Branch /> est sans doute l’un des moyens les plus simples d’y parvenir.

Consultez la documentation du composant <Branch /> pour plus de détails.