Design für jeden Markt

Eine Funktion ist für die Welt bereit, wenn sie in jeder Sprache funktioniert und den Konventionen jedes Lesers ohne Codeänderungen folgt. Diese Seite orientiert sich an den Richtlinien von Microsoft. Internationalisierungs-Checkliste: Jeder Abschnitt erläutert die Unterschiede zwischen den Märkten, wie man Code schreibt, der das korrekt umsetzt, und die Globalisierungs-Check Code, der die jeweilige Fehlerquelle kennzeichnet.

Im Kern läuft alles auf eine Regel hinaus: Die Lokalisierung des Lesers soll entscheiden. Der Browser- Intl APIs, der Formatter des Frameworks und die zugrundeliegenden Daten Kultur kennen die Konventionen jedes Marktes; Code, der die eines einzigen Marktes fest vorgibt, tut das nicht.

Texte und Sätze#

Jeder lesbare Text gehört in das Quellkatalog-Verzeichnis, unter einem Schlüssel, und wird über die Übersetzungsfunktion des Projekts ausgegeben. Dazu zählen Labels, Überschriften, Schaltflächen, Nachrichten, Fehlermeldungen für Nutzer sowie Platzhalter. alt Texte und ARIA-Labels. Codes: hardcoded_text.

Ein Satz ist eine einzige Nachricht. Die Wortreihenfolge unterscheidet sich je nach Sprache, weshalb ein aus Teilen zusammengesetzter Satz nicht übersetzt werden kann. Übergeben Sie Werte als Platzhalter und Zählungen als Pluralformen. Codes: concatenated_text.

// Not world-ready: English word order and English plurals
'You have ' + count + ' new ' + (count === 1 ? 'message' : 'messages');

// World-ready: one ICU message
t('inbox.new', { count });
// "inbox.new": "{count, plural, one {You have # new message} other {You have # new messages}}"

Sprachen benötigen unterschiedliche Pluralformen: Englisch kennt zwei, Arabisch sechs und Japanisch nur eine. Formulieren Sie die Ausgangsnachricht mit ICU-Pluralen, damit die Engine die jeweils benötigten Formen für jede Sprache hinzufügt.

Zahlen#

In verschiedenen Märkten wird dieselbe Zahl unterschiedlich geschrieben: In den Vereinigten Staaten 1.234,5, in Deutschland 1.234,5, in Schweden und Frankreich 1 234,5 – in einigen arabischen Märkten sogar mit anderen Ziffern. Formatieren Sie die Zahlen entsprechend der Lokalisierung des Lesers. Codes: locale_number.

new Intl.NumberFormat(locale).format(1234.5);
new Intl.NumberFormat(locale, { style: 'percent' }).format(0.25);

Lesen Sie eine vom Nutzer eingegebene Zahl mit derselben Lokalisierung oder verwenden Sie ein Zahlenfeld, dessen Wert vom Browser normalisiert wird. parseFloat('1,5') ist 1, nicht einhalb. Codes: locale_parsing.

Daten, Uhrzeiten und Zeitzonen#

Die Reihenfolge der Daten, Trennzeichen, Monatsnamen, die 12- oder 24-Stunden-Anzeige und der Kalender unterscheiden sich je nach Markt. Formatieren Sie diese entsprechend der Lokalisierung des Lesers und niemals mit einem festen Muster wie MM/dd/yyyy. Codes: locale_date.

new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short', timeZone }).format(when);

• Speichern Sie Zeitpunkte im UTC-Format, als ISO 8601 mit Offset, und formatieren Sie sie in der Zeitzone des Lesers. Berechnen Sie „heute“ und Tagesgrenzen in dieser Zeitzone – nicht in der des Servers.
• Die Wochen beginnen an unterschiedlichen Tagen: In den Vereinigten Staaten am Sonntag, in weiten Teilen Europas am Montag, im Nahen Osten teilweise am Samstag. Auch die Wochenenden unterscheiden sich. Beziehen Sie beides aus der Lokalisierung (new Intl.Locale(locale).getWeekInfo() falls verfügbar, oder aus den Lokalisierungsdaten Ihrer Datumsbibliothek), niemals aus einer festen Vorgabe. Codes: calendar_names.
• Wochentags- und Monatsnamen stammen aus der Lokalisierung (Intl.DateTimeFormat(locale, { weekday: 'long' })), nicht aus einer Liste im Code. Codes: calendar_names.
• Kalender. Saudi-Arabien, Israel und Japan nutzen den gregorianischen Kalender neben dem Umm-al-Qura-, hebräischen und japanischen Kalender; Thailand und der Iran verwenden standardmäßig den buddhistischen bzw. persischen Kalender. Die Kultur gibt an, welchen Kalender ein Markt verwendet.

