Internationalisierung (i18n) für Webanwendungen

Internationalisierung: Ihre Website mehrsprachig machen

Internationalisierung (i18n) ist die Praxis, Ihre Website so zu gestalten, dass sie an verschiedene Sprachen und Regionen angepasst werden kann. Eine gut internationalisierte Website kann in neue Sprachen übersetzt werden, ohne Code umschreiben zu müssen, und behandelt Dinge wie Datumsformate, Währungen und Textrichtung für jedes Gebietsschema korrekt.

Text vom Code trennen

Das grundlegende Prinzip der Internationalisierung ist, Text niemals fest zu codieren. Anstatt 'Willkommen' direkt in Ihre Vorlage zu schreiben, verwenden Sie eine Funktion wie t('willkommen'), die die Übersetzung für die aktuelle Sprache nachschlägt. Die Übersetzungen werden in separaten Dateien gespeichert, eine pro Sprache, sodass das Hinzufügen einer neuen Sprache nur das Hinzufügen einer neuen Übersetzungsdatei bedeutet.

Übersetzungsdateien sind typischerweise JSON-Objekte mit Schlüsseln für jede Zeichenfolge. Die englische Datei könnte 'willkommen': 'Welcome' haben, und die italienische Datei hätte 'willkommen': 'Benvenuto'. Diese Trennung bedeutet, dass Übersetzer an den Übersetzungsdateien arbeiten können, ohne den Code zu berühren.

Umgang mit Pluralformen und Variablen

Einfaches Textersetzen reicht nicht aus. Verschiedene Sprachen haben unterschiedliche Pluralregeln. Englisch hat zwei Formen (eins, andere), aber Arabisch hat sechs, und Japanisch hat im Wesentlichen eine. Eine gute i18n-Bibliothek erledigt dies automatisch – Sie geben die Übersetzung für jede Pluralform an, und die Bibliothek wählt basierend auf der Anzahl die richtige aus.

Variablen in Übersetzungen werden ebenfalls von verschiedenen Sprachen unterschiedlich behandelt. Im Englischen könnten Sie 'Hallo, {name}' sagen – die Variable erscheint an einer bestimmten Position. In anderen Sprachen könnte die Wortstellung anders sein. Eine gute Bibliothek behandelt dies, indem sie benannte Platzhalter zulässt und Übersetzern erlaubt, sie bei Bedarf neu anzuordnen.

Daten, Zahlen und Währungen

Verschiedene Regionen formatieren Daten, Zahlen und Währungen unterschiedlich. Amerikaner schreiben 04/01/2024 (1. April), Europäer schreiben 01/04/2024 und Japaner schreiben 2024/04/01. Zahlen verwenden unterschiedliche Trennzeichen: 1.234,56 in den USA gegenüber 1.234,56 in weiten Teilen Europas. Währungen haben unterschiedliche Symbole und unterschiedliche Platzierungsregeln.

Die in modernen Browsern integrierte Intl-API erledigt all dies. Intl.DateTimeFormat, Intl.NumberFormat und Intl.RelativeTimeFormat formatieren Daten, Zahlen und relative Zeiten korrekt für das Gebietsschema des Benutzers. Sie brauchen dafür keine Bibliothek – der Browser erledigt das.

Textrichtung und Layout

Nicht alle Sprachen werden von links nach rechts gelesen. Arabisch, Hebräisch, Persisch und Urdu werden von rechts nach links geschrieben. Ihr Layout muss dies berücksichtigen – der Text sollte von rechts nach links fließen, und die Benutzeroberfläche sollte sich entsprechend spiegeln. CSS hat logische Eigenschaften (margin-inline-start, padding-inline-end), die sich automatisch an die Textrichtung anpassen, sodass Sie keine separaten Stylesheets für links-nach-rechts und rechts-nach-links benötigen.

Beliebte i18n-Bibliotheken

Für JavaScript-Projekte ist die beliebteste Bibliothek i18next. Sie ist framework-unabhängig, hat aber Integrationen für React, Vue und andere Frameworks. Sie behandelt Pluralisierung, Interpolation, Formatierung und mehr. Für React sind react-intl und react-i18next beliebte Optionen. Der Schlüssel ist, eine Bibliothek auszuwählen und sie frühzeitig zu integrieren – i18n nachträglich in eine bestehende Anwendung einzubauen, ist viel schwieriger, als es von Anfang an zu integrieren.