„Die Texte hätten wir gerne in Blocksatz.“ Spätestens hier gilt es zu überprüfen wie es um die Silbentrennung im Browser steht: geht, aber nicht ohne Präfixe und lang-Attribut, und erst recht nicht überall.
Erstmal solltet ihr euer html-Element um die Sprachangabe erweitern:
HTML(5)
<html lang="de">
Und dann geht es auch schon ans CSS, hyphen (teiweise mit Präfix) ist hier das Zauberwort:
CSS
body {
-ms-hyphens: auto; /* ab IE10 */
-moz-hyphens: auto; /* seit Firefox 6 */
-webkit-hyphens: auto; /* seit Safari 5.1 (OS X), Safari 4.1 (iOS) */
hyphens: auto;
}Möchte man Elemente aussschließen, geht das so:
.donthyphenme, .babydonthurtme {
-ms-hyphens: none;
-moz-hyphens: none;
-webkit-hyphens: none;
hyphens: none;
}Statt auto und none kann man auch manual nehmen, da müssen dann allerdings selbst Bindestriche oder im Text gesetzt werden. Ist eher nichts für Mengentexte.
Browserunterstützung
Und in welchen Browsern funktioniert das? Wenn man sich das auf caniuse anschaut, kommt die große Ernüchterung:
- Der Internet Explorer kann es seit Version 10 (mit
-ms-Präfix und installiertem Wörterbuch), - Firefox (Desktop und Mobile) seit Version 6 (mit
-moz-Präfix und installiertem Wörterbuch), - Safari seit 5.1 (OS X) bzw. 4.1 (iOS) (beide mit (
-webkit-Präfix). - Chrome (Desktop) kann es bis heute nicht (das Ausmaß der Unterstützung in den verschiedenen Chrome-Versionen mag man sich bitte selbst ausmalen.)
Fazit
Kann man machen, bringt aber in Chrome/Chromium nichts, und genauso wenig in alten Internet Explorern. Lasst also den Quatsch mit Blocksatz (text-align: justify), außer ihr wollt große Lücken zwischen Wörtern haben. (Der Vollständigkeit halber seien horizontale Navigationen mit Blocksatz erwähnt – nutzt sogar Apple.)
Weitere Infos gibts wie schon erwähnt bei caniuse und im <a href="https://developer.mozilla.org/de/docs/Web/CSS/hyphens" onclick="__gaTracker('send', 'event', 'outbound-article', 'https://developer.mozilla online project management.org/de/docs/Web/CSS/hyphens‘, ‚Mozilla Developer Network‘);“>Mozilla Developer Network.
Eine Antwort auf „Silbentrennung im Browser mit CSS hyphens“
[…] aber auch im Seitennamen und -Titel und vielen anderen Feldern so hin: [-]. Falls man es mit der Silbentrennung im Browser etwas genauer haben möchte, ist dies eine sehr einfache […]