Das Problem mit dem Zeilenumbruch im HTML

Max und Moritz, gar nicht träge,
sägen heimlich mit der Säge,
Ritzeratze! voller Tücke,
in die Brücke eine Lücke
(Wilhelm Busch)

Das Problem

Die deutsche Sprache kennt so schöne Bandwurm-Worte wie Donau-Dampfschifffahrts-Kapitäns-Mütze oder Auslands-Krankenversicherungs-Police, aber was machen die dummen Browser damit? Man betrachte diesen Absatz nur mal im Internet Explorer und in einem ordentlichen Browser: Der IE bricht eine Zeile nach einem Bindestrich um, Firefox und Mozilla tun es nicht und erzeugen hässliche Lücken im Fließtext. Ist der IE hier nicht besser? Tja, dann muss man aber auch hinnehmen, dass "-3750" eventuell am Zeilenende nach dem Minuszeichen getrennt wird und URLs mit Bindestrich und Telefonnummern mit Durchwahl ebenfalls. Wie kann man alle Browser dazu bringen, lange Worte an Soll-Bruchstellen zu trennen? Und wie kann man das Gegenteil erreichen, dass bei einem Leerzeichen kein Zeilenumbruch geschieht, damit bei "150 Euro" und "-17° C" die Maßeinheit auf jeden Fall neben der Zahl stehen bleibt?

Browser sind nun einmal keine Textverarbeitungs-Programme, eine eingebaute intelligente Silbentrennung gibt es nicht. HTML sieht vor, dass Fließtext bei Leerzeichen automatisch umgebrochen und eine neue Zeile erzeugt wird. Das ist schon recht viel, reicht aber häufig nicht aus, sodass nachgebessert wurde. Die HTML-Standards sind in diesem Punkt bisher nicht sehr erfolgreich gewesen. Das Dumme ist: Was die Standards vorsehen, setzen die Browser nicht um, und das was die Browser können ist nicht standardkonform. Nach einem kurzen Betrachten der Theorie und der traurigen Realität geht es im Folgenden darum

notwendige Zeilenumbrüche zu ermöglichen und
nicht erwünschte Zeilenumbrüche zu verhindern.

Eines vorweg: Die Anhänger der reinen Lehre der Web-Standards werden mit vielem nicht einverstanden sein. Die Realität im Web ist nun aber mal so wie sie ist und fordert Lösungen.

Silbentrennung (Hyphenation) im HTML-Standard

Das folgende Zitat stammt aus der W3C-Recommendation für HTML 4.01 von 1999, hier leicht gekürzt in deutscher Übersetzung: "In HTML gibt es zwei Typen von Trennzeichen: den normalen Trennstrich und das weiche Trennzeichen (soft hyphen). Der normale Trennstrich sollte von den Benutzerprogrammen wie jedes andere Zeichen behandelt werden (also keine Trennung erfolgen). Das weiche Trennzeichen zeigt dem Programm, wo ein Zeilenumbruch auftreten kann.

Wenn eine Zeile an einem weichen Trennzeichen umgebrochen wird, muss ein Trennstrich am Ende der ersten Zeile stehen. Wenn eine Zeile an einem weichen Trennzeichen nicht umgebrochen wird, darf das Benutzerprogramm keinen Trennstrich ausgeben. In HTML wird der normale Trennstrich durch das '-'-Zeichen repräsentiert. Das weiche Trennzeichen wird repräsentiert durch die Entity-Referenz  (soft hyphen)."

Nach dem Standard macht es also der Internet Explorer falsch, wenn er nach einem normalen Trennstrich eine Zeile umbricht. Allerdings versteht er auch das  und zeigt das weiche Trennzeichen nur an wenn erforderlich. Mozilla und Firefox trennen bei einem normalem Trennstrich korrekter Weise nicht, beherrschen dafür aber das  nicht, dieses Zeichen wird niemals angezeigt sondern schlichtweg ignoriert. Mehr dazu auf Peter-Paul Kochs Testseite mit dem Fazit "Incompatibility soup".

Will man zwischen zwei Worten oder zusammen gehörenden Begriffen einen Zeilenumbruch verhindern, benutzt man das geschütze Leerzeichen   (not breaking space). Das entspricht dem HTML-Standard, funktioniert in allen Browsern wie gewünscht, reicht allerdings wegen der weit reichenden Trennungstendenz des IE oftmals nicht aus.

