Automatische Silbentrennung mit CSS3

CSS3 bietet in allen Bereichen viele neue Möglichkeiten. Unter anderem auch bei der Textgestaltung. Mit der CSS3-Eigenschaft “hyphens” wurde eine automatische Silbentrennung eingeführt. Damit kann die Darstellung von langen Texten verbessert werden. Wie die Silbentrennung mit CSS3 in der Praxis aussieht, könnt ihr beispielsweise in meinem SSDblog anschauen.

Damit die Silbentrennung funktioniert, muss die korrekte Sprache für die Seite definiert werden. Diese kann für das gesamte Dokument oder für einzelne Textabschnitte angegeben werden.

<html lang="de">

<p lang="de">deutscher Text</p>
<p lang="en">englischer Text</p>

Aktuell muss noch mit den verschiedenen Browser-Präfixen gearbeitet werden, damit die Silbentrennung funktioniert.

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

Mit “auto” entscheidet der Browser selbst, wo getrennt werden muss. Bei “none” wird keine Silbentrennung angewendet. Der Standardwert der Eigenschaft ist “manual”. In diesem fall wird lediglich bei solchen Stellen getrennt, die mit “&shy;­” gekennzeichnet sind.

Firefox und Safari unterstützen die CSS3-Eigenschaft “hypehns” bereits. Opera und Chrome sollten demnächst nachziehen. Auch der Internet Explorer wird die Silbentrennung mit Version 10 unterstützen.

Tobi

Hallo, mein Name ist Tobias und ich habe diesen Blog im April 2009 ins Leben gerufen. Seitdem blogge ich hier über Software, Internet, Windows und andere Themen, die mich interessieren. SSDblog ist mein zweiter Blog, indem es rund um das Thema SSDs geht. Ich würde mich freuen, wenn ihr meinen Feed abonniert oder mir auf Twitter und Facebook folgt.

7 Antworten

  1. tux. sagt:

    die mit “­” gekennzeichnet sind

    Fehlt da was?

  2. tux. sagt:

    Ah.

    Siehst du, und deswegen nutze ich nie den WYSIWYG-Editor. ;)

  3. Hallo Tobi

    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

  4. Tobias sagt:

    Schade das Chrome die automatische Silbentrennung mit hyphens immer noch nicht unterstützt. Gerade bei Responsive Webdesign fähigen Websites auf Smartphons und Tablets, würde die Lesefreundlichkeit deutlich steigen.

  1. 3. August 2012

    […] CSS3 bietet in allen Bereichen viele neue Möglichkeiten. Unter anderem auch bei der Textgestaltung. Mit der CSS3-Eigenschaft “hyphens” wurde eine automatische Silbentrennung eingeführt. Damit kann die Darstellung von …  […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert