Introduction

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

const gt = useGT()

return (
  <>
    <span>
      <T> Dark Mode: </T>
    </span>
    <Button>{enabled ? gt('On') : gt('Off')}</Button>
  </>
)

Dans l’ensemble, cela fonctionne comme prévu. Avant d’implémenter l’i18n, le code ressemblait probablement à ceci : { enabled ? 'On' : 'Off' }. Ajouter la fonction gt() pour l’i18n n’était probablement qu’un prolongement naturel de la structure existante du code.

Chaque fois que je vois ça, je grimace presque physiquement. Ce n’est absolument pas ainsi que la bibliothèque a été conçue pour être utilisée. Il y a deux raisons pour lesquelles c’est une erreur, surtout dans le contexte de la traduction automatique : (1) le contexte et (2) la flexibilité.

Contexte

Le sens ne se trouve pas seulement dans les mots, mais aussi dans la manière dont ils sont présentés. Le mot "back", s’il figure sur une flèche de retour, veut probablement dire tout autre chose que le mot "back" sur le CV d’un chiropracteur. De plus, sans contexte plus large, les traducteurs, même humains, peuvent avoir du mal à traduire correctement ce mot. Il existe une histoire célèbre où l’équipe i18n de WhatsApp a traduit le mot "crop" dans un outil d’édition d’images comme s’il s’agissait de "crop" au sens agricole en allemand.

Pour contourner ce problème de contexte, nous pouvons transmettre des informations sur la manière dont le contenu est présenté avec les composants <T> et <Branch>. Dans notre exemple, cela donnerait à notre "traducteur" une vision plus claire de ce que signifient "on" et "off".

<T>
  <span>Dark Mode:</span>
  <Button>
    <Branch branch={enabled.toString()} true="On" false="Off" />
  </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 selon la langue :

<T>
  I eat lunch at <Branch branch={atHome.toString()} true="home" false="work" />.
</T>

Nous avons donc deux phrases possibles :

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

En mandarin, cela donnerait :

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

Le composant <T> reconnaît qu'ici, l'ordre de la phrase doit changer et réorganise son contenu en conséquence — ce qui n'est pas facile à faire avec des opérateurs ternaires pour traduire des chaînes.

<T>
  我在
  <Branch branch={atHome.toString()} true="家" false="公司" />
  吃午餐。
</T>

Conclusion

S'il ne fallait retenir qu'une chose de cet article, ce serait de toujours chercher des moyens de tirer parti du contexte et de la flexibilité dans votre code. L'utilisation du composant <Branch /> est probablement l'une des façons les plus simples d'y parvenir.

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