Silbentrennung 2
Ein Text sieht meist schöner aus, wenn Silbentrennung angewendet wird. Dann sind beim eingestellten Flatterrand rechts keine so großen Lücken, weil eventuell lange Worte in die neue Zeile umgebrochen werden. Ich verwende hier ein angepasstes Template und habe keine händischen Änderungen vorgenommen.
Ein paar weiter Infos dazu bei Stephan Heller. Die Angaben zur Browserunterstützung in css-wiki.com sind leider nicht immer auf dem aktuellen Stand. Schau lieber hier nach: CanIUse.
Obwohl hyphens von aktuellen Browsern nur mäßig unterstützt wird, entspricht die Funktionalität dem, was in der Praxis häufig gefragt ist. Durch den Wert auto wird die automatische Worttrennung aktiviert, wie dies in den modernen Textverarbeitungsprogrammen üblich ist.
Für Webseiten, bei denen Inhalte über ein CMSimple_XH eingegeben werden und das Einfügen von weichen Trennzeichen oft nicht möglich ist, kann hyphens eingesetzt werden und damit wenigstens eine Standardanforderung erfüllen.
Der Einsatz von hyphens ist eigentlich unbedenklich. Nutzer mit Browsern, die hyphens bereits unterstützen, profitieren davon, weil Texte dann flächenfüllender dargestellt werden. Unterstützt ein Browser diese CSS-Eigenschaft nicht, kommt es trotzdem zu keiner Fehldarstellung.
hyphens hat das Potential, in Zukunft Texte einer Seite mit der optimierten Worttrennung anzuzeigen.
Beispiel 1:
Ist bei hyphens der Wert auto „aktiviert”, so erfolgt die automatische Worttrennung durch den Browser. Voraussetzung ist aber, dass eine entsprechende Sprache im HTML (im head für die komplette Seite, oder wie hier, in dem p-Tag) definiert ist, damit die Silbentrennungsregeln der verwendeten Sprache angewendet werden können. In diesem Beispiel 1 ist die Sprache „de” (für Deutschland) für das p-Tag definiert.
Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!
Beispiel 2:
Im kompletten Bereich von Beispiel 2 ist die Sprache „ru” (für Russland) für das p-Tag definiert. Obwohl die Worttrennung durch hyphens mit auto definiert ist, kommt es hier zu keiner automatischen Trennung, weil die Worte nicht russisch sind.
Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!
In der Datei stylesheet.css im Template muss dieses eingefügt werden:
#hyphens { /* Silbentrennung 2: www.css-wiki.com/css-eigenschaft/hyphens */
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
Das kann am Ende der Seite geschehen.
Auf der Seite wird das Template über Seite ⇒ Seitentemplate ausgewählt und gespeichert.
Darstellung funktioniert in:
Firefox v86.x (64bit)
Internet Explorer 11
Chrome v89.x
Darstellung funktioniert nicht in:
Edge v89.x (64bit)
Opera v74.x