Der Internet Explorer trennt radikal

Nach den Tests von Jukka Korpela Word division in IE trennt der Internet Explorer unter anderen nach Trennstrichen (Minuszeichen, -), Prozent- (%) und Gradzeichen (°), vor öffnenden und nach schließenden Klammern sowie vor bzw. nach Guillemets (« »). Das ist in den meisten Fällen auch ganz praktisch, besonders für die deutsche Sprache mit ihren langen zusammen gesetzten Bandwurm-Worten.

Aber es gibt auch Probleme mit diesem radikalen Trennungsprinzip. So wird "-35000" eventuell umgebrochen zu "-" und "35000", "Latin-1" zu "Latin-" und "1". Ein "-18°C" kann sogar entweder vor der "18" oder vor dem "C" getrennt werden. Im diesem Fall hilft auch kein Codieren als "-18° C", denn der IE bricht gnadenlos nach dem Gradzeichen und vor dem not breaking space ( ) um und macht die Sache dann mit dem Leerzeichen am Zeilenanfang noch unerfreulicher. Andere Problemfälle sind Ausdrücke wie Person(en), a[0], %20 sowie viele mathematische Formeln, die machmal unerwartet getrennt werden.

Erwünschte Zeilenumbrüche ermöglichen

Ein Web-Designer kann nie wissen, wie ein Besucher seine Webseite erlebt. Er weiss nicht, wie groß dessen Bildschirm ist, wie die Auflösung des Monitors ist, ob das Browserfenster auf Vollbild aufgezogen wird oder nicht, welche Schriftarten installiert sind und ob die Ansicht eventuell vergrößert oder verkleinert wurde. Er kann deshalb überhaupt nicht festlegen, an welchen Stellen sein Text umgebrochen wird. Er sollte aber alles tun, damit der Text lesbar bleibt. Hier sind einige Möglichkeiten, um langen Bandwurm-Wörtern eine möglichst passende Soll-Bruchstelle zu geben:

Die einfachste Methode zur Verhinderung hässlicher Lücken am Zeilenende ist das Vermeiden langer Begriffe. Das hört sich erst einmal gut an, ist aber gar nicht so einfach. Oder es geschieht durch die Vergewaltigung der deutschen Sprache: man macht aus einem Wort einfach mehrere, das hat auch einen Anschein von Modernität. Die Werbefritzen gehen voran und liefern uns den "Sahne Pudding" auch im "Reise Zentrum". Das finden besonders die Lesescheuen ganz toll und so gibt es in "Gabi's Back Shop" neben dem Deppen-Apostroph und dem lächerlichen Denglisch auch noch das Deppen-Leerzeichen. Ein echtes Leer Zeichen für diese Gabi, hoffentlich kann sie wenigstens backen.
Inzwischen im Web verbreitet, aber ästhetisch genau so unschön ist es, lange Worte nicht nur durch legale Bindestriche lesbarer zu gestalten, sondern nach dem Strich auch noch ein Leerzeichen anzufügen. "Rechtschreib- Regel" bricht zwar bei Bedarf in allen Browsern gut um und fällt einigen Schnell- Lesern wohl gar nicht auf, ist aber trotzdem unbefriedigend.
Wie oben schon erwähnt, wird das im HTML-Standard vorgesehene  von einigen Browsern nicht interpretiert. Es macht in vielen Fällen auch gar keinen Sinn, denn die deutsche "Rechtschreib-Reform" ermöglicht uns, lange Worte durch einen Bindestrich lesbarer zu schreiben, das Soft Hyphen wird aber nur bei Bedarf am Zeilenende eingeblendet. Es hilft uns oft also auch nicht weiter, selbst wenn es überall verstanden würde.
Als Alternative wäre  (zero width space = Leerzeichen ohne Breite) möglich, da bei Leerzeichen grundsätzlich ein Umbruch erfolgt. Allerdings ist dieses Zeichen nicht in jeder Schriftart enthalten, was dann zur Darstellung eines häßlichen Kästchens mitten im Wort führt.
Dabei haben die Browser-Hersteller schon seit Jahren das Element wbr (= word break) eingeführt, das zwar weitgehend unbekannt blieb und auch vom W3C nicht in die HTML-Spezifikation aufgenommen wurde, aber genau das überall zuverlässig tut, was besonders wir Deutschen mit unseren langen Wörtern so dringend brauchen: den Zeilenumbruch bei Bedarf. Mit Hilfe dieses Zeichens wird auch die berüchtigte Donau-Dampfschifffahrts-Kapitäns-Mütze und die Auslands-Versicherungs-Police in allen gängigen Browsern sinnvoll getrennt. Doch leider ist das Dokument damit nicht mehr valide.

