Silbentrennung auf deiner Website

Wenn du auf deiner Website Silbentrennung verwenden möchtest, hast es du manchmal nicht so leicht. Die Texte sollen auf einem großen Display genauso gut aussehen, wie auf einen Tablet und auf einem Smartphone. Standardmäßig liefert WordPress keine Silbentrennung.

Wenn du nur die Schriftgrößen verringerst, passt vielleicht ein langes Wort in eine Zeile, aber wahrscheinlich kannst du es dann nicht mehr lesen, weil die Schriftgröße zu klein ist. Also ist es nötig, dass du dein Wort trennst und das am Besten nach der jeweiligen Rechtschreibregel, je nach deiner verwendeten Sprache.

Es gibt einige Möglichkeiten, um eine schöne Silbentrennung auf der Website darzustellen, einige möchten wir dir heute vorstellen.

Manuelle Silbentrennung auf deiner Website

Wenn du deine Wörter manuell trennen möchtest, kannst du verschiedene HTML-Tags verwenden. Der große Nachteil ist, dass du die Tags manuell an der richtigen Stelle setzen musst. Vor allem, wenn du auf deiner Seite regelmäßig neue Beiträge veröffentlichst, hast du damit sehr viel Arbeit. Ein weiterer großer Minuspunkt ist, dass du so kaum alle unterschiedlichen Bildschirmauflösungen abdecken kannst. Ein Pluspunkt ist allerdings, dass die Formatierung auch in externen Quellen, wie z. B. im RSS Feed, übernommen wird.

­ (Soft Hyphen)

Steht nicht genügend Platz zur Verfügung, wird das Wort an dieser Stelle mit einem Trennstrich umgebrochen.

Donaudampfschiffahrts­­gesell­schaftskapitän

<wbr> (Word Break)

Steht nicht genügend Platz zur Verfügung, wird das Wort an dieser Stelle ohne Trennstrich umgebrochen.

Donaudampfschiffahrts<wbr>gesell­schaftskapitän

&nbsp; (Non Breaking Space)

Non Breaking Space ist ein geschütztes Leerzeichen und verhindert die Trennung.

Donaudampfschiffahrts&nbsp;gesell­schaftskapitän

Automatische Silbentrennung auf deiner Website mit CSS

Die automatische Silbentrennung mit CSS ist sicherlich die weit verbreitetste Lösung. Einmal richtig eingestellt, funktioniert sie auf deiner kompletten Website. Ein kleiner Nachteil ist, dass vor allem ältere Browser Hyphens nicht verarbeiten können, da sie die Eigenschaft noch nicht unterstützen. Eine aktuelle Übersicht der Browserkompatibilität findest du unter Can i Use.

Mit Hilfe der Eigenschaft hyphens kannst du per CSS deine Silbentrennung vornehmen.

/**
 * Silbentrennung auf deiner Website
 * https://wp-bibel.de/tutorial/silbentrennung-auf-deiner-website/
 */

body {
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

Damit die Trennung mit CSS funktioniert, musst du unbedingt den HTML-Language Code überprüfen, da sie sonst unter Umständen in einer anderen Sprache ausgeführt wird.

Silbentrennung auf deiner Website mit Javascript

Du kannst die Silbentrennung auch mit Javascript umsetzen. Dafür gibt es viele fertige Bibliotheken, wie z. B. Hypernator. Die Bibliothek setzt die HTML-Tags automatisch an der richtigen Stelle. Die Nachteile der manuellen Trennung werden durch eine externe Javascript Bibliothek gelöst. Ein Wermutstropfen ist allerdings, dass eine externe Bibliothek eingebunden wird, die sich auf die Ladezeiten deiner Website auswirkt.

Silbentrennung auf deiner Website mit Plugin

In WordPress kannst du die Silbentrennung auch mit Hilfe eines Plugins lösen. Dafür eignet sich z. B. wp-Typography. Mit dem Plugin kannst du bestimmen, welche Textelemente du trennen möchtest, wie viele Buchstaben ein Wort mindestens haben soll und noch viele weitere Einstellungen vornehmen.

Mit einem guten Plugin wirst du die Vorteile genießen, dass du auf einfachsten Weg viele Einstellungen vornehmen kannst ohne größere Kenntnisse in HTML, CSS oder Javascript haben zu müssen. Ein kleiner Nachteil ist lediglich, dass du dich von einem weiteren Plugin abhängig machst.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.