Introduzione

Uno degli errori più comuni che riscontro nell'internazionalizzazione è la tendenza a suddividere semplici espressioni ternarie in più chiamate di traduzione. Spesso si presenta più o meno così:

const gt = useGT()

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

Per la maggior parte, questo funziona come previsto. Prima di implementare l'i18n, il codice probabilmente era qualcosa del tipo { enabled ? 'On' : 'Off' }. Aggiungere la funzione gt() per l'i18n è stato probabilmente solo un'estensione naturale della struttura del codice esistente.

Ogni volta che lo vedo, mi viene fisicamente un po' da rabbrividire. Non è affatto il modo in cui la libreria è stata progettata per essere usata. Ci sono due ragioni per cui questo è un errore, soprattutto nel contesto della traduzione automatica: (1) Contesto e (2) Flessibilità.

Contesto

Il significato non è racchiuso solo nelle parole, ma anche nel modo in cui vengono presentate. La parola "back", se compare su una freccia per tornare indietro, probabilmente significa qualcosa di molto diverso dalla parola "back" nel CV di un chiropratico. Inoltre, senza un contesto più ampio, i traduttori (anche quelli umani) potrebbero avere difficoltà a tradurre correttamente la parola. C'è una famosa storia del reparto i18n di WhatsApp che ha tradotto la parola "crop" in uno strumento di modifica delle immagini come "crop" nel senso agricolo in tedesco.

Per ovviare a questo problema di contesto, possiamo passare informazioni su come viene presentato il contenuto con i componenti <T> e <Branch>. Nel nostro esempio, questo darebbe al nostro "traduttore" un quadro più chiaro del significato di "on" e "off".

<T>
  <span>Dark Mode:</span>
  <Button>
    <Branch branch={enabled.toString()} true="On" false="Off" />
  </Button>
</T>

Flessibilità

Oltre al contesto, un altro modo molto utile per sfruttare la traduzione con gli LLM è la loro comprensione del codice. Vediamo un esempio in cui l'ordine dei componenti può cambiare a seconda della lingua:

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

Quindi abbiamo due possibili frasi:

• "Pranzo a casa"
• "Pranzo al lavoro"

In mandarino avremmo:

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

Il componente <T> riconosce che qui l'ordine della frase deve cambiare e riorganizza di conseguenza i suoi elementi figli, cosa che non è facile ottenere usando operatori ternari per tradurre stringhe.

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

Conclusione

Se c'è una cosa da ricordare di questo articolo, è che dovresti sempre cercare modi per sfruttare il contesto e la flessibilità nel tuo codice. Usare il componente <Branch /> è probabilmente uno dei modi più semplici per riuscirci.

Per maggiori dettagli, consulta la documentazione del componente <Branch />.