In WordPress WordPress macht mehr als 38.8% aller Websites im Internet aus. Ja – mehr als jede vierte Website, die du besuchst, wird wahrscheinlich von WordPress betrieben. • WordPress.org, oft als selbst-gehostetes WordPress bezeichnet, ist die kostenlose Open-Source-WordPress-Software, die du auf deinem eigenen Webhoster installieren kannst, um eine zu 100% eigene Website zu erstellen.• WordPress.com ist ein gewinnorientierter, kostenpflichtiger Dienst, der von der WordPress.org-Software betrieben wird. Es ist einfach... 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 CSSCSS (Cascading Style Sheets) heißt auf deutsch „Mehrstufige Formatvorlagen“. CSS ist eine Formatierungssprache für HTML-, SVG- und XML-Dokumente. Genutzt wird CSS um den Inhalt einer Webseite vom Design zu trennen! Weitere Infos dazu gibt es hier.: hyphens
Unglaublich, aber wahr: CSSCSS (Cascading Style Sheets) heißt auf deutsch „Mehrstufige Formatvorlagen“. CSS ist eine Formatierungssprache für HTML-, SVG- und XML-Dokumente. Genutzt wird CSS um den Inhalt einer Webseite vom Design zu trennen! Weitere Infos dazu gibt es hier. 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
Divi ist ein WordPress Theme und besticht durch tolle Features. Mit diesem Theme braucht ihr in WordPress fast keine zusätzlichen Plugins mehr! Offizielle Webseite von Divi für WordPress
WordPress macht mehr als 38.8% aller Websites im Internet aus. Ja – mehr als jede vierte Website, die du besuchst, wird wahrscheinlich von WordPress betrieben. • WordPress.org, oft als selbst-gehostetes WordPress bezeichnet, ist die kostenlose Open-Source-WordPress-Software, die du auf deinem eigenen Webhoster installieren kannst, um eine zu 100% eigene Website zu erstellen.• WordPress.com ist ein gewinnorientierter, kostenpflichtiger Dienst, der von der WordPress.org-Software betrieben wird. Es ist einfach... 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 Divi ist ein WordPress Theme und besticht durch tolle Features. Mit diesem Theme braucht ihr in WordPress fast keine zusätzlichen Plugins mehr! Offizielle Webseite von 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.
Der HTML-Code für ein Leerzeichen ist folgender: mehr erfahren
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 CSSCSS (Cascading Style Sheets) heißt auf deutsch „Mehrstufige Formatvorlagen“. CSS ist eine Formatierungssprache für HTML-, SVG- und XML-Dokumente. Genutzt wird CSS um den Inhalt einer Webseite vom Design zu trennen! Weitere Infos dazu gibt es hier. 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.
Mehr InformationenSie 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.
Mehr InformationenDieser Beitrag ist auch verfügbar auf: English (Englisch)