kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Silbentrennung im Browser mit CSS, HTML oder JavaScript

Zuletzt aktualisiert am 13 Kommentare ,

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, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Allgemeine Infos zur Silbentrennung auf Websites

Es gibt verschiedene Möglichkeiten Silbentrennung auf einer Website einzusetzen – alle mit eigenen Vor- und Nachteilen:

  1. 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.
  2. 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.
  3. 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

&shy; = 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&shy;gerichtsgrundsatzurteil

&nbsp; = Non Breaking Space

Wenn der Umbruch zwischen zwei Wörtern verhindert werden soll, muss ein geschütztes Leerzeichen eingefügt werden.

Jonas&nbsp;Hellwig

Silbentrennung 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.

Beispiel anschauen

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!

Das könnte dich auch interessieren

12 Kommentare

  1. 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ß

    Antworten
  2. Viktoria

    Verfasst am 6. Februar 2012 um 9:16 Uhr.

    Danke für den Tipp. Das ist sehr hilfreich!

    Antworten
  3. 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/

    Antworten
  4. 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.

    Antworten
  5. 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

    Antworten
  6. Frank

    Verfasst am 12. November 2013 um 16:17 Uhr.

    Danke für den Tipp. Das war mir komplett neu! :-)

    Antworten
  7. Lorbas

    Verfasst am 14. November 2013 um 15:34 Uhr.

    Bei GROSSGESCHRIEBENEN Worten wird die Hyp teils automatisch abgeschalten, so zumindest in Firefox beobachtet.

    Antworten
  8. 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.

    Antworten
  9. 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.

    Antworten
  10. 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.

    Antworten
  11. 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

    Antworten
  12. 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

    Antworten

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.