Engineering//10 Min. Lesezeit

Schrift- und Schreibsystemüberlegungen für die Software-Lokalisierung

Eray Gündoğmuş
Teilen

Schrift- und Schreibsystemüberlegungen für die Software-Lokalisierung

Wichtigste Erkenntnisse

  • Der Unicode-Standard definiert über 150.000 Zeichen in 161 Schriftsystemen – Software muss alle davon korrekt verarbeiten
  • CJK-Schriften (Chinesisch, Japanisch, Koreanisch) haben einzigartige Zeilenumbruchregeln – mitten in bestimmten Zeichenfolgen darf kein Umbruch erfolgen
  • Arabisch und Hebräisch erfordern eine Rechts-nach-links-Darstellung (RTL) mit komplexer bidirektionaler Textverarbeitung
  • Indische Schriften wie Devanagari verwenden Konjunktkonsonanten und kombinierende Zeichen, die die Textmessung und Cursorpositionierung beeinflussen
  • Font-Stacking und Fallback-Strategien stellen sicher, dass Text in allen unterstützten Schriften korrekt gerendert wird

Warum Schreibsysteme für Software wichtig sind

Bei der Lokalisierung von Software konzentrieren sich Entwickler oft auf die Übersetzung von Zeichenketten, übersehen aber die Rendering- und Eingabeprobleme, die durch unterschiedliche Schreibsysteme entstehen. Eine Schaltfläche, die auf Englisch funktioniert, kann auf Deutsch abgeschnitten werden, auf Arabisch falsch dargestellt werden oder auf Japanisch falsche Zeilenumbrüche verwenden.

Das Verständnis, wie verschiedene Schriften funktionieren, hilft Teams dabei, Software zu entwickeln, die mehrsprachige Inhalte von Anfang an korrekt verarbeitet – anstatt nach dem Launch Rendering-Fehler zu beheben.

Lateinische Schriften

Die lateinische Schrift wird von Englisch, Spanisch, Französisch, Deutsch und vielen anderen Sprachen verwendet. Obwohl sie unkompliziert erscheint, gibt es Überlegungen zu beachten:

  • Diakritika und Akzente: Zeichen wie ñ, ü, ç, ø erfordern ordentliche Unicode-Unterstützung. ASCII-Annäherungen (ü durch u ersetzen) sind falsch.
  • Textausdehnung: Deutscher und finnischer Text kann 30–40 % länger sein als englische Entsprechungen
  • Sonderzeichen: Sprachen wie Vietnamesisch verwenden gestapelte Diakritika (z. B. ệ), die ausreichende Zeilenhöhe erfordern
  • Sortierung/Collation: Die alphabetische Reihenfolge variiert – im Schwedischen stehen å, ä, ö am Ende des Alphabets, nicht bei a und o

CJK (Chinesisch, Japanisch, Koreanisch)

CJK-Schriften bringen einzigartige technische Herausforderungen mit sich:

Zeichensätze

  • Chinesisch: Vereinfachtes Chinesisch (in Festlandchina und Singapur verwendet) und Traditionelles Chinesisch (in Taiwan und Hongkong verwendet) verwenden unterschiedliche Zeichensätze. Sie sind nicht austauschbar.
  • Japanisch: Verwendet gleichzeitig drei Schriften – Kanji (aus dem Chinesischen abgeleitete Zeichen), Hiragana (Silbenschrift) und Katakana (Silbenschrift für Fremdwörter)
  • Koreanisch: Verwendet Hangul, ein featural alphabet mit Silbenblöcken

Zeilenumbruch

