Silbentrennung im Browser mit CSS, HTML oder JavaScript
Wer im Internet typografisch ansprechende Texte gestalten möchte, hatte es lange Zeit nicht leicht. Mit dem Einzug der Webfonts stehen Webdesignern mittlerweile viele gelungene Schriftarten zur Verfügung und es gibt sogar Möglichkeiten Ligaturen und Kerning im Browser zu aktivieren. Was häufig Probleme bereitet, ist die klassische Silbentrennung, die lange Zeit ebenfalls nur über externe Scripte und Workarounds umständlich zu realisieren war. In diesem Beitrag fassen wir zusammen, welche Möglichkeiten es gibt Silbentrennung im Browser zu verwenden.
Workshops und Seminare von kulturbanause
Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …
Allgemeine Infos zur Silbentrennung auf Websites
Es gibt verschiedene Möglichkeiten Silbentrennung auf einer Website einzusetzen – alle mit eigenen Vor- und Nachteilen:
- Zunächst einmal gibt es HTML-Befehle für verschiedene Umbrüche, die allerdings manuell vom Redakteur an der richtigen Stelle im Text eingetragen werden müssen. Dafür funktionieren die Befehle auch dann, wenn der Content in einer anderen Quelle (z. B. in der Leseansicht des Browsers, oder im RSS-Feed) angezeigt wird.
- Dann gibt es die Möglichkeit die Silbentrennung per CSS zu aktivieren. Hier sollte beachtet werden, dass der Browser-Support sehr fragmentiert ist. Ihr solltet euch daher nicht darauf verlassen, dass es funktioniert.
- Zuletzt gibt es JavaScripte die Silbentrennung ermöglichen. Meistens funktionieren die Skripte so, dass per JavaScript automatisch die o.g. HTML-Umbrüche an der richtigen Stelle eingefügt werden. Ihr solltet beachten, dass viele Skripte Probleme mit Webfonts haben, die Ligaturen unterstützen.
Silbentrennung in HTML
HTML selbst verfügt über keine automatische Silbentrennung. Da lange Wörter im Layout oft zu Problemen führen, sollte der Redakteur für solche Wörter manuell die Silbentrennung einfügen. Dazu existieren folgende HTML-Befehle:
<wbr> = Word Break
Das Wort wird umgebrochen, wenn nicht ausreichend Platz zur Verfügung steht. Die Trennung erfolgt ohne Trennstrich.
Bundesverfassungs<wbr>gerichtsgrundsatzurteil­ = Soft Hyphen
Das Wort wird umgebrochen, wenn nicht ausreichend Platz zur Verfügung steht. Die Trennung erfolgt mit Trennstrich. Es existieren Tools um den weichen Umbruch automatisch hinzuzufügen.
Bundesverfassungs­gerichtsgrundsatzurteil = Non Breaking Space
Wenn der Umbruch zwischen zwei Wörtern verhindert werden soll, muss ein geschütztes Leerzeichen eingefügt werden.
Jonas HellwigSilbentrennung per CSS
Um die Silbentrennung per CSS zu aktivieren, muss die Eigenschaft hyphens verwendet werden:
body {
hyphens: auto;
}
Damit die Silbentrennung auch wie gewünscht umgesetzt wird, muss zwingend der HTML-Language Code (w3schools.com/tags/ref_language_codes.asp) korrekt angegeben sein. Ansonsten wird nach einer falschen Sprache getrennt, was u. U. schlimmer ist als gar keine Trennung.
Informationen zum Browser-Support findet ihr auf HTML5Please und auf Can I Use. Wenn ein Browser keine Silbentrennung unterstützt, werden die Wörter in diesem Browser nicht getrennt. Das ist meistens zu verkraften.
Fallbacklösung für inkompatible Browser
Häufig ist die Silbentrennung gewünscht, da der Text im Blocksatz formatiert werden soll. In diesem Fall bietet es sich an, die @supports-Regel von CSS einzusetzen.
Wie ihr @supports im Zusammenhang mit Silbentrennung und Blocksatz einsetzen könnt, haben wir hier beschrieben.
Silbentrennung per JavaScript
Wie eingangs erwähnt, gibt es zahlreiche JavaScripte, die Silbentrennung ermöglichen, indem die notwendigen HTML-Befehle an der richtigen Stelle automatisiert eingefügt werden. Empfehlenswerte Bibliotheken haben wir hier zusammengetragen.
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
oliver
Verfasst am 4. Februar 2012 um 16:29 Uhr.
Nette Idee, probier ich mal aus. Ich denke gerade über Blocksatz vs. Flattersatz nach und ohne Silbentrennung schaut Blocksatz unprofessionell aus.
Gruß
Viktoria
Verfasst am 6. Februar 2012 um 9:16 Uhr.
Danke für den Tipp. Das ist sehr hilfreich!
Lvn
Verfasst am 23. Februar 2012 um 10:48 Uhr.
Der „hyphenator“ ein „Javascript that implements client-side hyphenation of HTML-Documents“ hilft hier weiter. Infos hier: http://code.google.com/p/hyphenator/
Jannis Gerlinger
Verfasst am 23. Mai 2012 um 12:35 Uhr.
War nur noch eine Frage der Zeit bis auch diese Funktion in CSS implementiert wird.
Tobias
Verfasst am 5. April 2013 um 17:07 Uhr.
Ich benutzte die automatische Silbentrennung schon länger in meinem Blog. Aber schade ist das Google Chrome (vor allem die Version für Android) CSS-Hyphens immer noch nicht unterstützt. Gerade bei Websites mit Responsive Webdesign, würde die Lesefreundlichkeit auf Smartphones und Tablets deutlich steigen.
Sieht schlecht aus für Chrome:
http://caniuse.com/css-hyphens
Frank
Verfasst am 12. November 2013 um 16:17 Uhr.
Danke für den Tipp. Das war mir komplett neu! :-)
Lorbas
Verfasst am 14. November 2013 um 15:34 Uhr.
Bei GROSSGESCHRIEBENEN Worten wird die Hyp teils automatisch abgeschalten, so zumindest in Firefox beobachtet.
Klaus Busch
Verfasst am 14. Januar 2014 um 15:21 Uhr.
Genialer Tip!!!!!
Finde ich wesentlich besser, als das mittels plugins zu lösen. Die machen das System nur unnötig kompliziert und fehleranfällig. So bleibt alles schön übersichtlich.
Interessant finde ich, das Deine Lösung tatsächlich weitestgehend unbekannt ist. Ich selbst bin auch nur nach intensiver Beschäftigung mit dem Thema auf Deine site gestossen.
Martin Piontek
Verfasst am 3. April 2014 um 13:41 Uhr.
@Tobias: Ich kenne das Problem. Bei besonders langen Wörtern (vor allem in Headlines) nutze ich dafür notfalls ein – & s h y ; – direkt im Quellcode. Das markiert eine Sollbruchstelle für Wörter, an der nur bei Bedarf mit einem Bindestrich getrennt wird.
David Hellmann
Verfasst am 28. August 2014 um 17:08 Uhr.
Zufällig hier gelandet :D
Blöd nur wenn man teilweise in zwei Sprachen seine Seite betreibt dann wird das wohl eher schwierig mit den Trennungen.
Tobias Buschor
Verfasst am 23. März 2016 um 17:41 Uhr.
Hier der Link um dem Chrome-Bug einen Stern zu geben:
https://bugs.chromium.org/p/chromium/issues/detail?id=47083
Lukas
Verfasst am 7. Dezember 2016 um 22:48 Uhr.
Danke für den ausführlichen und informativen Artikel. Vielleicht kannst du noch ergänzen, dass Firefox ab Version 43 keinen Prefix mehr benötigt.
Mfg Lukas
Im-chaos-daheim.de
Verfasst am 24. August 2018 um 12:08 Uhr.
Das wbr erscheint mir nicht zielführend, da der strich fehlt (oder, Screenshots wären super).
Da ich nun das erste richtig lange Wort auf der Homepage habe, probiere ich das shy mal aus.