In WordPress und auf HTML-Seiten ist das Thema Silbentrennung ein oft unterschätztes Feature, das die Lesbarkeit von Texten erheblich verbessern kann. Hier zeige ich dir einige Methoden, wie du Silbentrennung effektiv nutzen kannst:
Silbentrennung mit CSS: hyphens
Unglaublich, aber wahr: CSS unterstützt bereits die Silbentrennung! Die Eigenschaft hyphens lässt sich mit den Werten „none“, „manual“ und „auto“ verwenden. Im Alltag wird meist auto genutzt, da hierbei der Browser selbstständig die Wörter trennt.
body {
hyphens: auto;
}
Wichtig: Damit das funktioniert, muss das lang Attribut im HTML-Tag gesetzt sein, damit der Browser weiß, in welcher Sprache er trennen soll.
body(lang:de) {...}
Weiche Trennzeichen: ­
Ein weiches Trennzeichen (Soft Hyphen) fügst du mit ­ in Wörter ein, um sie bei Raumknappheit zu trennen.
Beispiel:
Stellen­angebote
Bei einem Soft Hyphen erscheint an der Trennstelle ein Bindestrich.
Worttrennung ohne Trennstrich: <wbr>
Mit dem <wbr> Tag (Word Break Opportunity) kannst du einen optionalen Trennpunkt innerhalb eines Wortes setzen, ohne dass ein Bindestrich erscheint.
Beispiel:
Nahrungsmittel<wbr>unverträglichkeit
Geschützte Leerzeichen verhindern Trennungen:
Das geschützte Leerzeichen ( ), auch Non-Breaking Space genannt, verhindert die Trennung an ungewünschten Stellen.
Beispiel:
Eric Fischer
Dieses Leerzeichen sorgt dafür, dass Worte wie „Eric Fischer“ stets zusammenbleiben.
Ich hoffe, diese Tipps helfen dir dabei, deine WordPress-Seiten noch professioneller zu gestalten. Für mich waren viele dieser Techniken von großer Hilfe!
Silbentrennung mit dem Divi-Theme
Das Divi-Theme für WordPress bietet ebenfalls die Möglichkeit, CSS-Regeln zur Silbentrennung hinzuzufügen. Durch die Verwendung der CSS-Eigenschaft hyphens: auto; in spezifischen Klassen kannst du gezielt steuern, wo Silbentrennungen vorgenommen werden sollen.
Im Beispiel unten wird die Silbentrennung auf alle H4-Überschriften innerhalb der Blurb-Module aktiviert. Dies kann besonders nützlich sein, um die Lesbarkeit in Überschriften zu verbessern, die aufgrund ihrer Größe oder des Layouts oft zu unerwünschten Wortüberläufen neigen.
h4.et_pb_blurb {
hyphens: auto;
}
.et_pb_blurb_container .et_pb_module_header{
hyphens: auto;Diese Regeln können entweder global für das gesamte Theme eingestellt werden, um eine einheitliche Darstellung auf allen Seiten zu gewährleisten, oder gezielt auf einzelne Elemente oder Seiten angewendet werden. Die Anwendung auf individuelle Elemente bietet Flexibilität, insbesondere wenn unterschiedliche Abschnitte der Website unterschiedliche Layout-Anforderungen haben.
Das Einfügen dieser CSS-Regeln in Divi erfolgt typischerweise über das Theme Customizer oder durch das Hinzufügen eines benutzerdefinierten CSS-Moduls auf der betreffenden Seite oder dem Layout. Dadurch wird eine nahtlose Integration und ein konsistentes Design über die gesamte Website hinweg sichergestellt.
Diese Methode hilft, die typografische Qualität deiner Inhalte zu verbessern und die Lesbarkeit auf Geräten mit verschiedenen Bildschirmgrößen zu optimieren.
Globale Anwendung
Wenn ihr die Eigenschaft hyphens:auto; für jeden Text auf eurer Website aktivieren möchtet, dann fügt den folgenden Code in das CSS eurer Website ein:
p, h1, h2, h3, h4, h5, h6 {
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
Was dieser Code bewirkt:
- p, h1, h2, h3, h4, h5, h6:
- Diese Regel gilt für alle Absätze (
<p>) und Überschriften (<h1>bis<h6>).
- Diese Regel gilt für alle Absätze (
- hyphens: auto;
- Diese Eigenschaft aktiviert die automatische Silbentrennung, sodass der Browser selbst entscheidet, wo Wörter am Zeilenende getrennt werden können. Dies verbessert die Lesbarkeit des Textes.
- -webkit-hyphens: auto;
- Diese Zeile sorgt dafür, dass die automatische Silbentrennung auch in WebKit-basierten Browsern wie Safari und älteren Versionen von Chrome funktioniert.
- -ms-hyphens: auto;
- Diese Zeile sorgt dafür, dass die automatische Silbentrennung auch im Internet Explorer funktioniert.
Indem ihr diesen Code hinzufügt, stellt ihr sicher, dass lange Wörter in Absätzen und Überschriften automatisch getrennt werden, wodurch der Text gleichmäßiger verteilt und besser lesbar wird.
Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Sie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Verwandte Artikel
Hast du eine Frage zu diesem Artikel?
Schreib uns – wir antworten in der Regel innerhalb eines Werktages.