Währungen#

Formatieren Sie Beträge mit der jeweiligen Währung und der Lokalisierung des Lesers – niemals mit einem Symbol direkt neben der Zahl. Derselbe Betrag wird so dargestellt $1,234.50, 1.234,50 $ oder US$1,234.50 je nach Leser – viele Märkte teilen sich außerdem ein gemeinsames Symbol. Codes: hardcoded_currency.

new Intl.NumberFormat(locale, { style: 'currency', currency }).format(1234.5);

Die Währung ist eine geschäftliche Entscheidung, keine Formatierungsaufgabe: Eine Änderung der Lokalisierung des Lesers darf die Preise nicht umrechnen. Die Kultur speichert die Währung, in der ein Markt zahlt.

Sortieren, Vergleichen und Groß-/Kleinschreibung#

Jede Sprache sortiert auf ihre eigene Weise: Schwedisch platziert å, ä und ö nach z, Deutsch ordnet ä bei a ein und Chinesisch sortiert nach Pinyin oder Strichen. Sortieren Sie Texte, die Nutzer lesen, entsprechend der Lokalisierung des Lesers. Codes: ordinal_sort.

names.sort(new Intl.Collator(locale).compare);

Die Zuordnung von Groß- und Kleinschreibung hängt ebenfalls von der Sprache ab: Im Türkischen ist das Großbuchstaben-Äquivalent von i das İ. Verwenden Sie toLocaleUpperCase(locale) für Texte, die Nutzer lesen. Codes: case_mapping.

Listen#

„Anna, Ben und Chen“ wird in jeder Sprache unterschiedlich geschrieben. Verknüpfen Sie Listen mit der jeweiligen Lokalisierung. Codes: joined_list.

new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' }).format(names);

Namen, Adressen, Postleitzahlen und Telefonnummern#

• Namen. In vielen Märkten steht der Familienname zuerst, und viele Personen haben einen einzigen Namen oder mehr als zwei. Geben Sie den vollständigen Namen in einem Feld an, es sei denn, ein Markt benötigt die einzelnen Bestandteile. Akzeptieren Sie alle Schriftsysteme: Åsa, José, 王 und Мария sind allesamt Namen. Codes: latin_only_input.
• Adressen. Die Felder, ihre Reihenfolge und ihre Bezeichnungen unterscheiden sich: In den Vereinigten Staaten ein Bundesstaat und eine ZIP-Code, in Japan eine Präfektur – in einigen Märkten gibt es überhaupt keine Postleitzahl. Die Kultur zeigt die Adresse jedes Marktes so, wie der Postdienst sie schreibt. Fordern Sie keine Felder an, die ein Markt nicht verwendet.
• Postleitzahlen. Behalten Sie sie als Text bei und validieren Sie sie pro Land – oder lassen Sie die Validierung ganz weg. Ein Muster mit fünf Ziffern schließt den größten Teil der Welt aus. Codes: postal_code_format.
• Telefonnummern. Speichern Sie sie im E.164-Format (+46 8 123 456 78), formatieren und validieren Sie sie mit einer Bibliothek, die das Nummernplan-System jedes Landes kennt – etwa libphonenumber. Ein Muster wie (555) 555-1234 Lehnt jede Zahl außerhalb Nordamerikas ab. Codes: phone_number_format.

Einheiten und Papier#

Die meisten Länder verwenden Kilometer, Kilogramm und Grad Celsius; die Vereinigten Staaten nutzen Meilen, Pfund und Grad Fahrenheit; das Vereinigte Königreich kombiniert beides. Übernehmen Sie die Einheit aus der Region des Lesers und formatieren Sie sie entsprechend der Lokalisierung. Codes: fixed_unit.

new Intl.NumberFormat(locale, { style: 'unit', unit: 'kilometer' }).format(12);

