Strichlein Strichlein ganz an Rand: Silbentrennung in Webseiten

CSS Silbentrennung in HTML-Seiten

Mit CSS3 hyphens nähert sich die Silbentrennung in HTML-Seiten auf leisen Sohlen: Firefox und Safari ( – Mac OS X Lion; also Katzenpfötchen – ) trennen Silben auf die sanfte Tour. Silbentrennung ist die Grundlage für einen ausgeglichenen Blocksatz und Spaltensatz.

Eine anständige Silbentrennung ist wohl so ziemlich das Letzte, um das sich die Browser kümmern. Im Englischen gibt es nun einmal nicht so viele lange Wörter wie im Deutschen, und obendrein muss ein Browser die Wörter in allen Sprachen trennen oder die Algorithmen des Betriebssystems heranziehen.

p { hyphens: auto; }
Silbentrennung und Blocksatz Print vs. WebseiteAutomatische SilbentrennungKleinstes WortMinimum vorMinimum nachAuch bei GroßschreibungTrennungen in FolgeSilbentrennzone623Unbegrenzt15 mmBlocksatzmethodeAbstandZeichen85%110%200%Bündigkeitszone3 mmErzwungener Blocksatz0%0%0%Silbentrennung und BlocksatzStandardName

Ohne hyphens

Sehen wir uns nur einmal die Einstellungsoptionen in prominenten hyperprofessionellen Satzprogrammen an, um eine oberflächliche Idee zu bekommen, was die Silbentrennung alles so mit sich bringt.

Wir würden vor Fragen wie »Silbentrennung auch bei Großschreibung« gestellt und müssten entscheiden, ob Ei-er außerhalb der Küche getrennt werden dürfen und wieviele aufeinander folgende Trennzeichen erträglich wirken.

Mit hyphens

Sehen wir uns nur einmal die Einstellungsoptionen in prominenten hyperprofessionellen Satzprogrammen an, um eine oberflächliche Idee zu bekommen, was die Silbentrennung alles so mit sich bringen könnte.

Wir würden vor Fragen wie »Silbentrennung auch bei Großschreibung« gestellt und müssten entscheiden, ob Ei-er außerhalb der Küche getrennt werden dürfen und wieviele aufeinander folgende Trennzeichen erträglich wirken.

Damit die Silbentrennung auch tatsächlich funktioniert, muss natürlich die Sprache der Seite gesetzt sein:

<html lang="de">

Zurzeit muss auch noch der Browser-Präfix herhalten, also

p { 
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}

Firefox und Safari trennen schon seit 2011 Küchenschürzen, Sahnetörtchen und Orangenlimonade. Chrome hinkt ja immer ein wenig hinterher (oder soll ich sagen: Die Entwickler verweigern gerne alles, was ihnen nicht geheuer ist?) und auch Opera will »Einstellungsoptionen« nur am Stück herausgeben und trennt genauso wie Chrome auch vier Jahre nach der Erstveröffentlichung dieses Beitrags nicht freiwillig.

Silbentrennungen in Folge

Nach einer längeren Anlaufphase kommen jetzt auch die Feinheiten wie die Zahl von Silbentrennungen in Folge (hyphenate-limit-lines: 2) und die Zahl der Buchstaben im Wort, bei der getrennt werden darf (hyphenate-limit-chars: auto 5).

p {
hyphenate-limit-chars: auto 5;
hyphenate-limit-lines: 2;
}

Alles zurzeit nur mit Browserpräfix!

Seit Version 10 macht auch Internet Explorer den Strich am Rand mit und unterstützt die Silbentrennung mit CSS hyphens.

wbr word break – Silbentrennung ohne Trennstrich

HTML5 trägt ebenfalls zur Silbentrennung bei – und zwar mit dem wbr-Tag. Ein wbr ist ein Vorschlag, wo der Browser ein langes Wort trennen soll. Im Gegensatz zum altgedienten &shy; (hat das überhaupt schon mal jemand benutzt?) trennt das <wbr> ohne den Trennstrich.

Wozu ein <wbr>-Tag gut ist? Damit kann der Browser lange Zeichenketten trennen, ohne zweideutige Bindestriche einzusetzen – etwa bei Adressen von Webseiten.

Ohne wbr, ohne hypens

Pseudo-Elemente auf http://www.mediaevent.de/javascript-pseudo-element/
CSS background-size: http://www.mediaevent.de/css/background-size.html
SVG mit SMIL: http://www.mediaevent.de/svg-smil-animationen/

Mit wbr, ohne hypens

