Blocksatz im Web

Wie funktioniert digitaler Blocksatz? Und warum sieht Blocksatz im Web so schlimm aus? Im zweiten Teil unserer Blocksatz-Reihe gehen wir den Chancen und Problemen von digitalem Blocksatz auf den Grund. Warum ist guter Blocksatz im Jahr 2020 immer noch ein Problem?

Blocksatz kommt im professionellen Webdesign bis heute kaum zur Anwendung – und das obwohl eine gleichmäßige rechte Satzkante viele Gestaltungschancen für modulare Designs und verschiedene Bildschirmgrößen bieten könnte. Die Qualität von Blocksatz im Browser ist bisher einfach zu schlecht. Blocksatz im Web geht in der Regel mit ungleichmäßigen, extrem großen Wortabständen einher, die den Satz unprofessionell wirken lassen, sodass unter Webdesignerinnen und Webdesignern oft das Credo gilt, im Web prinzipiell auf Blocksatz zu verzichten.

Die Gründe für die schlechte Blocksatzqualität im Browser sind schnell zusammengefasst:

  1. Die Silbentrennung als wichtiger Faktor für akzeptablen Blocksatz stand im Web lange Zeit gar nicht – oder zumindest nicht problemlos – zur Verfügung.
  2. Die im Browser eingebauten Algorithmen für automatischen Blocksatz schöpfen bis heute nicht alle Möglichkeiten aus, die technisch zur Verfügung stehen würden und im Print-Bereich auch längst zur Anwendung kommen.
  3. Im responsiven Web kann nie von einer festen Spaltenbreite ausgegangen werden. Eine manuellen Korrektur der Satzkante durch Designerïnnen ist also nicht möglich.

In der Praxis führte das dazu, dass Blocksatz im Web bis heute so gut wie gar nicht eingesetzt wird.
Wie kommt digitaler Blocksatz eigentlich zustande und wie können wir von den technischen Möglichkeiten profitieren, um Blocksatz im Web zu verbessern?

Was wir im ersten Teil unserer Blocksatzreihe von Johannes Gutenberg lernen konnten: Die Satzqualität wird durch das Zusammenspiel verschiedener Parameter bestimmt. Je mehr Parameter einbezogen werden, desto weniger muss an jeder einzelnen Stellschraube gedreht werden und desto weniger fällt diese Manipulation auf. Intelligente, vorausschauende Entscheidungen beim Satz und eine vernünftige Gewichtung der Parameter sind der Schlüssel zu gutem Blocksatz. Im Digitalen haben wir weitaus präzisere Werkzeuge als zu Zeiten des Bleisatzes und haben scheinbar Einfluss auf alle möglichen Parameter, die den Satz bestimmen. Warum ist guter Blocksatz im Jahr 2020 trotzdem immer noch ein Problem?

Um diese Frage zu beantworten, lohnt es sich, zunächst einen Blick auf die Grundlagen zu werfen. Ein Thema, das auf den ersten Blick trivial wirkt, in diesem Fall aber zur Gretchenfrage wird: Wie halten wir es mit dem Zeilenumbruch?

Zeilenumbruch

Die Bedeutung von Zeilenumbruch im digitalen Schriftsatz kann nicht überschätzt werden, denn die Wahl der Breakpoints, also der Stellen, an denen ein Text unterbrochen wird, um eine neue Zeile zu beginnen, bestimmen die Qualität jedes Block- oder Flattersatzes. Warum, erklären Donald Knuth und Michael Plass zu Beginn der umfangreichen wissenschaftlichen Veröffentlichung zu ihrem Blocksatzalgorithmus.

»[…] the task of typesetting a paragraph with last century’s technology was conceptually a task of justification; nowadays, however, it is no trick at all for computers to adjust the spacing as desired, so the line-breaking task dominates the
work. […] we shall use the term ›line breaking‹ in this paper to emphasize the fact that the central problem of concern here is to find breakpoints.« [1]

