SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

Zeilenumbruch ist ein längst gelöstes Problem. Oder doch nicht?

Das Problem bei Zeilenumbrüchen ist, dass man sie nicht immer dem Browser überlassen möchte. Bei normalem Fließtext, wie in diesem Absatz, ist das kein Problem und da macht er es auch – zumeist – hübsch genug, aber es gibt auch Situationen, wo der Standardumbruch einem Schriftsetzer die Schamröte ins Gesicht treibt.

Es ist schwierig, die Problematik im Browser vorzuführen, weil ich den von Dir genutzten Font nicht kenne. Aber versuchen wir es einmal. Ein Problem ist beispielsweise, wenn im Text sehr lange Wörter auftauchen, wie der Donaudampfschifffahrtskapitänmützenbandorden. Der kann zu einer sehr kurzen Textzeile führen und ein weißes Loch in den Absatz reißen. Ein "hübscher" Umbruch würde versuchen, die Zeilen davor etwas früher umzubrechen und damit mehr Text vor den Donau...orden zu bringen.

Genauso unschön ist es, wenn das letzte Wort eines Absatzes alleine auf seiner Zeile gesetzt wird.

Hier hilft die seit Mai 2024 als Baseline gesetzte CSS Eigenschaft text-wrap (ausführlich hier im Wiki) weiter. Ihr Normalwert ist auto, was dem herkömmlichen Umbruch entspricht.

Des weiteren kennt sie den Wert balance, was beispielsweise bei Tabellenüberschriften helfen kann. Warum sollte eine Spaltenüberschrift beispielsweise als

	Vertriebsumsätze im  
	September

gesetzt werden? Schöner ist

	Vertriebsumsätze  
	im September

Das kann man auch durch ein manuelles <br> erreichen, sicher. Aber dann muss man ständig darauf aufpassen. Mit text-wrap: balance; kümmert sich der Browser darum.

Und das Donau...orden-Problem könnte sie auch lösen. Ja, sicher, der erste Lösungsansatz muss sein, das Wortmonster großzügig mit ­ anzureichern, um Trennchancen zu eröffnen, oder generell mit hyphens die automagische Silbentrennung einzuschalten.

Durch einen etwas knapperen Umbruch der ersten Zeilen entsteht dies:

Es ist schwierig, die Problematik im Browser vorzuführen, weil ich den von Dir genutzten
Font nicht kenne. Aber versuchen wir es einmal. Ein Problem entsteht beispielsweise
dann, wenn im Vorführtext viel zu lange Wörter auftauchen, wie der Donaudampfschifffahrtskapitänmützenbandorden. Der kann zu einer sehr kurzen Textzeile führen und ein weißes Loch in den Absatz reißen. Ein "hübscher" Umbruch würde versuchen, die Zeilen davor etwas früher umzubrechen und damit mehr Text vor den Donau...orden
zu bringen.

Viel besser ist es nicht, aber das Loch ist immerhin etwas kleiner geworden (und ja, ich musste den Text leicht abändern, weil die Kursivschrift eine andere Laufweite hat als die Normalschrift 😉)

Leider ist pretty-Formatierung aufwändig und die Browser geben sich nicht unbedingt die größte Mühe damit. Die gezeigte „Lückenverkleinerung“ wird beispielsweise von Chrome nicht automatisch ausgeführt. Dass das Wort "zu" in der letzten Zeile landet statt in der vorletzten – wo Platz dafür wäre – hingegen schon.

Im verlinkten Wiki-Artikel befindet sich eine kleine Demonstration, wie dein Browser auf pretty reagiert. Spiele etwas mit der Fensterbreite, um zu sehen, ob etwas passiert, und was passiert.

Vielen Dank an Gunnar Bittersmann, dass er meine Nase auf diese Eigenschaft gestoßen hat. 👏

Rolf