Mehrsprachige Schnittstellen und Lokalisierung

1) Grundsätze

1. Sprache ist keine Haut. Texte, Formate, Schreibrichtung, Illustrationen, Rechtsblöcke und sogar die Navigation ändern sich.
2. Erst die Schlüssel, dann die Texte. Strukturieren Sie Bedeutungsschlüssel und Parameter - Übersetzungen kommen später.
3. Pseudo-Lokalisierung - bis zur Ausgabe. Fangen Sie Überläufe, „hart genähte“ Linien und versteckte Anglizismen.
4. Folbacks sind vorhersehbar. 'ru-UA → ru → en'. Keine „stillen“ Ausfälle.
5. Sicherheit. Kein HTML von der Übersetzung zum DOM ohne Sanitaise; Platzhalter nur positionell/benannt.
6. A11y-Äquivalenz. Alt-Texte, Aria-Labels, Abkürzungen - alles ist lokalisiert.

2) Lokale Strategie

Systemcodes: 'language-REGION' (z.B. 'pt-BR', 'en-GB').
Auswahl der Lokalität: Benutzerprofil → Konfiguration; Ersatz - Auto-Detail nach Browser/Geo (mit Bestätigung).
Multi-Region: Sprache von Recht unterscheiden: 'es-ES' ≠ 'es-MX' (verschiedene Gesetze/Zahlungen/Grenzen).
Folback-Kette: UI ist die nächstgelegene Sprache; Rechtstexte - streng regionale Version, sonst Block und Bestätigungsanfrage.

3) Informationsarchitektur und Inhalte

Schlüsselbereiche: Navigation, CTA, Fehler, Formulare, Hinweise, Benachrichtigungen, Briefe, PDF/Banner.
Texterweiterungen: Breitenreserve + 30-40% (Deutsch/Finnisch). Layout - elastisch (flex/grid).
Ton/Stil: Markenwörterbuch (Begriffe, keine „Slang-Übersetzung“ an kritischen Stellen).
Bilder/Icons: Vermeiden Sie Text in Bildern; Wenn Sie es benötigen, speichern Sie lokale Versionen.

4) Architektur i18n

Schlüssel: 'Domäne. section. intent` → `payments. withdraw. error. insufficient_funds`.
Platzhalter: benannt ('{amount}','{minutes}'), außerhalb des Strings formatiert.
ICU MessageFormat: Pluralität, Gattung, Übereinstimmung.
Dateien: nach Locale und Domains ('/i18n/{ locale }/{ domain} .json') werden die Chunks faul geladen.
Server/Client: Universal Renderer, Local im Cookie + HTTP-Vary.

json
{
"betslip": {
"placed": "Ставка на сумму {amount} {currency} принята",
"timeout": "Ожидаем подтверждение… ~{seconds, plural, one {# сек} few {# сек} many {# сек} other {# сек}}"
}
}

5) Formatierung: Zahlen, Daten, Währungen, Einheiten

js const nf = new Intl.NumberFormat('uk-UA', { style:'currency', currency:'UAH' });
nf.format(2000); // 2 000,00 ₴

const df = new Intl.DateTimeFormat('tr-TR', { dateStyle:'medium', timeStyle:'short' });
df.format(new Date());

const pl = new Intl.PluralRules('ru-RU');

Minor Units: Halten Sie die Beträge in Cent/Kopeken; auf dem Client formatieren.
Relative Zeit: 'Intl. RelativeTimeFormat`.
Einheiten: 'Intl. NumberFormat({ style:'unit', unit:'meter' })`.
Kalender/Woche: 1. Tag der Woche und Datumsformat - nach Standort.

6) RTL und die Richtung des Schreibens

Unterstützen Sie' dir = 'rtl' für 'ar', 'he', 'fa'; Verwenden Sie' dir = 'auto' für benutzerdefinierte Inhalte.
Invertieren Sie die Symbole/chevron's; Spiegel Karussells und Stepper.
Zahlen/Währungssymbole - LTR-Fenster (vermeiden Sie gemischtes BiDi-Chaos).
CSS-logische Eigenschaften ('inline-start/end') statt links/rechts.

