Silbentrennung mit Joomla für "hyphens-doofe" Browser (System-Plugin HyphenateGhsvs (Slim))

Eine Kundin liebt Blocksatz. Das sieht schön gleichmäßig aus so lange die Bildschirmbreite mitspielt. Ab irgendeinem Punkt stören Riesenabstände zwischen Worten oder verwaiste Worte den Lesefluss. Da hilft es Silbentrennung per CSS3-Eigenschaft hyphens zu aktivieren, was jedoch nicht alle Browser unterstützen. Das Plugin HyphenateGhsvs schafft Abhilfe.

2021-08-28: Mittlerweile unterstützen sehr viele Browser die CSS-Eigenschaft hyphens. Eine stets aktuelle Übersicht finden Sie auf der Webseite caniuse.com: https://caniuse.com/css-hyphens

Das hier vorgestellte Joomla-Plugin System - Hyphenateghsvs  (PLG_SYSTEM_HYPHENATEGHSVS_SLIM) mischt sich dann ein, wenn ein Browser Silbentrennung, das sogenannte CSS-Hyphenation, gar nicht unterstützt oder wenn er es für eine Sprache nicht unterstützt.

Und das ist eine Lüge: Es mischt sich auch bei Browsern ein, die hyphens unterstützen, aber weitaus dezenter, was die Performance anbelangt. Wie es sich einmischt, wird weiter unten beschrieben.

Das System verwendet die JavaScript-Bibliothek Hyphenopoly von Mathias Nater Diese arbeitet, wenn man sie richtig einsetzt ausreichend performant für meine Ansprüche. Das muss jeder für sich selbst entscheiden.

Aber es kann auch ein Helferlein für die "schlaueren" Browser sein, um Silbentrennung für bestimmte Bereiche zu aktivieren, für andere Bereiche aber nicht. Ganz ohne die Hyphenopoly-Bibliothek.

Herunterladen Installation und Vorarbeiten

  • Am Ende dieses Beitrags finden Sie den Downloadlink für das Plugin, um es im Backend Ihres Joomlas zu Installieren.
  • Öffnen Sie das Plugin namens System - Hyphenateghsvs by GHSVS, um die Plugin-Einstellungen und Anleitungen/Beschreibungen zu sehen.
  • Scheuen Sie sich nicht, mir Fragen zu stellen, wenn Sie mit den Einstellungen nicht klar kommen! Aber bitte fragen Sie so, dass ich gezielt helfen kann.

Plugin-Parameter

Sie finden kurze Erklärungen der Einstellungen unter https://github.com/GHSVS-de/plg_system_hyphenateghsvs_slim/discussions/categories/docs in deutsch und englisch. Diese sind in den Plugineinstellungen im Backend verlinkt.

Hyphenate-Selektoren

In einem Textfeld definieren Sie CSS-Selektoren. Die Inhalte zugehöriger HTML-Elemente werden silbengetrennt.

Anleitung: Setting "Hyphenate-Selektoren"

Stopp-Hyphenate-Selektoren

In einem Textfeld definieren Sie CSS-Selektoren. Die Inhalte zugehöriger HTML-Elemente werden nicht silbengetrennt.

Anleitung: Setting "Stopp-Hyphenate-Selektoren"

Hyphenate CSS-Regeln einsetzen - Auch standalone nutzbar

CSS-Regeln automatisch laden, die sich darum kümmern, dass oben definierte Selektoren auch in Browsern ihre Aufgabe erfüllen, die eh schon hyphens unterstützen.

Anleitung: Setting "Hyphenate CSS-Regeln einsetzen"

Man kann das Plugin auch so verwenden (ohne Hyphenopoly-JavaScript zu bemühen):

  • Definiere CSS-Elemente (z.B. #tralala, .firlefanz, div, div.dingsbums ...) im Plugin, deren Inhalt (und Kinder) silbengetrennt werden sollen. Und/oder definiere CSS-Elemente im Plugin, deren Inhalte (und Kinder) nicht getrennt werden sollen.
  • Ein kleines JavaScript fügt dann diesen Elementen in der HTML-Seite die CSS-Klassen .hyphenate bzw. .donthyphenate hinzu.
  • Durch eine zusätzliche CSS-Datei, die das Plugin dann optional lädt, wirken auf diese Elemente stinknormale CSS-hyphens-Regeln.

Wenn man sich also darauf verlässt, dass alle populären Browser der Seitenbesucher silbentrennung sowieso beherrschen, kann man auf die Konfiguration von Sprachen gänzlich verzichten und spart so ein wenig Ressourcen.

Sprachen (Hyphenopoly)

Hier werden die Sprachen definiert, die auf Ihrer Seite zum Einsatz kommen und auf die das Plugin reagieren soll.

Anleitung: Setting "Sprache (Hyphenopoly)"

Konsolemeldungen deaktivieren und Tipps zum Debuggen

Anleitung: Setting "Konsolemeldungen deaktivieren" und Tipps zum Debuggen