Pseudo-Elemente auf http://www.mediaevent.de/javascript-pseudo-element/
CSS background-size: http://www.mediaevent.de/css/background-size.html
SVG mit SMIL: http://www.mediaevent.de/svg-smil-animationen/

Firefox, Safari und sogar Chrome spielen beim wbr mit, IE10 beherrscht zwar die Silbentrennung, aber bockt beim wbr-Tag.

Und warum sollte man ab und zu ein &shy; setzen?

Ohne Silbentrennung
Wem schiebt man bei sollten Unglücksfällen die Schuld in die Schuh? Dem Webdesigner, dem Autor oder dem Auftraggeber?

Beim Satz von Zeitungen und Büchern prüft der Setzer alle Beiträge, ob die Silbentrennung aus Quark oder InDesign gut lesbare Trennungen erzeugt. Wenn nicht, dann wird händisch nachgearbeitet – eine Sorgfalt, die wir für Webseiten selten aufbringen.

Mehr zu Silbentrennung und Blocksatz

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

35 thoughts on “Strichlein Strichlein ganz an Rand: Silbentrennung in Webseiten”

  1. Sirruddy – 12. September 2015

    So ein quatsch! Silbentrennung von Hand ist bei der Thematik ja wohl kontraproduktiv. Wie machen das Deine „professionellen Seiten“ denn bei responsiven Layouts???

    Gruß
    SirRuddy

    • Haessler – 13. September 2015

      Hi SirRudy,
      also: HTML und CSS sind nicht auf Webseiten beschränkt, sondern sind auch Basis für eBooks.
      Auf Webseiten setzen wir »Cards«, z.B. Preiskarten, in denen ein »Fahrradsattel« schon mal mit der Hand getrennt wird, um den Kasten nicht zu sprengen – wenn der Redakteur sorgfältig arbeitet.

  2. Haessler – 11. August 2015

    R.Parsiegla: Blocksatz in Windows7? Internet Explorer?

  3. R.Parsiegla – 10. August 2015

    Können Sie mir bitte weiterhelfen bei der Einrichtung von Blocksatz
    in windows 7 ? Bei mir klappt gar nichts.

    Danke !!!!!!!

  4. Haessler – 4. April 2015

    Alle Achtung! Ich mache das auch manchmal, wenn es zu sehr »flattert«. Professionelle Seite sind daran gewöhnt, dass sie jede Zeile sorgfältig bearbeiten und viele Trennungen per Hand nacharbeiten.

  5. Horst – 3. April 2015

    ­ (hat das überhaupt schon mal jemand benutzt?)

    Ja, weil ich gerne Text mit justify als Blocksätze ausrichte und da einzelne Zeilen mitunter in einem Browser sperrig aussehen, im anderen hingegen nicht, füge ich bei diesen Sätzen an entsprechender Stelle halt ein shy ein.

  6. Marco – 4. März 2015

    Hallo,

    vielen Dank für diesen Beitrag, jetzt konnte ich mit Hilfe des Hinweises auf den hyphens CSS Befehl endlich meine nervigen Auto Trennungen in Firefox beseiteigen, das sah so schlimm aus, war aber Teil der Einstellungen meines verwendeten Grundthemes. Ich kannte den hyphens css Befehl vorher gar nicht. Habe nun alles auf „None“ gesetzt.

    Vielen Dank
    LG
    Marco

    • Haessler – 4. März 2015

      Ja, das ist schon witzig: Immer wenn CSS oder HTML uns etwas bringen, worauf wir so lange gewartet haben, brauchen wir es nicht mehr. Silbentrennung ist ein gutes Beispiel: Im Blocksatz im Print unersetzlich, aber auf Webseiten haben wir Platz ohne Ende und nutzen ihn jetzt auch endlich. Flattersatz kommt edel … hat mir der Setzer in der Druckerei vor 20 Jahren noch beigebracht.

  7. Thor Duisenberg – 11. Februar 2015

    Probiert es mal so:

    Tragt in das HTML-Tag lang = „de_DE“ ein. Dann klappts!

    In Worten, falls WordPress meinen Kommentar zerstümmelt:

    Spitze Klammer auf
    Wort: html
    Leerzeichen
    Wort: lang
    Gleichheitszeichen
    Anführungsstriche
    Bezeichnung: de_DE
    Anführungszeichen
    Spitze Klammer zu

    Falls WordPress meinen Kommentar in Ruhe lässt, sollte es so aussehen:

  8. Michael Schwenck – 9. Februar 2015

    Nachtrag: Ei ei, ich habe die „shy“ und „wbr“ nicht maskiert, deshalb fehlen sie in meinem vorigen Beitrag 😉

  9. Michael Schwenck – 9. Februar 2015

    Hallo,

    darauf habe ich als alter Schriftsetzer lange gewartet, aber es funktioniert wirklich, ich bin begeistert. Ich habe es testweise auf einer privaten Website eingesetzt, und wir beginnen, es auch in der Produktion einzusetzen. Es gibt schon kleine Unterschiede zwischen den verschiedenen Browsern, aber bisher hat noch keiner der moderneren Browser das Trennen verweigert.

    Noch eine Anmerkung zu &wbr; und &shy;: Wir haben den Trennvorschlag &shy; seit Jahren in der Produktion in unserer CMS-Eigenentwicklung „Redax“ erfolgreich eingesetzt, sogar über ein Script, das ein Wörterbuch ausliest und die ­-Entities setzt. Wozu soll eine Verbesserung sein? Trennung ohne Trennstrich? Das ist doch Banane!

    Gruß
    Michael Schwenck

    • Haessler – 11. Februar 2015

      #Michael Schwenk: Das &wbr; ist wohl für die englischsprachige Welt, aber auch für lange wissenschaftliche Begriffe gedacht, die ohne Trennzeichen in zwei Zeilen stehen sollen, für lange Links wie wwww.meineseitemitdemlangenNamen.de/unddannnochwasdahinter damit der Satz nicht flattert wie Patternsons Hühner. Und am Ende für Texte, die kopiert werden sollen: z.B. für damit sich in Emailadressen keine Bindestriche einschleichen.
      Vielen Dank für die Bestätigung, dass die Silbentrennung gut arbeitet!

  10. Duisenberg – 28. Oktober 2014

    Hi! War schon am Verzweifeln, weil es nicht klappen wollte. Statt funktioniert es hiermit:

    Gruß vom Thor

  11. Rob – 15. Oktober 2014

    Ich kämpfe auch gerade mit dem Problem der Silbentrennung. Leider funktioniert das hier Gezeigte bei mir nicht. Aber trotzdem schön zu sehen, dass es dieses Problem wirklich gibt. Ich dachte schon ich bin blöd :-).

  12. Stephan Heuscher – 10. Januar 2014

    Kleine Verbesserung: Bei „-hyphens: auto;“ braucht es kein „-„. Es sollte also „hyphens: auto;“ heissen.

    Wenn/Falls ein Browser dann endlich den Standard umsetzt funktioniert’s dann wirklich.

    Gruss

    Stephan

  13. André-Johann – 10. Januar 2014

    Nachdem ich wieder einmal zu diesem Artikel zurückgekehrt bin — eigentlich sollte ich die Anweisungen für die Silbentrennung ja langsam im Kopf haben — ist mir ein möglicher kleiner Fehler aufgefallen:

    Wie Stephan Heuscher richtig bemerkte, muss vor die Browser-spezifischen Attribute immer ein Strich, NICHT aber vor das Standard-Attribut. Soweit ich mich nicht irre, müsste es also heißen:

    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

    Zu Tobias‘ Anmerkung bezüglich Chrome ist zu sagen, dass der Google-Browser nicht länger auf Webkit basiert, sondern auf einer Google-eigenen „Fork“ desselben. In der aktuellen Version unterstützt die Mutter aller Webkit-Browser (Safari) zumindest auf dem Mac die Silbentrennung sehr wohl.

  14. Paul – 17. Dezember 2013

    Danke für den Artikel! Genau das habe ich gesucht.

  15. Haessler – 8. April 2013

    +Tobias: Dein Kommentar hat mich erinnert, dass ich die Silbentrennung für diese Seite wieder einschalte … und tatsächlich: Ich habe gar nicht mitbekommen, dass Chrome keine Silbentrennung unterstützt. Verstehe ich eigentlich nicht, denn Chrome ist ein Webkit-Browser. Oder gehört das zu den winzig kleinen Eckchen, in denen Chrome sich seine Geschwindigkeit aufbohrt?

  16. Tobias – 5. April 2013

    Schade das Google Chrome (vor allem die Version für Android) die automatische Silbentrennung mit CSS-Hyphens immer noch nicht unterstützt. Gerade bei Websites mit Responsive Webdesign, würde die Lesefreundlichkeit auf Smartphones und Tablets deutlich steigen. Schliesslich ist das jetzt auch schon ein paar Jahre her, als Mozilla diese Funktion eingeführt hat.

  17. Voxs – 26. Oktober 2012

    Korrektur:

    … Musste jedoch erst dem WP-Theme beibringen, anstelle von dem per php eingebundenen „language attributes“ auch das gewünschte „html lang=de“ auszugeben. …

  18. Voxs – 26. Oktober 2012

    Sehr schön, danke für den Tipp!

    Safari 5.0.6 (Mac) und FF 15.01. (Mac) machen’s – interessant die kl. Unterschiede zu beobachten 🙂

    Musste jedoch erst dem WP-Theme beibringen, anstelle von <html > / auszugeben.

  19. Häßler – 9. September 2012

    Danke für den Hinweis! Irgendwann wird doch alles besser …

  20. amon – 7. September 2012

    Hallo, ich wollte nur anmerken, dass die Unterstüzung für Silbentrennung inzwischen wesentlich besser aussieht. So funktioniert unter FF15 (getestet unter GNU/Linux Kubuntu 11.10) die Trennung einwandfrei. Bei anderen Browsern werden wir aber wohl noch warten müssen.

  21. Stephan Heuscher – 10. August 2012

    Hallo Ina

    Deine Lösung hat bei mir nicht funktioniert. Das Internet weiss Rat (immer ein „-“ davor):
    -moz-hyphens:auto;
    -webkit-hyphens:auto;
    -o-hyphens:auto;
    -ms-hyphens:auto;
    hyphens:auto;

    Grüsse

    Stephan

  22. admin – 16. April 2012

    Ich bin so langsam zu einer Trennung VON Firefox bereit …
    aber davon abgesehen hat mein altes Notebook auch noch das letzte Betriebssystem und nach irgendeinem Update gäbe es dort dann auch Trennungsfreude. Ich nehme mal an, die Browser nutzen das Dictionary und die Silbentrennung des Betriebssystems.

  23. Philipp – 16. April 2012

    Oh, das sind ja schöne Nachrichten. Firefox 11 ist übrigens schon unter Snow Leopard zum Trennen bereit (ja, auch ich bin kein „early“ adopter).

  24. Georg – 25. März 2012

    Hallo Ina,

    probiere es doch mal mit Sprachattributen für die englischen Beiträge:

    http://www.w3.org/International/questions/qa-css-lang.en.php

    Georg

  25. Ina – 18. März 2012

    Hallo Ulrike,

    was mach ich mit meinem Blog, wo ich teilweise auch englische Beiträge habe? Dort wird naturgemäß falsch umgebrochen 😐 Hier ein Beispiel: http://littlejamie.com/?id=623

    Hast du dafür eine Lösung?

    Danke im voraus
    Ina

  26. der_simon – 2. Januar 2012

    Heureka!

    Ich hab den Fehler! Ich habe einfach deine Auszeichnungen oben kopiert und übernommen. Da fehlt überall das Minus vor den proprietären CSS-Eigenschaften.

    Blöder Fehler… Nun geht’s 🙂

    Gruß

    Der Simon

  27. der_simon – 30. Dezember 2011

    Nun bin ich komplett verwirrt…
    Ich habe Lion und es funktioniert nicht. Wo und mit welchem Browser funktioniert es denn nun?

    Gruß

    Der Simon

  28. Häßler – 28. Dezember 2011

    Lion ist das aktuelle (?! 23 €) … und dabei bin ich doch immer die letzte im Stall, die ein Update installiert. Selbst mein Nachbar im Dörfchen ist immer vor mir bei der neusten Version.
    Warum nur unter Lion?
    Vielleicht, weil das Dictionary für die Silbentrennung im Betriebssystem liegt? Zuhause sehe ich mal nach. Für mich ist Silbentrennung ein größeres Ding als border-radius. Oh: All die berufsbegleitenden Ausbildungsförderungsmaßnahmen.

  29. der_simon – 28. Dezember 2011

    Ich verstehe nicht… Geht das etwa unter (Snow) Leopard? Ich dachte eher, dass es in neueren Versionen besser geht als in alten?

    Gruß

    Der Simon

  30. admin – 27. Dezember 2011

    Ja HALLO Simon! Mac OS X Lion. Dumm, wenn man immer nur das Neuste hat …
    Aber immerhin ein Lichtblick, denn wir sitzen gerade an den neuen Webseiten für einen Kunden, der mit Leidenschaft superlange Wortkonstruktionsbildungsaufbauten benutzt …

  31. der_simon – 27. Dezember 2011

    Moin Ulrike,

    nach langer zeit im Off, hier mal wieder eine Wortmeldung von mir.

    Ich habe das in meinem Blog mal ausprobiert, leider trennt aber weder der FF 9.0.1, noch der Safari 5.1.2 ein Wort. 🙁

    Weißt du Rat? Gruß aus Kölle.

    Der Simon