Lokalisierungsfähige Oberflächen: Intl-Pluralregeln, Datumsformate und Rechts-nach-links-Layout

Ziel

Eine Oberfläche, die bei einem Wechsel der Locale korrekt bleibt: richtige Pluralform, richtiges Datums- und Zahlenformat, richtige Leserichtung, keine abgeschnittenen Beschriftungen – ohne separates Stylesheet oder Template pro Sprache.

Voraussetzungen

Ein BCP-47-Locale-Tag pro Nutzer oder Dokument (lang auf html), Meldungstexte ausserhalb des Codes gehalten, sowie der Intl-Namensraum, den MDN als Bereitsteller von DateTimeFormat, NumberFormat, PluralRules, RelativeTimeFormat und verwandten Konstruktoren aufführt.

Schritte

1. Zahlen und Daten: new Intl.NumberFormat(locale, options) und new Intl.DateTimeFormat(locale, options) einmal erstellen und wiederverwenden; Währungen und Einheiten über die Optionen formatieren statt Symbole zu verketten. Für "vor 3 Tagen" Intl.RelativeTimeFormat verwenden. ISO-8601-Zeichenketten über die Leitung senden und erst am Rand formatieren.
2. Pluralformen: new Intl.PluralRules(locale).select(n) liefert eine Kategorie (zero, one, two, few, many, other); bei englischen Kardinalzahlen kommen nur one und other vor, manche Sprachen nutzen alle sechs. Pro Kategorie eine Textvariante speichern und anhand des zurückgegebenen Tags auswählen; nie anhand von n === 1 verzweigen. Für Ordnungszahlen (1st, 2nd) { type: "ordinal" } verwenden.
3. Richtung: dir="rtl" auf html für Rechts-nach-links-Locales setzen und dir="auto" auf Eingabefeldern, die Nutzertext unbekannter Richtung enthalten können. Layout mit logischen Eigenschaften schreiben (margin-inline-start, padding-block, inset-inline-end, text-align: start), damit Ränder, Floats und Ausrichtung mit der Schreibrichtung kippen, statt links und rechts fest zu verdrahten.
4. Icons und Bedienelemente: richtungsbehaftete Icons (Zurück-Pfeile, Fortschritt) unter [dir="rtl"] spiegeln; universelle Symbole (Play, Häkchen) unverändert lassen.
5. Platz: Der zitierte W3C-Artikel zur Textgrösse übernimmt IBMs Tabelle zur Textexpansion, wonach kurze englische Zeichenketten (bis zehn Zeichen) in europäischen Sprachen um 200–300 % länger werden und lange Texte um rund 130 %. Buttons, Tabs und Tabellenkopfzeilen wachsen oder umbrechen lassen; feste, an die englische Beschriftung angepasste Breiten vermeiden.
6. Sortierung und Suche: mit Intl.Collator statt nach Code-Point-Reihenfolge vergleichen, und Text für Zeichenzählungen mit Intl.Segmenter segmentieren.
7. Mit einer Pseudo-Locale testen (verlängerte, akzentuierte, gespiegelte Zeichenketten), bevor echte Übersetzungen vorliegen.

Erwartetes Ergebnis

Ein Wechsel der Locale ändert Formate, Pluralformen und Layoutrichtung ohne eigenen Codepfad pro Sprache; Übersetzerinnen und Übersetzer erhalten vollständige Sätze mit benannten Platzhaltern und je einer Variante pro Pluralkategorie.

Grenzen und Prüfbasis

Das Verhalten folgt der zitierten MDN- und W3C-Dokumentation; es wird keine Messung behauptet. Zeitzonen und Kalender (Hijri, buddhistisch) sind separate Optionen von DateTimeFormat. Bidirektionaler Text innerhalb einer Zeile (ein lateinischer Produktname in arabischem Fliesstext) braucht bdi oder Unicode-Isolation, was dir allein nicht löst.