Strichlein Strichlein ganz an Rand: Silbentrennung in Webseiten

Dez 27, 2011 | 7 Comments

Die Silbentrennung für HTML-Seiten nähert sich auf leisen Sohlen: Firefox und Safari ( – Mac OS X Lion; also Katzenpfötchen – ) trennen Silben per CSS 3 hyphens auf die sanfte Tour.

p { hyphens: auto; }

Irgendwann in grauer grauer Vorzeit entwickelte ein Lebewesen – wahrscheinlich noch ein ziemlich schleimiger Klumpen, auf jeden aber Fall ein Vielzeller – eine lichtempfindliche Zelle (einen Fotorezeptor), mit dem es hell und dunkel unterscheiden konnte.

Über die Natur der ersten Fotorezeptoren wissen wir nicht viel. Vielleicht brauchten die ersten Lebewesen, die sich aus der Tiefsee in Richtung Meeresspiegel bewegten, einen Rezeptor für ultraviolettes Licht, um den schädlichen ultravioletten Strahlen hier oben nicht zum Opfer zu fallen.

Auszug aus Entwicklung des Farbsehens

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;
}

Zurzeit trennen die aktuellen Version von Firefox und Safari, Chrome hinkt ja immer ein wenig hinterher (auch wenn Google Chrome ganz schön schnell hinken kann) und auch Opera will Fotorezeptoren nur am Stück herausgeben.

Mit den Feinheiten wie der Zahl von Silbentrennungen in Folge und der Zahl von Buchstaben im Wort, bei der getrennt werden darf, müssen wir noch ein Weilchen warten.

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

Ab Version 10 wird auch Internet Explorer den Strich am Rand mitmachen und die Silbentrennung per CSS ermöglichen.

7 Comments

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

http://blog.simon-kuehn.de/
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 …
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
admin
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.
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
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
Hartwig
16. Februar 2012
Das Facebook Like Button Plugin waere bestimmt hilfreich. Oder habe ich es uebersehen?