Man kann leider oft nicht beides haben: ein standardgemäß korrektes HTML-Dokument, das die ästethischen Anforderungen an Fließtext erfüllt. Wofür man sich entscheidet, bleibt jedem selbst überlassen.

Nicht erwünschte Zeilenumbrüche verhindern

Nun zu den Möglichkeiten, einen unerwünschten Zeilenumbruch zu verhindern, vollständig überzeugend sind die meisten von ihnen jedoch auch nicht:

Damit "120 Euro", "50 km/h", "HTML 4" und "Volkswagen AG" lesbar und verständlich bleiben, sollte das nicht umbrechende Leerzeichen   verhindern, dass diese Begriffe durch einen Zeilenumbruch auseinander gerissen werden. 120 Euro ist zwar etwas umständlicher zu schreiben als ein einfaches Leerzeichen und wird darum auf vielen Seiten gerne "vergessen", ist jedoch gültiges HTML und überall problemlos einsetzbar. Aber es deckt eben im Internet Explorer nicht alle oben genannten Fälle ab.
In Tabellenzellen kann man den td und th ein nowrap geben, was einen Zeilenumbruch verhindert. Dieses Attribut gilt zwar als deprecated, vom Gebrauch wird also abgeraten, aber es funktioniert problemlos und ist auch (noch) valide. Aber Vorsicht: es gilt für die ganze Zelle und wenn man nicht aufpasst, kann sie sehr lang werden und horizontales Scrollen notwendig machen.
Die W3C-Standards empfehlen statt dessen die Formatierung durch CSS und dort die Eigenschaft white-space auf den Wert nowrap zu setzen. Aber white-space ist nur bei block-level Elementen wie , <div> oder <td> zulässig und hilft darum für die oben aufgeführten Begriffe nicht weiter. Zwar akzeptieren die gängigen Browser diese Eigenschaft auch für inline Elemente, eine Konstruktion wie -18° C tut genau das was sie soll, die Webseite ist damit aber nicht mehr korrektes HTML im Sinne der Web-Standards.

Nachtrag: Eine Neufassung der CSS 2.1-Spezifikation lässt die Eigenschaft white-space jetzt auch für inline-Elemente zu, das obige Beispiel mit span ist damit nun valide. Allerdings ist es im Gegensatz zum Folgenden auch sehr umständlich zu handhaben.
Wenn ich verhindern will, dass bestimmte Textabschnitte vom Internet Explorer oder den anderen Browsern auseinander gerissen werden, verwende ich das Element, das Netscape schon vor vielen Jahren einführte, inzwischen von allen Browsern interpretiert wird und überall funktioniert, das aber ebenfalls nie in den offiziellen HTML-Standard aufgenommen wurde: nobr (no break). -18° C oder vis-a-vis ist einfach zu verwenden, bewirkt aber auch, dass die Seite nicht mehr valide ist.

Man sieht, es gibt keinen einfachen, den HTML-Standards entsprechenden Weg, den Internet Explorer an unerwünschten Zeilenumbrüchen innerhalb einzelner Begriffe zu hindern. Obwohl ich diesen Browser selber nicht schätze, muss ich akzeptieren, dass 50 bis 70% aller Besucher ihn benutzen. Man kann eben nicht alles haben, und mir sind die Besucher (oder der Auftraggeber) wichtiger als das Kleben an Standards, die für aktuelle Probleme keine befriedigenden Lösungen bieten.

siehe auch: Testseite zur optimalen Zeilenbreite
eine E-Mail zur Rechtschreibung: umgebrochen oder umbrochen?