Das Verteilen des übrigen Platzes innerhalb der Zeile, das im Bleisatz noch einen erheblichen Teil des Arbeitswaufwands eingenommen hatte, stellt für den Computer keinerlei Herausforderung mehr dar. Stattdessen sollte die intelligente und vorausschauende Wahl der Zeilenumbrüche in den Fokus unserer Überlegungen rücken.

Traditionelle Blocksatzalgorithmen, vor Knuth und Plass, funktionierten so: Zunächst wird ein Minimum sowie ein Maximum für den Abstand zwischen zwei Wörtern definiert. Der Computer setzt nun Wort für Wort nebeneinander – zunächst mit regulärem Wortabstand. Sobald ein Wort erreicht wird, das nicht mehr als Ganzes in die Zeile passt, greifen folgende Regeln:

  • Wenn das Wort hineinpasst, indem man die Wortabstände verringert (ohne das Minimum zu unterschreiten), vollziehe den Zeilenumbruch nach diesem Wort.
  • Wenn das scheitert, versuche die Wortabstände zu vergrößern (ohne das Maximum zu überschreiten) und vollziehe den Zeilenumbruch vor diesem Wort.
  • Geht diese Rechnung ebenfalls nicht auf, wende Silbentrennung an und versuche so viele Silben wie möglich in der Zeile unterzubringen.
  • Wenn keine Trennmöglichkeit zur Verfügung steht, muss in dieser Zeile der maximale Wortabstand überschritten werden. [2]

Die naheliegendste Stellschraube, an der ein Textverarbeitungsprogramm wie Microsoft Word dreht, um Blocksatz zu erzeugen, ist also zunächst immer der Wortabstand. Wenn das zu einem schlechten Ergebnis führt, gibt es verschiedene weitere Möglichkeiten. Die Veränderung des Zeichenabstandes ist eine schlechte Methode. Abgesehen von den ästhetischen Mangelhaftigkeit wurde das Sperren von Text früher als typografisches Mittel zur Hervorhebung verwendet und könnte deshalb zu Missverständnissen führen. Manche Satzprogramme beziehen deshalb noch weitere Parameter wie Kerning oder optischen Randausgleich mit ein, um die gewünschte Zeilenlänge zu erhalten. Einer der wichtigsten und unverzichtbarsten Faktoren für guten Blocksatz ist die Verfügbarkeit von Silbentrennung.

Silbentrennung

Silbentrennung sorgt in erster Linie dafür, dass mehr Sollbruchstellen für den Zeilenumbruch zur Verfügung stehen und somit die Varianz der Wortabstände im Rahmen bleibt (dass also keine zu großen Löcher im Satz entstehen). Insbesondere bei deutschsprachigen Texten, bei denen mit relativ langen Wörtern gerechnet werden muss, ist Silbentrennung unerlässlich.

Ein wesentliches Problem für Blocksatz im Web war lange Zeit die mangelhafte Verfügbarkeit von Silbentrennung in den Browsern. Dieses Problem ist glücklicherweise inzwischen nicht mehr so relevant, da alle großen Browser die Silbentrennung nativ unterstützen. [3] Eine bessere, noch feinere Kontrolle über die Silbentrennung wäre trotzdem wichtig und ist zum Glück mit der Einführung des CSS Text Module Level 4 ebenfalls abzusehen. [4]

Blocksatzalgorithmen

Oft steht der Computer also vor der Entscheidung: Wortabstände innerhalb der Zeile entweder etwas verringern, sodass das Wort oder die Silbe doch noch in die Zeile passt, oder den Wortabstand etwas vergrößern, sodass das Wort in die neue Zeile rutscht. Im oben genannten Beispiel entscheidet sich der Algorithmus immer für die Variante, die am wenigsten weiße Löcher in der Zeile erzeugt. Jede dieser Entscheidungen hat aber auch Auswirkungen auf die nächste und alle darauf folgenden Zeilen, in denen dann unter Umständen viel größere Löcher entstehen. Daher ist es manchmal sinnvoll, geringe Probleme in einer Zeile in Kauf zu nehmen, um später viel größere Probleme zu vermeiden.

