Silbentrennung auf deutschen Websites

Oft ist es so, dass man aufgrund von schmalen Textblöcken gerne eine Silbentrennung auf Website verwenden möchte, oder man mag es einfach etwas aufgeräumter. Wichtig hierfür ist erstmal das lang-Attribut zu setzen im HTML-tag, bei WordPress klassischerweise in der header.php deines Themes. Für deutsch:

 <html lang="de">

Jetzt denkt ihr das muss doch de-DE heißen! Nee, das ist bei den lang-Attributen etwas anderes als z.B. bei Übersetzungen. Wer Langeweile hat liest hier beim W3C: Language tags in HTML and XML. Theme-Programmierer machen das auch gerne mal falsch 😉 Hier noch eine einfache Liste der Codes.

Als nächstes muss man die Silbentrennung per CSS aktivieren. Ein Beispiel für einen Absatz:

p {
  hyphens: auto;
}

Um Safari und Microsoft-Browser zu unterstützen, brauchen wir noch Prefixes — also:

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

Und das war es auch schon. Du kannst das bei WordPress in deine style.css einfügen, oder über den Customizer bei “Zusätzliches CSS”. Mittlerweile wird die Silbentrennung von den meisten Browsern unterstützt. Can I Use zeigt die Übersicht.