Worttrennung im Web

Nach einer längeren Pause melden wir uns mit einem Thema zurück, welches insbesondere Grafiker und Webdesigner interessieren könnte: Worttrennung im Web.

Grosse Lücken durch lange Wörter

Wer Texte im Web darstellen möchte, hat sich meistens damit abgefunden, diese im Normalfall linksbündig darzustellen. Obwohl CSS den Blocksatz mittels text-align: justify; ermöglicht, ist dieser im Web eher die Ausnahme, da hierdurch grosse Lücken im Text entstehen können. Insbesondere im Deutschen können relativ lange Wörter vorkommen, die dieses Problem hervorrufen. Im Beispiel haben wir einen Hipster Ipsum Text noch zusätzlich mit ein paar besonders langen Wörtern ausgeschmückt, um den Effekt klarer zu verdeutlichen. Der linksbündige Text ist nicht unbedingt optisch ansprechender, aber dennoch besser lesbar als der Blocksatz:

Linksbündig und Blocksatz gegenübergestellt

Natürlich ist dieses Beispiel etwas auf die Spitze getrieben. In Office-Dokumenten ist die Zeilenlänge üblicherweise so gross (z.B. DIN A4), dass dieser Effekt vernachlässigt werden kann. Generell ist es für den Druck meistens möglich, lange Wörter gezielt zu trennen, um solch grosse Lücken zu vermeiden. Im Web dagegen, wäre eine Situation wie im Beispiel oben denkbar. Insbesondere wenn der Text in mehreren kleinen Spalten oder auf einem Smartphone dargestellt wird, also in der Breite beschränkt ist. Zudem ist mit variablen Spaltenbreiten im responsive design nicht vorhersehbar, welche Wörter am Zeilenende stehen, also händisch getrennt werden sollten.

Office Programme bieten schon lange die Möglichkeit ein Dokument durchzugehen und lange Wörter zu trennen. Dies war im Web lange Zeit nicht so einfach möglich. Inzwischen gibt es aber verschiedene Lösungen für das Problem.

1. Worttrennung mit JavaScript

Wie so oft gibt es auch hier Lösungen mit JavaScript. Das Hyphenator.js* von Mathias Nater ermöglicht es, automatisierte Worttrennung auf einer Website zu implementieren. Das Script funktioniert indem es sogenannte soft hyphens in den Text einbaut. Soft hyphens werden als HTML entity via ­ eingesetzt. HTML weiss somit, dass ein Wort an dieser Stelle getrennt werden kann. Hyphenator.js setzt also nach einem Algorithmus an jeder Stelle ein soft hyphen, an dem ein Wort getrennt werden könnte. Der Browser trennt dann Wörter dort, falls ansonsten zu grosse Leerstellen entstehen. Die Ausgabe des Hyphenator.js sieht dann beispielsweise so aus:

Soft hyphens durch Hyphenator eingesetzt

Schlauerweise wird dieses Skript nur aktiv, falls keine automatisierte Worttrennung mittels CSS unterstützt wird.

2. CSS Hyphenation

Denn inzwischen unterstützen die meisten Browser Worttrennung mit Hilfe einer einfachen CSS-Anweisung:

p {hyphens: auto;}

Der Wert auto ist hier relativ neu und wird noch nicht überall unterstützt. Can I use gibt hierüber Aufschluss:

Viele Browser unterstützen hyphens auto im CSS

Wie man sieht ist dies die grosse Ausnahme der Regel denn während sowohl IE11 und Edge diese Anweisung interpretieren können, funktioniert das auto bei Chrome bis dato nicht. Aus diesem Grund würde das Hyphenator.js in Firefox, Safari und Co gar nicht erst zum Zuge kommen, in Chrome dagegen schon. Unser erstes Beispiel schaut mit der automatischen Worttrennung nun so aus:

Linksbündig, Blocksatz, Blocksatz mit Worttrennung gegenübergestellt

Fazit

Worttrennung im Web ist inzwischen nicht mehr das Tabuthema, das es einmal war. Auch wenn Chrome die CSS-Anweisung noch nicht unterstützt, kann man davon ausgehen, dass diese Funktion noch kommen wird. Bis dahin kann man sich noch mit Skripten wie Hyphenator.js behelfen.

Haben Sie Erfahrung mit Worttrennung im Web, oder möchten Sie mehr zum Thema erfahren? Nehmen Sie doch einfach Kontakt mit uns auf oder hinterlassen Sie einen Kommentar.

 

*  Da Hyphenator.js inzwischen etwas in die Jahre gekommen ist, wird gerade an dessen Nachfolger gearbeitet. Hyphenopoly steckt allerdings noch in den Kinderschuhen der Beta Phase und sollte nicht auf Live-Seiten eingesetzt werden.

 

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.