Druck- und PDF-Ausgaben folgen dem gängigen Papierformat: Letter in Nordamerika, A4 fast überall sonst. Codes: paper_size.

Eingabemethoden und Schriftarten#

Chinesische, japanische und koreanische Texte werden über einen Eingabemethode-Editor eingegeben: Die Enter-Taste dient zum Auswählen eines Wortes, nicht zum Absenden. Ein Handler, der bei Drücken von Enter übermittelt, muss dies ignorieren, solange ein Wort noch zusammengesetzt wird. Codes: ime_composition.

onKeyDown={event => {
  if (event.key === 'Enter' && !event.nativeEvent.isComposing) submit();
}}

Wählen Sie Schriftarten aus, die alle von Ihnen unterstützten Schriftsysteme abdecken, oder greifen Sie auf Systemschriftarten zurück, die dies tun; Arabisch, Chinesisch, Hebräisch, Japanisch, Koreanisch und Thailändisch benötigen jeweils eigene Schriftarten. Lassen Sie in der Zeilenhöhe genug Platz für Schriftsysteme mit hohen Zeichen – verlassen Sie sich nicht auf Kursivschrift (Chinesisch und Japanisch kennen keine Kursivschrift) – und platzieren Sie Text niemals in Bildern, da diese nicht lokalisiert werden können.

Rechts nach links#

Arabisch und Hebräisch werden von rechts nach links geschrieben, wodurch auch die gesamte Darstellung entsprechend umgekehrt wird: Navigation, Ausrichtung, Symbole sowie die Reihenfolge der Spalten.

• Legen Sie dir="rtl" auf dem Root-Element für diese Sprachen fest und lang für jede Sprache.
• Verwenden Sie logische Eigenschaften: margin-inline-start anstelle von margin-left, padding-inline-end, inset-inline-start, text-align: start, float: inline-start, sowie die logischen Hilfsklassen Ihres CSS-Frameworks (ms-4, pe-2, text-start). Codes: physical_direction, unmirrored_layout.
• Spiegeln Sie Symbole, die eine Richtungsangabe enthalten, wie Pfeile und Chevrons, nicht jedoch andere, etwa eine Uhr oder eine Wiedergabetaste.
• Zahlen, Code, URLs und Namen in lateinischer Schrift bleiben innerhalb von rechts-nach-links-Texten von links nach rechts ausgerichtet. Isolieren Sie Text von Personen oder Daten in <bdi> , damit er seine Umgebung nicht neu ordnet.

Platz zum Wachsen#

Übersetzungen sind oft länger als das Englische – kurze Bezeichnungen verlängern sich am stärksten: Das deutsche „OK“ kann zu einem ganzen Wort werden, und eine zehnzeilige Bezeichnung kann sich verdoppeln. Geben Sie dem Text ausreichend Raum: Erlauben Sie das Umbruchverhalten, lassen Sie Schaltflächen und Registerkarten mit ihren Bezeichnungen mitwachsen und vermeiden Sie feste Breiten und Höhen für Text. Schneiden Sie keine Bezeichnungen ab, die für die Interaktion notwendig sind. Codes: clipped_text.

Die Pseudo-Übersetzung verlängert jeden String um diese Mengen – so erkennen Sie das Problem bereits vor dem Übersetzer:

Chinesisch, Japanisch und Koreanisch sind in der Regel kürzer, benötigen aber höhere Zeilen.

Checkliste für jede Änderung#

• Der von Menschen gelesene Text stammt aus dem Katalog – jeder Satz bildet eine Nachricht.
• Zahlen, Daten, Zeiten, Währungen, Einheiten und Listen richten sich nach der Lokalisierung des Lesers.
• Sortierung und Groß-/Kleinschreibungszuordnung nutzen die Lokalisierung des Lesers.
• Namen, Adressen, Postleitzahlen und Telefonnummern akzeptieren alle Märkte.
• Die Enter-Taste übermittelt keinen Inhalt, solange ein Wort noch zusammengesetzt wird.
• Die Darstellung nutzt logische Eigenschaften und bietet Platz für längeren Text.

Verwandt#

• Die Globalisierungsprüfung
• Pseudo-Lokalisierung
• Weltweite Einsatzfähigkeit und Kultur
• Globalisierung