7) Formulare und Eingabe

Namen/Adressen: Apostrophe/Diakritik/Doppelnamen zulassen.
Telefon: E.164 Lagerung; Masken - weich, mit Einfügeunterstützung.
Adressformate: Reihenfolge der Felder nach Land; Index/Staat kann fehlen.
Tastaturen: 'inputmode', 'autocomplete' korrekt für die Lokalität.
Platzhalter: Beispiele in lokaler Sprache/Format.

8) Pseudo-Lokalisierung und Prüfung

Ersetzen Sie die Zeilen automatisch durch '【 Ĥěļļő 】' + Verlängerung'+ + +'(~ 35%).
Fügen Sie die Pseudolokale als' qps-ploc' in die dev-Assembly ein.
Screenshots mit Kontext für Übersetzer: Hervorhebung von Platzhaltern und langen Texten.
Testen: Trimmen, Transporte, Überläufe, „hart genähte“ Zeilen, RTL.

9) Benachrichtigungen, Briefe, Vorlagen

E-Mail-Vorlage und Themen - für jede lokale; Trennen Sie Texte und Layout.
Datumsangaben/Beträge im Betreff - Formatiert nach locale.
Links „Benachrichtigungen einrichten“ - immer in der Sprache des Briefes.
SMS: kurz, ohne mehrzeilige Anführungszeichen; UTM - ohne Lokalisierung.

10) Sicherheit und Zuverlässigkeit

Interpretieren Sie die Übersetzung niemals als HTML, verwenden Sie sichere Einfügungen.
Platzhalter sind nur Daten, keine Markierungen.
Protokolle/Metriken sind unklassifiziert, aber mit einer Locale für Tracing-Probleme.
Folback, wenn die Übersetzungsdatei nicht verfügbar ist - „ruhig“ (zeigen Sie Englisch + Telemetrie).

11) Produktivität

Überweisungschunks nach Routen/Domains; Pre-Boot für häufige.
Кеш CDN с `ETag`/`Cache-Control`.
Vermeiden Sie Render, wenn Sie den Ort ändern - i18n Kontext mit Memoization.

12) Besonderheiten von iGaming

Disclaimer und verantwortungsvolles Spielen: Formulierungen sind länderspezifisch (18 +/21 +, Regulierungsbehörden, Hilfslinien).
KYC/AML: rechtlich korrekte Begriffe (z.B. „Geldquelle“, „Wirtschaftlicher Eigentümer“), Fall-/Geburtsvarianten.
Zahlungsmethoden: lokale Namen (PIX, Papara, SEPA) und Bedingungen (ETA/Provisionen) - streng nach Region.
Koeffizienten und Format: 'decimal/fractional/american' - lokale Erklärungen und ein Beispiel.
Gesetzestexte: unveränderte regionale Fassungen; Verbot von Folback für eine andere Gerichtsbarkeit.

13) Design-System-Token (Beispiel)

json
{
"i18n": {
"fallback": ["en"],
"rtl": ["ar", "he", "fa"],
"textExpansionPct": 0.35,
"screenshotHints": true
},
"typography": {
"lineHeight": { "ui": 1.4, "dense": 1.3 },
"hyphens": "auto",
"tabularNums": true
},
"layout": {
"minLabelWidth": 96,
"gap": { "sm": 8, "md": 12, "lg": 16 }
},
"a11y": {
"ariaMirroring": true,
"altTranslate": true,
"contrastAA": true
}
}

14) Snippets

ts import i18n from 'i18next';
import ICU from 'i18next-icu';
import { initReactI18next } from 'react-i18next';

i18n.use(ICU).use(initReactI18next).init({
lng: 'uk-UA',
fallbackLng: ['ru', 'en'],
load: 'languageOnly',
interpolation: { escapeValue: false },
resources: {} // пусто — грузим лениво
});

export async function loadNamespace(ns: string, lng = i18n.language){
const mod = await import(`/i18n/${lng}/${ns}.json`);
i18n.addResourceBundle(lng, ns, mod.default, true, true);
}

json
{
"notifications": "{count, plural, one {# уведомление} few {# уведомления} many {# уведомлений} other {# уведомления}}"
}

