Einführung

Einer der häufigsten Fehler, die ich bei der Internationalisierung sehe, ist die Tendenz, einfache ternäre Ausdrücke in mehrere Übersetzungsaufrufe zu zerlegen. Das sieht dann oft in etwa so aus:

const gt = useGT()

return (
  <>
    <span>
      <T> Dunkelmodus: </T>
    </span>
    <Button>{enabled ? gt('An') : gt('Aus')}</Button>
  </>
)

Größtenteils funktioniert das wie beabsichtigt. Vor der Implementierung von i18n sah der Code wahrscheinlich ungefähr so aus: { enabled ? 'On' : 'Off' }. Das Hinzufügen der gt()‑Funktion für i18n war vermutlich nur eine naheliegende Erweiterung der bestehenden Codestruktur.

Jedes Mal, wenn ich das sehe, krampft sich bei mir innerlich etwas zusammen. So war die Bibliothek überhaupt nicht gedacht. Es gibt zwei Gründe, warum das ein Fehler ist, insbesondere im Zusammenhang mit dem Einsatz von maschineller Übersetzung: (1) Kontext und (2) Flexibilität.

Kontext

Bedeutung steckt nicht nur in den Wörtern selbst, sondern auch darin, wie Wörter dargestellt werden. Das Wort „back“ bedeutet auf einem Zurück-Pfeil vermutlich etwas ganz anderes als das Wort „back“ im Lebenslauf eines Chiropraktikers. Außerdem kann es ohne größeren Kontext für Übersetzer (auch menschliche) schwierig sein, ein Wort korrekt zu übersetzen. Es gibt eine berühmte Geschichte über die i18n-Abteilung von WhatsApp, die das Wort „crop“ in einem Bildbearbeitungstool im Deutschen so übersetzte wie „crop“ im Sinne von Ackerbau.

Um dieses Kontextproblem zu umgehen, können wir mit den <T>- und <Branch>-Komponenten Informationen über die Darstellung von Inhalten übergeben. In unserem Beispiel würde dies unserem „Übersetzer“ ein besseres Gesamtbild davon vermitteln, was „on“ und „off“ bedeuten.

<T>
  <span>Dunkelmodus:</span>
  <Button>
    <Branch branch={enabled.toString()} true="An" false="Aus" />
  </Button>
</T>

Flexibilität

Neben dem Kontext gibt es eine weitere praktische Möglichkeit, LLM-Übersetzung zu nutzen: durch ihr Verständnis von Code. Schauen wir uns ein Beispiel an, bei dem sich die Reihenfolge von Komponenten je nach Sprache ändern kann:

<T>
  Ich esse <Branch branch={atHome.toString()} true="zu Hause" false="auf der Arbeit" /> zu Mittag.
</T>

Wir haben also zwei mögliche Sätze:

• "I eat lunch at home"
• "I eat lunch at work"

Auf Mandarin hätten wir:

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

Die <T>-Komponente erkennt, dass sich hier die Satzstellung ändern muss, und ordnet ihre Children entsprechend neu an – etwas, das mit ternären Operatoren in Verbindung mit String-Übersetzungen nicht leicht möglich ist.

<T>
  Ich esse
  <Branch branch={atHome.toString()} true="zu Hause" false="im Büro" /> zu Mittag.
</T>

Fazit

Wenn Sie aus diesem Artikel nur eine Sache mitnehmen, dann sollten Sie immer nach Möglichkeiten suchen, Kontext und Flexibilität in Ihrem Code zu nutzen. Die Verwendung der Komponente <Branch /> ist wahrscheinlich eine der einfachsten Möglichkeiten dafür.

Lesen Sie die Dokumentation zur <Branch />-Komponente für weitere Details.