{

Tobias Scheible
Autor, Referent & IT-Sicherheitsexperte
CSS3-Befehel „hyphens“

Datum: Sonntag, 30. Oktober 2011

Autor: Tobias Scheible

Kommentar(e): 3 Kommentare

Kategorie: Web Development

Tags: CSS3, HTML5, Firefox 8, Trennstrich, Trennzeichen, Umbrüche, Worttrennung, Wörtertrennung, hyphens

Automatische Wortrennungen mit CSS3 Hyphens

Typographie im Web ist ein sehr umstrittenes Thema, außerdem eine immerwährende Diskussion zwischen Designern und Programmierern, was möglich ist und was sein muss. Firefox hat in der Beta der kommenden Version 8 ein interessantes CSS-Feature für die Wörtertrennung integriert.

Es besteht bereits die Möglichkeit, manuelle Trennzeichen in HTML zu setzen. Damit erfolgt bei Bedarf  seit der Version 5 des Internet Explorers ein korrekter Umbruch mit Trennzeichen. Nun wurde diese Methode offiziell im CSS3-Standard von W3C aufgenommen, welche noch eine erweiterte Methode für automatische Umbrüche enthält. Seit 6 von Firefox und der Version 5.1 von Safari wird dieses Feature per Browser-Prefix unterstützt. Neu in der aktuellen Beta von Firefox ist, dass neben vielen anderen Sprachen nun auch die deutsche Sprache unterstützt wird. Damit werden nun auch Wörter in unserer Sprache korrekt getrennt. Besonders hinsichtlich Responsive Webdesign Lösungen lassen sich interessante Ergebnisse erzielen. So sehen Textblöcke immer gut aus, egal bei welcher Größe.

Der CSS-Befehl für die Steuerung der Umbrüche heißt „hyphens“. Als Parameter gibt es die drei Optionen „none“, „auto“ und „manual“.  „none“ ist der Standard-Wert und erzeugt keine Trennung in einem Wort am Zeilenende. Und „auto“ sorgt für eine automatische Trennung nach dem integrierten Wörterbuch. Diese Funktion finde ich für Fließtexte in flexiblen Layouts sehr interessant. Wird das Layout flexibel an die Auflösung des Endgerätes angepasst, kann die Trennung die Lesbarkeit auf kleinen Displays deutlich erhöhen. Mit „manual“ erfolgt nur dort eine Trennung, wo das spezielle Trennzeichen „­“ (soft hyphen / bedingter Trennstrich)  eingefügt worden ist. So kann das Wort Bodenseeschifferpatent zum Beispiel so getrennt werden: Bodensee­schiffer­patent. Und so sieht das Ganze in CSS aus:

p.none {
-moz-hyphens: none;
hyphens: none;
}
p.manual {
-moz-hyphens: manual;
hyphens: manual;
}
p.auto {
-moz-hyphens: auto;
hyphens: auto;
}

Für alle, die wissen wollen, wie es aussieht, habe ich hier eine kleine Hyphens-Demo erstellt. Einfach das Browserfenster verkleinern und vergrößern. Für alle, die zwischen den drei Texten keinen Unterschied erkennen, gibt es hier die Screenshots mit dem Firefox 8 Beta:

automatische Umbrüche
CSS3 Hyphens Beispiel
automatische Umbrüche CSS3 Hyphens Beispiel

PS: Hier im Blog habe ich übrigens nun auch „hyphens: auto;“  für alle Artikel-Texte aktiviert.

  • Artikel teilen:

Über Tobias Scheible

Tobias Scheible

Tobias Scheible arbeitet als wissenschaftlicher Mitarbeiter an der Hochschule Albstadt-Sigmaringen. Dort ist er als Autor und e-Tutor im Masterstudiengang Digitale Forensik tätig und leite im Bachelorstudiengang IT Security Praktika rund um das Thema Informationssicherheit. Darüber hinaus ist er Mitinitiator des Kompetenzzentrums Cyber Security Lab, welches Forschungsprojekte auf dem Gebiet der IT-Sicherheit koordiniert. Zusätzlich hält er Vorträge und Workshops zu aktuellen Themen der IT-Sicherheit.

Alle Blog-Artikel Website Facebook Twitter Xing

Kommentare

Angelika

Das ist eine tolle Neuigkeit. Weil es im allgemeinen Schreibfluss sehr umständlich zu handhaben war, hab ich die bisherige Methode nie angewandt. Das Code-Snippet verbaue ich hingegen mit Freude und hoffe Opera, Chrome und besonders der InternetExplorer ziehen in den nächsten Monaten nach.

André


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

so wird auch Chrome,Safari und Opera angesprochen

Marvin

Sinnvolles Feature. Ich hoffe, das wird auch von den anderen Browsern aufgegriffen und erlangt entsprechende Verbreitung, denn ich kann soweit nichts negatives daran erkennen.
Es kommt dem Lesefluss ja eigentlich nur zu gute.

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

nach oben