Wer auf seiner Homepage Blocksatz verwendet, damit der Text rechts und links am Rand klebt, der kennt sicherlich das Problem, dass dadurch manchmal unschöne größere "Lücken" in der Textdarstellung innerhalb der Zeile entstehen, die meistens durch längere Wörter ausgelöst werden, die nicht mehr in die aktuelle Zeile passen.
CSS3 ermöglicht es mit der Eigenschaft hypens dieses Problem einzudämmen, indem bei den Wörtern am Ende der Zeile eine Silbentrennung durchgeführt wird.
Automatische Silbentrennung mit CSS3
Die CSS3-Eigenschaft hyphens ermöglicht es, dass bei Wörtern am Ende der Textzeile automatisch eine Silbentrennung durchgeführt wird. Diese sorgt wiederum dafür, dass die Wörter am Ende der Zeile kürzer sind und man sich nicht mehr mit Lücken im Text herum ärgern muss. Die Silben werden durch Bindestriche umgebrochen. Die Integration in das bestehende Stylesheet der Homepage ist zwar ziemlich einfach, aber leider gibt es da noch ein kleines Problem:
Bis jetzt unterstützen nur der Internet Explorer 10, Mozilla Firefox, Safari und der mobile Browser Safari für Apple iOS diese Eigenschaft. Bei allen anderen Browsern wird der Text immer noch ganz normal in Blocksatz ohne Silbentrennung angezeigt. Man kann nur hoffen, dass bald die anderen Browserhersteller diese Eigenschaft in ihre Browser integrieren. Bis dahin vergeht aber sicherlich noch eine Menge Zeit. Was aber verwundert, ist, dass der Browser vom Internetgiganten Google diese Eigenschaft immer noch nicht unterstützt. 😲
CSS3-Hyphens im Stylesheet
Damit die automatische Silbentrennung auch funktioniert, gibt es noch eine kleine Voraussetzung: im HTML-Dokument muss die Sprache angegeben werden. Bei einem HTML5-Dokument wäre das das lang-Attribut im <html>-Tag. Ansonsten funktioniert die Silbentrennung nicht, da der Browser dann logischerweise nicht weiß, in welcher Sprache der Text verfasst ist, auf die er die Silbentrennung anwenden soll. Im folgenden der CSS-Code zum Einbinden in die CSS-Datei:
body {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}Und noch einmal kurz das Beispiel, wie man die Sprache im HTML5-Doctype über das lang-Attribut auf Deutsch setzt (falls noch nicht vorhanden):
<html lang="de">