Übersetzter Text ist selten gleich lang wie die Quelle. Deutsch und Niederländisch sind merklich länger als Englisch, Finnisch und Russisch noch länger und Chinesisch und Japanisch viel kürzer. Ein Layout, das genau für englischen Text passt, hat keinen Spielraum und bricht, läuft über oder wird abgeschnitten. An der Übersetzung ist nichts falsch; das Design hatte keinen Spielraum.
Wo es zuerst auftritt
Navigation. Ein Menü, das im Englischen gerade passt, wird zweizeilig oder Elemente rutschen unter das Logo. Das häufigste Einzelsymptom.
Schaltflächen und Handlungsaufforderungen. Schaltflächen mit fester Breite schneiden ihre Beschriftung ab, oder der Text wird umgebrochen und die Schaltfläche wird höher als die Zeile, in der sie sich befindet.
Karten in einem Raster. Die Überschrift einer Karte benötigt eine zusätzliche Zeile und die Karten dieser Zeile haben nicht mehr die gleiche Höhe.
Tabellen. Spaltenüberschriften sind im Englischen kurze Wörter und in anderen Sprachen Sätze, sodass eine Tabelle, die passte, zu scrollen beginnt.
Alles absolut positioniert. Überlagerungstexte, Abzeichen und Bänder sind für eine bestimmte Zeichenlänge platziert und bewegen sich nicht, wenn sich die Zeichenfolge ändert.
Behebung
Container wachsen lassen. Ersetzen Sie feste width und height bei Textelementen durch min-width, min-height oder gar nichts. Diese eine Änderung behebt die meisten Fälle.
Auf die Sprache abzielen, nicht auf die Website. Das <html>-Element auf einer übersetzten Seite enthält ein lang-Attribut, sodass Sie nur die Sprache anpassen können, die es benötigt, und die anderen unberührt lassen. Der Wert enthält die Region in Kleinbuchstaben, z. B. de-de, de-at oder es-mx, also passen Sie am Anfang an, anstatt den gesamten Wert zu verwenden:
/* Give the German nav more room without touching other languages */
html[lang^="de"] .site-nav a {
font-size: 0.9rem;
letter-spacing: -0.01em;
}
Um nur eine Region zu stylen, passen Sie den vollständigen Wert an: html[lang="de-at"].
Lange Wörter umbrechen lassen. Zusammengesetzte Nomen im Deutschen und Finnischen können allein eine schmale Spalte überschreiten:
.card h3 {
overflow-wrap: break-word;
hyphens: auto;
}
Rechts-nach-links-Schrift separat prüfen. Neun der unterstützten Sprachen kehren die Richtung um, was eine andere Art von Problem als die Länge ist. Siehe Rechts-nach-links-Sprachen.
Wenn der Text selbst das Problem ist
Wenn eine Übersetzung viel länger ist als nötig, kürzen Sie diese Zeichenfolge, anstatt das Design zu überarbeiten. Die manuelle Bearbeitung ist die direkte Lösung und bleibt bestehen: Eine normale Seitenübersetzung ersetzt niemals eine Zeichenfolge, die bereits eine Übersetzung hat. Wenn Sie für diese Zeile Mit KI neu übersetzen wählen, wird sie ersetzt. Siehe Übersetzungen manuell bearbeiten.
Für einen Begriff, der überhaupt nicht hätte übersetzt werden dürfen und nun einen Button dehnt, sorgt eine Glossarregel dafür, dass er überall unverändert bleibt. Siehe Glossarregeln.
Vor dem Start einer Sprache prüfen
Öffnen Sie zwei oder drei Ihrer inhaltsreichsten Seiten in der längsten Sprache, die Sie unterstützen, bei einer schmalen Fensterbreite. Deutsch ist ein guter Stresstest, falls Sie es haben. Was das übersteht, übersteht normalerweise alles andere.