CJK-Text verwendet keine Leerzeichen zwischen Wörtern. Zeilenumbrüche folgen spezifischen Regeln, die im Unicode Line Breaking Algorithm (UAX #14) definiert sind:

  • Die meisten CJK-Zeichen können als Umbruchpunkte dienen
  • Bestimmte Satzzeichen dürfen nicht am Anfang einer Zeile stehen (z. B. 。、)」)
  • Bestimmte Satzzeichen dürfen nicht am Ende einer Zeile stehen (z. B. (「)
  • Die CSS-Eigenschaft word-break: break-all kann nötig sein, aber verwenden Sie overflow-wrap: break-word als nuanciertere Alternative

Font-Überlegungen

CJK-Fonts sind deutlich größer als lateinische Fonts (zehntausende Glyphen gegenüber hunderten). Font-Ladestrategien umfassen:

  • Zuerst Systemfonts: font-family: -apple-system, "Hiragino Sans", "MS Gothic", sans-serif
  • Subset-Laden: Laden Sie nur die benötigten Zeichenbereiche mit unicode-range in @font-face
  • Variable Fonts: Reduzieren Sie die gesamte Font-Dateigröße bei gleichzeitiger Unterstützung mehrerer Schriftstärken

Arabische Schrift

Die arabische Schrift wird von Arabisch, Persisch (Farsi), Urdu und anderen Sprachen verwendet. Wichtige Überlegungen:

  • Text fließt von rechts nach links
  • UI-Elemente sollten gespiegelt werden: Navigation, Seitenleisten, Symbole mit Direktionalität
  • Verwenden Sie logische CSS-Eigenschaften (margin-inline-start statt margin-left)
  • Setzen Sie dir="rtl" auf das HTML-Element oder spezifische Container

Kontextuelles Shaping

Arabische Buchstaben ändern ihre Form je nach ihrer Position in einem Wort:

PositionFormBeispiel (ب)
IsoliertAllein stehendب
InitialAnfang des Wortesبـ
MedialMitte des Wortesـبـ
FinalEnde des Wortesـب

Moderne Text-Rendering-Engines (HarfBuzz, CoreText, DirectWrite) behandeln dies automatisch, aber benutzerdefiniertes Text-Rendering oder canvas-basierte UIs benötigen möglicherweise explizite Unterstützung.

Bidirektionaler (Bidi) Text

Wenn arabischer Text eingebettete englische Wörter, Zahlen oder Markennamen enthält, bestimmt der Unicode Bidirectional Algorithm (UBA) die Anzeigereihenfolge. Entwickler sollten:

  • <bdi> HTML-Elemente für nutzergenerierte Inhalte verwenden, die gemischten Text enthalten können
  • unicode-bidi: isolate in CSS für inline gemischte Richtungselemente anwenden
  • Mit echten gemischten Richtungsinhalten testen, nicht nur mit reinem RTL-Text

Indische Schriften

Devanagari (Hindi, Marathi, Nepali), Tamil, Bengali, Telugu und andere indische Schriften haben komplexe Rendering-Anforderungen:

Konjunktkonsonanten

Mehrere Konsonanten können sich zu einer einzigen visuellen Glyphe (Ligatur) verbinden. Zum Beispiel in Devanagari: क + ् + ष = क्ष. Dies beeinflusst:

  • Textmessung: Die visuelle Breite einer Zeichenkette entspricht nicht linear der Anzahl der Unicode-Codepunkte
  • Cursorpositionierung: Der Cursor muss sich korrekt durch Konjunkte bewegen, ohne sie zu trennen
  • Textauswahl: Benutzer sollten Konjunkte als einzelne Einheiten auswählen können

Kombinierende Zeichen

Vokalzeichen (Matras) hängen sich an Konsonanten in verschiedenen Positionen an – oben, unten, davor oder dahinter. CSS line-height muss diese Zeichen ohne Abschneiden aufnehmen.

Font-Anforderungen

Nicht alle Fonts unterstützen das vollständige Spektrum der Konjunkte für eine bestimmte indische Schrift. Verwenden Sie bewährte Fonts:

  • Devanagari: Noto Sans Devanagari, Mangal
  • Tamil: Noto Sans Tamil, Latha
  • Bengali: Noto Sans Bengali, Vrinda

Encoding-Best-Practices

UTF-8 überall

UTF-8 sollte die Standard-Codierung für alle Texte in moderner Software sein:

  • Setzen Sie <meta charset="UTF-8"> in HTML
  • Verwenden Sie UTF-8 in Datenbankspalten (utf8mb4 in MySQL, UTF8 in PostgreSQL)
  • Stellen Sie sicher, dass Datei-I/O UTF-8-Codierung verwendet
  • Setzen Sie Content-Type: text/html; charset=UTF-8 in HTTP-Headern

Zeichenkettenlänge vs. Anzeigebreite

Ein einzelnes „Zeichen", wie es ein Benutzer wahrnimmt, kann aus mehreren Unicode-Codepunkten bestehen:

KonzeptBeispielCodepunkte
Einfaches ZeichenA1
Zeichen mit Akzenté1 oder 2 (vorkombiniert oder kombinierend)
CJK-Zeichen1 (aber doppelte Breite)
Emoji👨‍👩‍👧‍👦7 (mit Zero-Width Joiners)
Devanagari-Konjunktक्ष3

Verwenden Sie Graphem-Cluster-Zählung (über Intl.Segmenter in JavaScript verfügbar) anstelle von .length, wenn Sie für den Benutzer sichtbare Zeichen zählen müssen.

// JavaScript: Graphem-Cluster zählen
const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
const count = [...segmenter.segment('👨‍👩‍👧‍👦')].length; // 1, nicht 7

Font-Stacking-Strategie

Ein robuster Font-Stack stellt sicher, dass jede Schrift korrekt gerendert wird:

body {
  font-family:
    /* Lateinisch */
    "Inter", -apple-system, BlinkMacSystemFont,
    /* CJK */
    "Hiragino Sans", "Noto Sans CJK", "Microsoft YaHei",
    /* Arabisch */
    "Noto Sans Arabic", "Segoe UI",
    /* Devanagari */
    "Noto Sans Devanagari",
    /* Fallback */
    sans-serif;
}

Googles Noto-Font-Familie bietet konsistente Abdeckung über Schriften hinweg und ist frei verfügbar.

FAQ

Muss ich von Anfang an jedes Schreibsystem unterstützen?

Nein. Beginnen Sie mit den Schriften, die von Ihren Zielmärkten verwendet werden. Stellen Sie jedoch sicher, dass Ihre technische Grundlage (UTF-8-Codierung, flexible Layouts, Font-Stacking) später weitere Schriften aufnehmen kann. RTL-Unterstützung oder CJK-Zeilenumbruchregeln nach dem Launch hinzuzufügen ist deutlich aufwändiger, als sie von Anfang an einzubauen.

Wie teste ich meine Anwendung mit verschiedenen Schriften?

Verwenden Sie Pseudo-Lokalisierungstools, um Textausdehnung und Sonderzeichen zu simulieren. Für schriftspezifische Tests erstellen Sie Testzeichenketten in jeder Zielschrift, die Randfälle enthalten: lange Wörter, Konjunkte, bidirektionalen Text und kombinierende Zeichen. Browser-Entwicklerwerkzeuge ermöglichen es, dir-Attribute zu wechseln und RTL-Layouts ohne vollständige Übersetzungen zu testen.

Sollte ich Web-Fonts oder Systemfonts für mehrsprachige Anwendungen verwenden?

Beide Ansätze haben Kompromisse. Systemfonts werden sofort ohne Download-Kosten gerendert, passen aber möglicherweise nicht zu Ihrer Marke. Web-Fonts bieten Markenkonsistenz, aber CJK-Web-Fonts können sehr groß sein (mehrere Megabyte). Ein häufiger Ansatz ist die Verwendung von Web-Fonts für lateinischen Text und System-Font-Fallbacks für CJK und andere komplexe Schriften, wobei unicode-range verwendet wird, um zu steuern, welche Zeichen welchen Font aktivieren.

Comments

Loading comments...