Nun konnte ein Setzer im 15. Jahrhundert zwar im Idealfall einige Zeilen vorausdenken und beispielsweise frühzeitig reagieren, wenn der Platz ausging – die Möglichkeiten des Computers übersteigen diese Art des vorausschauenden Setzens aber bei Weitem. Denn durch systematisches Durchspielen und Bewerten aller möglichen Variationen kann ein Blocksatzalgorithmus heute die optimalen Zeilenumbrüche für eine Textspalte ermitteln – und zwar unter Berücksichtigung all unserer Parameter wie Wortabstand, Silbentrennung, Kerning und optischer Randausgleich.

Der Algorithmus betrachtet also nicht nur einzelne Zeilen, sondern besitzt die Fähigkeit vorauszudenken. Er durchläuft alle denkbaren Konstellationen und misst die jeweilige Abweichung der Wortabstände – für Trennungen gibt es zusätzlich Minuspunkte. Am Ende dieses Prozesses steht dann eine Gewinnerkonstellation und genau diese Zeilenumbrüche werden dann auch tatsächlich auf den Text angewandt.

»Experience has shown that significant improvements are possible if the computer takes advantage of its opportunity to ›look ahead‹ at what is coming later in the paragraph, before making a final decision about where any of the lines will be broken. This not only tends to avoid cases where the traditional algorithm has to resort to wide spaces, it also reduces the number of hyphenations necessary.« [5]

Das bekannteste Beispiel für so einen Blocksatzalgorithmus wurde Anfang der 1980er Jahre von Donald Knuth und Michael Plass entwickelt.

Der Knuth-Plass-Algorithmus wurde damals im Rahmen des ebenfalls hauptsächlich von Donald Knuth entwickelten Textsatzsystems »TeX« umgesetzt. Ein ähnlicher Algorithmus kommt heute aber zum Beispiel auch in Adobe InDesign zum Einsatz. Dort gibt es in den Absatzeinstellungen die Möglichkeit, zwischen dem Adobe Ein-Zeilen-Setzer (= Adobe Single-line Composer) und dem Adobe-Absatzsetzer (= Adobe Paragraph Composer) zu wählen. Letzterer baut auf dem eben ausgeführten Prinzip eines vorausschauenden Entscheidungsalgorithmus auf und bezieht nicht nur eine Zeile sondern den ganzen Absatz in die Wahl der Zeilenumbrüche mit ein.

Screenshot: Blocksatz-Einstellungs-Dialog von Adobe InDesign. Hier kann man den Adobe Paragraph Composer einstellen.

Blocksatz im Web

Vor dem Hintergrund dieser durchaus zufriedenstellenden Lösung für digitalen Blocksatz mittels aktueller Print-Software ist die Blocksatzsituation im Web geradezu katastrophal. Hier kommen mehrere Probleme zusammen. Ganz grundsätzlich sind die Einflussmöglichkeiten von Designerïnnen im Web an gewissen Stellen äußerst eingeschränkt. Wo im Printbereich bei ungünstigem Zeilenfall zur Not noch ein manueller Eingriff möglich ist, bedeutet die Gestaltung fürs Web in dieser Hinsicht einen weitgehenden Kontrollverlust. Webseiten können nicht pixelgenau gestaltet werden, die Ausgabe erfolgt auf etlichen verschiedenen Geräten und der Zeilenumbruch wird erst beim Aufrufen der Webseite individuell vom Browser berechnet. Nachträgliche manuelle Korrekturen im Zeilenfall können also gar nicht vorgenommen werden. Wie in vielen Bereichen des Designs müssen die Gestalterinnen und Gestalter dazu übergehen, allgemeingültige und trotzdem hochflexible Regeln zu formulieren, die dann unter den sich ständig verändernden Rahmenbedingungen das jeweils bestmögliche Ergebnis liefern.

