Das Layout brach nicht an einem Absatz. Es brach an einem deutschen Navigationskompositum mit 17 oder mehr Zeichen in Displaygrösse. Das englische Design hatte das Label als sauberes Rechteck behandelt. Deutsch machte daraus eine strukturelle Last.
Die Lehre dieser Seite war nicht, überall mehr Platz für Deutsch zu reservieren. Layout durfte nicht länger von der erwarteten Form des Englischen abhängen.
Textexpansion hat nicht nur eine Richtung
Deutsch erzeugt häufig lange Komposita und breitere Labels. Türkischer Text auf derselben Seite fällt oft kürzer als englischer aus, einzelne Wörter können trotzdem schwierige Umbrüche erzeugen. Überschriften, Buttons, Metadaten und Navigation reagieren verschieden. Ein allgemeiner Expansionsfaktor verbirgt diese Unterschiede.
Echte Texte kommen früh in den Entwurf, einschliesslich langer plausibler Labels und schwieriger redaktioneller Titel. Übersetzte Blindtextabsätze reichen nicht. Fehler entstehen in kleinen engen Components: Cards mit festen Actions, Tab Reihen, Breadcrumbs, Filter und Display Headlines.
Jede Locale gilt als Originalinhalt mit eigenem Rhythmus. Gleiche Zeilenzahl ist keine Konsistenz. Erhaltene Hierarchie und nutzbarer Raum sind es.
Text gibt nach, bevor das Grid bricht
Grid Tracks müssen Content Columns korrekt schrumpfen lassen, statt dass intrinsische Textbreite das ganze Layout nach aussen drückt. Flex und Grid Children brauchen oft ein ausdrückliches Minimum, das Schrumpfen erlaubt. Actions umbrechen, stapeln oder wandern unter den Inhalt, bevor die primäre Lesespalte unbrauchbar wird.
Feste Card Höhen aus englischem Text werden vermieden. Ausgerichtet werden bedeutende Punkte wie Bild, Titelanfang oder Action Region, der Textblock darf wachsen. Erfordert perfekte Row Alignment eine gekürzte Übersetzung, hat das Grid die falsche Autorität erhalten.
In Displaygrössen brauchen responsive Type und Line Height Platz für deutschen Umbruch. Danach wird der Rhythmus im Türkischen geprüft, wo kürzere Texte übermässigen Leerraum offenlegen können.
Trennung ist sprachabhängig
Automatische Silbentrennung darf kein globaler visueller Patch sein. Der Browser braucht die richtige Sprache für geeignete Regeln. Die MDN Dokumentation zu hyphens erklärt, dass automatisches Verhalten vom HTML Attribut lang und einem verfügbaren Wörterbuch abhängt.
Die Document Language wird je Locale gesetzt, Inline Sprachwechsel werden am Element markiert. Hyphenation wird für deutschen Editorial Text oder enge Display Kontexte erst nach visueller Prüfung aktiviert. Türkisch und Englisch können andere Wrap Entscheidungen brauchen. Eine word-break Regel, die jedes Wort teilt, schützt die Component auf Kosten des Lesens.
Manuelle Soft Breaks gehören nur in kontrollierte Ausnahmen. Sie sind Content Entscheidung, keine universelle CSS Strategie.
Components brauchen semantische Auswege
Ein Button Label kann umbrechen, ein Icon-only Fallback kann aber Bedeutung verlieren. Ein Navigation Item kann in ein Overflow Menü wandern, sofern die Informationsarchitektur klar bleibt. Eine Card darf wachsen, während ein Carousel dadurch unerwartet die Höhe ändert. Jede Component braucht eine definierte Reaktion auf längeren und kürzeren Text.
Diese Reaktionen gehören in Component Tests. Alle unterstützten Locales werden bei engen und breiten Viewports gerendert. Fehlende Übersetzungen, gemischtsprachige Namen und CMS Inhalte jenseits des Beispiels gehören dazu. Visual Regression Screenshots helfen, Keyboard Focus und Screen Reader Names brauchen ebenfalls Prüfung.
Diese Woche alle drei Locales belasten
Die dichteste Seite erhält aktuelle englische, türkische und deutsche Inhalte statt Platzhaltern. In jeder engen Component wird das längste ungetrennte Wort gesucht. Browser Zoom, schmale Breite und grosse Texteinstellungen werden getestet.
Bei jedem Fehler gilt die Reihenfolge: Kann der Track schrumpfen, kann Text natürlich umbrechen, kann die Component reflowen und sollte die Formulierung redaktionell geändert werden? Sprachabhängige Hyphenation folgt erst nach diesen strukturellen Optionen.
Zum Schluss wird jede Locale eigenständig geprüft, nicht nur im schnellen Wechsel auf Gleichheit. Ein robustes mehrsprachiges Layout zwingt drei Sprachen nicht in identische Boxen. Es gibt jeder Sprache Raum für Natürlichkeit, während die Oberfläche Hierarchie, Ausrichtung und Absicht behält.