Tips für Web-Profis (Designer & HTML-Autoren)
◀Zurück zur Übersicht aller Themen
Vermeiden hässlicher Zeilenumbrüche
Problem
Es ist schön und richtig, dass Browser in der Lage sind, Zeilenumbrüche an den vorhandenen Platz auf dem Bildschirm anzupassen, nur kann das Verwirrung stiften oder zumindest unschön aussehen.
Beispiele:
-
Die zu Zahlenangaben gehörigen Maßeinheiten können so in die nächste Zeile rutschen, wenn zwischen Zahl und Einheit ein normales Leerzeichen steht (10 kg, 194 cm).
-
Bei großen Zahlen werden manchmal Dreiergruppen von Ziffern per Leerzeichen abgesetzt. Hier kann es dann sein, dass z.B. die letzten drei oder sechs Nullen in „10 000 000“ in den Anfang der nachfolgenden Zeile rutschen.
-
Es sieht oft unvorteilhaft aus, wenn ein Link-Text einen Zeilenumbruch enthält.
-
Firmen- und Produkt-Namen, insbesondere die eigenen (Corporate Identity!) will man nicht auf zwei Zeilen verteilen. Es ist unschön, wenn eine Zeile mit „Amnesty“ endet und die nächste mit „International“ beginnt. Es kann auch den Lesefluss bremsen.
-
Bei Fachbegriffen, die untrennbar zusammengehören, gilt das gleiche: Wer über die Minoer schreibt, will den Namen der Schrift „Linear B“ nicht über zwei Zeilen verteilen.
Solche unerwünschten Zeilenumbrüche treten dort auf, wo die besagten Begriffe Leerzeichen oder Bindestriche enthalten.
Selbst, wenn die besagten, unerwünschten Zeilenumbrüche auf dem Bildschirm des Autors nicht zu sehen sind: Man weiß nie, wie es bei den Besuchern einer Website aussieht. Sie haben andere Browser, andere Auflösungen oder einfach nur ein größeres / kleineres Fenster auf.
Lösung
-
Leerzeichen an den betreffenden Stellen durch „nicht-umbrechende Leerzeichen“ ersetzen.
Als Abkürzung für die englische Bezeichnung „Non‑Breaking Space“ heißt die entsprechende HTML‑Entity
-
Bindestriche an den betreffenden Stellen durch „nicht-umbrechende Bindestriche“ (Non-Breaking Hyphens) ersetzen. Dies ist Browsern geschuldet, die eigenmächtig Bindestriche als mögliche Trennstelle interpretieren (MSIE z.B.).
Am sichersten verwendet man hierfür die numerierte Entity für den Non-Breaking Hyphen:
‑
Beispiele
Wenn man das aktuelle Browser-Fenster verkleinert, kann man sehen, dass die folgenden Begriffe nie umgebrochen werden:
Der Name der Organisation im folgenden Abschnitt wird nie umgebrochen,
weil er in HTML jeweils angegeben ist als:
Amnesty International
Amnesty International Amnesty International Amnesty International Amnesty International Amnesty International Amnesty International Amnesty International Amnesty International Amnesty International Amnesty International Amnesty International Amnesty International Amnesty International Amnesty International Amnesty International
Der Titel R‑E‑S‑P‑E‑C‑T wird selbst in
MSIE nicht mitten im Titel umbrechen, weil er jeweils in HTML angegeben
ist als:
R‑E‑S‑P‑E‑C‑T
R‑E‑S‑P‑E‑C‑T hat Aretha gut gesungen. R‑E‑S‑P‑E‑C‑T hat Aretha gut gesungen. R‑E‑S‑P‑E‑C‑T hat Aretha gut gesungen. R‑E‑S‑P‑E‑C‑T hat Aretha gut gesungen. R‑E‑S‑P‑E‑C‑T hat Aretha gut gesungen. R‑E‑S‑P‑E‑C‑T hat Aretha gut gesungen. R‑E‑S‑P‑E‑C‑T hat Aretha gut gesungen.