Flattersatzausgleich bei mehrzeiligen Überschriften mit balanceText.js
Für das Redesign meiner Webseite suchte ich vor kurzem nach einer Möglichkeit, über mehr als eine Zeile laufende Überschriften automatisch auszugleichen, also unter ästhetischen Aspekten umzubrechen. Dabei stieß ich auf das bereits 2013 veröffentlichte Polyfill balanceText.js des Adobe-Entwicklers Randy Edmunds. Dieses Script ermöglicht einen automatischen Flattersatzausgleich bei Überschriften und Absätzen.
Während DTP-Programme wie Adobe InDesign über einen sogenannten Flattersatzausgleich verfügen, haben selbst moderne Browser – auch nicht per CSS3 – ein solches Feature. Momentan ist es eher so, dass ein beliebiger Browser bei der standardmäßigen Darstellung von Text so lang Wörter in eine Zeile eines HTML-Elements packt, bis kein Wort mehr in diese Zeile passt. Anschließend setzt der Browser einen Zeilenumbruch und fährt so lang mit diesen Schritten fort, bis der vollständige Text untergebracht ist. Dies kann bei Überschriften zu merkwürdigen Gebilden führen, bei denen sich die erste(n) Zeile(n) einer mehrzeiligen Überschrift über die volle Breite ihres Elements erstrecken, in der letzten Zeile dann aber nur ein oder zwei Wörter stehen, was ein unruhiges Schriftbild ergibt und dem Lesefluss abträglich ist.
Eine Möglichkeit Überschriften auszugleichen ist das händische Einfügen von <br class="umbruch"> in den Wortzwischenräumen. Zusätzlich wird hier eine Ausblendung der Zeilenumbrüche per display:none an definierten Breakpoints per Media Query benutzt. Dieser Weise stehen aber unter anderem große Webseiten und die Generierung dynamischer Seiten entgegen. Zudem benötigt der Artikelersteller gestalterisches Geschick und Erfahrung mit CSS und Media Queries, sowie Zeit und Geduld für jede einzelne Überschrift. Hier setzt balanceText.js an, indem es selbstständig eine möglichst gleichmäßige Verteilung der Wörter anstrebt und das Setzen von Zeilenumbrüchen abnimmt. Die Verwendung ist total einfach und eignet sich gut in Kombination mit jQuery. Zudem lässt sich das Script ohne viel Aufwand in bereits bestehende Projekte einbauen. Nachdem das JavaScript eingebunden ist, kann es mit einer der folgenden Zeilen eingesetzt werden:
// Überprüfe DOM-Elemente, die die CSS-Klasse 'balance-text' besitzen:
balanceText();
// Überprüft DOM-Elemente des angegebenen Typs:
balanceText($('DOM-Element'));
// Überprüft DOM-Elemente des angegebenen Typs und aktualisiert Fenstergrößenänderungen:
balanceText($('DOM-Element'), {watch: true});
Hier ein Live-Beispiel, wie es ohne balanceText.js aussehen würde (das Browserfenster eventuell skalieren, um eine Veränderung beobachten zu können):
Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam nonumy
Und hier noch einmal der Text mit balanceText.js:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam nonumy
Es ist sicher keine perfekte Lösung, aber zumindest ein kleiner Beitrag zu einer schöneren und angenehmer lesbaren Website. Im Übrigen hat Randy Edmunds ein Proposal eingereicht, mit dem in einer späteren Iteration von CSS der Textausgleich per CSS-Eigenschaft text-wrap:balance gelöst werden kann.