js const money = (v, c, l) => new Intl.NumberFormat(l, {style:'currency', currency:c}).format(v/100);
const rel = (v, unit, l) => new Intl.RelativeTimeFormat(l, {numeric:'auto'}).format(v, unit);
// money(250000,'EUR','de-DE') → 2.500,00 €

js const rtl = new Set(['ar','he','fa']);
document.documentElement.dir = rtl.has(locale.split('-')[0])? 'rtl': 'ltr';

js const pseudo = s => s.replace(/[aAeEiIoOuU]/g, m => ({a:'à',e:'ê',i:'ï',o:'ô',u:'û'}[m.toLowerCase()]        m)).replace(/([^\s])/g,'$1\u0301');

15) Leer/Fehler/Grayfula Abbau

Keine Schlüsselübersetzung: Englisch anzeigen + 'missing _ key' protokollieren.
Keine lokale Datei: Folback und Banner „Teil der Schnittstelle in Englisch“.
Text zu lang: Mehrzeilig, 'line-clamp' nach Ort, Tooltip mit Volltext.

16) Metriken und Qualitätskontrolle

Coverage% für Schlüssel/Locals (Ziel ≥ 98%).
Time-to-Translate (TTT) für neue Releases.
Bug Rate L10n: visuelle Beschneidungen, RTL-Defekte, fehlerhafte Formate.
Reading ease (subjektive Umfrage) und NPS per locale.
Rechtliche Validierung nach Region (Compliance Checkliste).

17) Antipatterns

Verkettung von Zeilen im Code („Sie haben gewonnen“ + amount + „!“) - bricht die Grammatik.
Text in Bildern/Icons ohne lokale Versionen.
Harte Breiten für Englisch.
Ersetzung des Rechts des Landes durch die Sprache (Verwendung von „es-ES“ für Mexiko).
Übersetzung über HTML aus dem CMS ohne Sanitaise.
Der gleiche Schlüssel mit unterschiedlichen Bedeutungen an verschiedenen Orten.

18) QS-Checkliste

Strings und Schlüssel

• Benannte Platzhalter; Es gibt keine Verkettung.
• ICU-Pluralisierung/Gattung wo nötig.
• Die Folback-Kette funktioniert.

Layout und Barrierefreiheit

• Breite Marge + 30-40%; 'line-clamp', Wortübertragung.
• Alt/Aria-Labels sind lokalisiert.
• RTL spiegelt Icons/Navigation; Die Zahlen sind lesbar.

Formate

• Daten/Währungen über „Intl.“; Beträge aus kleineren Einheiten.
• Adresse/Telefon/Name - flexible Regelungen nach Land.

Sicherheit/Leistung

• Übersetzungen führen kein HTML aus; XSS ist ausgeschlossen.
• Faule Chunks, CDN-Cache, ohne unnötige Render.

iGaming-Besonderheit

• Disclaimer/18 +/Hilfslinien - nach Zuständigkeit.
• KYC/AML-Texte sind rechtlich abgeglichen.
• Zahlungsnamen/ETA/Gebühren - lokal.

19) Dokumentation im Konstruktionssystem

Разделы: i18n Tokens, Guides (ICU/Plural/RTL), Patterns (Emails/SMS/Toasts), Legal Strings per Region.
Werkzeuge: Pseudolokal, Bildschirmscreen-Scanner, Coverage-Bericht, Schlüssellinter.
Prozess: Glossar, Translation Memory, Kontext-Screenshots, Revue durch einen Muttersprachler.

Kurze Zusammenfassung

Eine mehrsprachige Benutzeroberfläche ist eine systemische Arbeit auf der Ebene von Architektur, Design, Inhalt und Recht. Keys und Folbacks organisieren, ICU und 'Intl' nutzen, RTL unterstützen, die Pseudolokale vorab vertreiben und für die rechtliche Korrektheit der regionalen Formulierungen sorgen. Dann wird sich das Produkt in jedem Land und für jeden Benutzer heimisch fühlen - von Quoten und Zahlungen bis hin zu Briefen und Referenzen.