Unverständlich ist aber, dass die Implementierung von Schriftsatz im Web bisher noch weit hinter ihren Möglichkeiten bleibt. Das wichtigste Beispiel dafür: Der ebenso mächtige wie geniale Knuth-Plass-Entscheidungsalgorithmus, der deutlich besseren Blocksatz ermöglichen würde, wurde bisher in keinen der gängigen Browser eingebaut. Während die Satzqualität in Indesign und LaTeX längst von den Vorteilen des Computers profitiert, setzen die Browserhersteller immer noch auf den einfachen »first fit«-Algorithmus. Vor dem Hintergrund, dass auch die automatische Silbentrennung erst seit wenigen Jahren ihren Weg in die Browser gefunden hat, muss man feststellen, dass bisher äußerst schlechte Voraussetzung für Blocksatz im Web herrschten und der Einsatz dieser Satzart deshalb berechtigterweise grundsätzlich nicht zu empfehlen war.

Eine exemplarische Implementierung des Knuth-Plass-Algorithmus für das Web hat der Softwareentwickler und Adobe-Typekit-Manager Bram Stein umgesetzt. Er entwickelte ein Javascript, das sich in jede Webseite einbinden lässt und das automatisch die optimalen Zeilenumbrüche berechnet und anwendet. Da das Skript den eigentlichen Textrendering-Prozess nicht manipulieren kann, sondern den Zeilenumbruch auf einem viel höheren Level nachträglich anpassen muss, eignet sich die Software meiner Meinung nach nur sehr eingeschränkt für den Produktiveinsatz im Web. Das Beispiel zeigt aber auf eindrucksvolle Weise das Potential und dass es ohne Probleme möglich wäre, einen solchen Algorithmus in die Browser einzubauen (zumal die Browserhersteller ja direkten Zugriff auf den Renderingprozess haben und den Algorithmus noch viel besser integrieren könnten). Im Gespräch mit Bram Stein erfahre ich, warum uns diese wertvolle Technik bisher im Web nicht zur Verfügung steht:

»The answer I hear most often is performance. The algorithm is much more expensive than the simple greedy algorithm. Browsers need to recalculate layout much more often than design tools (such as InDesign and TeX) because of changes to the page (i.e. interactive stuff, JavaScript, styles loading, etc.) However, there are some pretty fast (linear-time) implementations of the Knuth/Plass algorithm, so I don’t think that is a very strong argument. Processing power has also increased a lot compared to say, 10 years ago. I think the more likely answer is unwillingness to change something so fundamental to a browser layout engine. Changing the line breaking algorithm will impact pretty much every aspect of the layout algorithms, so implementing it now will be a huge effort.«

 

Blocksatz im Web verbessern

Mit der Einführung von korrekter Silbentrennung in die Browser hört die Verbesserung von Blocksatz im Web jedoch nicht auf. Wir haben gesehen: Im Print-Bereich existieren seit Jahrzehnten Methoden, um Blocksatz zu optimieren. Darüber hinaus laden neue technische Möglichkeiten wie Variable Fonts dazu ein, Blocksatz im Web weiterzudenken. Wie man Blocksatz im Web konkret verbessern könnte, lesen Sie im dritten Teil unserer Blocksatz-Reihe → Besserer Blocksatz im Web .

Dieser Text basiert auf der Masterarbeit von Johannes Ammon mit dem Titel »Blocksatz im Web – Verbesserungen durch Algorithmen und Variable Fonts«. Johannes absolvierte 2019 den Studiengang Gutenberg Intermedia | Type + Code an der Hochschule Mainz.

  1. Knuth, Donald E. und Michael Plass: Breaking Paragraphs into Lines. In: Software: Practice and Experience, vol. 11, 1981, S. 1120
  2. vgl. Knuth, Donald E. und Michael Plass: Breaking Paragraphs into Lines. In: Software: Practice and Experience, vol. 11, 1981, S. 1120
  3. vgl. https://caniuse.com/#feat=css‑hyphens
  4. vgl. https://medium.com/clear‑left‑thinking/all‑you‑need‑to‑know‑about‑hyphenation‑in‑css‑2baee2d89179
  5. Knuth, Donald E. und Michael Plass: Breaking Paragraphs into Lines. In: Software: Practice and Experience, vol. 11, 1981, S. 1120
↑ zum Anfang springen