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 einige Browser nicht unterstützen, z.B. der doofe Chrome. Das Plugin HyphenateGhsvs schafft Abhilfe.

2019-10-11: Es gehen Gerüchte, dass der Chrome-Browser die CSS-Eigenschaft irgendwann doch unterstützen will. Dann ist er natürlich nicht mehr "doof" (in diesem Zusammenhang).

Das hier vorgestellte Joomla-Plugin System - Hyphenateghsvs  (PLG_SYSTEM_HYPHENATEGHSVS) 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. Warum es sich einmischt, wird weiter unten beschrieben.

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

Seit 2019 bringt das Plugin zusätzlich die modernere und zukünftig empfohlene JavaScript-Bibliothek Hyphenopoly von Mathias Nater mit. Die veraltete Bibliothek Hyphenator wird vom Plugin weiterhin unterstützt, damit Nutzer, die das Plugin schon länger verwenden bei Updates keine Probleme bekommen. Die Weiterentwicklung von Hyphenator wurde von M.Nater mittlerweile eingestellt. Wenn Sie das Plugin neu installieren, sollten Sie den Modus auf Hyphenopoly einstellen. Lesen Sie dazu die Beschreibung im Plugin.

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.
  • Aktivieren Sie den Modus Hyphenopoly.
  • Sie sollten das Plugin auch gleich aktivieren und erstmalig speichern, um alle Parameter der Erweiterung zu sehen. Keine Angst! Erst, wenn Sie später auch die Einstellung Front-End-Ausführung aktiv auf JA stellen, passiert was im Frontend.
  • Als Testbrowser bieten sich z.B. Chrome, Vivaldi, Opera an. Mit dem Firefox-Browser, der hyphens per CSS unterstützt, werden Sie erst mal keine Effekte sehen.
  • Scheuen Sie sich nicht, mir Fragen zu stellen, wenn Sie mit den Einstellungen nicht klar kommen!

Plugin-Parameter

Folgende Anleitung behandelt nur ein paar Plugin-Settings, längst nicht alle. Ausführliche Beschreibungen aller Einstellungen und Tipps finden Sie nach Installation im Plugin selbst. Installieren Sie es, schauen Sie sich um. Wenn es Ihnen nicht gefällt, lässt es sich ja einfach wieder deinstallieren.

Tabulator `Selektoren` - Hyphenate-Selektoren

Hyphenate-Selektoren ist ein Textfeld, in dem Sie CSS-Selektoren Ihrer Seite eintragen, für die Sie Silbentrennung aktivieren wollen. Pro Selektor legt man eine neue Zeile an. Es können auch komplexere Selektoren eingesetzt werden.

Diese CSS-Selektoren, besser: die zugehörigen HTML-Elemente, erhalten demit automatisch eine CSS-Klasse hyphenate. Der Inhalt des markierten Elements und seiner untergeordneten Elemente wird getrennt. Das Markup für die Selektoren ist dasselbe wie in einer CSS-Datei. Sie können HTML-Tags (p, div, section) oder CSS-Klassen (mit einem führenden Punkt) oder IDs (mit einem führenden #) oder (fast) jede andere übliche Kombination eingeben. Auch so einen komplexeren Wurm:

section.somewhere div.inside [itemprop="headline"]

Weitere Beispiele finden Sie im Plugin.

Versuchen Sie einen bereichsumschließenden Selektor zu verwenden, der alle Kinder automatisch mitnimmt anstatt alle Kinder einzeln auszuzeichnen.

Bei der Auswahl der Selektoren sollte man sich etwas Gedanken machen. Klar kann man auch einfach den Selektor body eintragen. Alles auf der Seite wird getrennt, soweit man es nicht mit dem Feld Stopp-Hyphenate-Selektoren ausschließt. Empfohlen ist das aber aus Performancegründen nicht. Vielleicht mal für das anfängliche Testen. Man sollte stattdessen Bereiche eintragen, wo es sinnvoll ist, die Silbentrennung zu aktivieren, beispielswiese die Artikel-Texte.

Bei einer Joomla-Standard-Auszeichnung des HTML-Quelltextes bietet sich für eine Einzelartikelseite besser ein Selektor .item-page an? Diese CSS-Klasse kommt auf der normalen Joomla-Einzelartikelseite genau ein mal vor und umschließt den gesamten Beitragstext inklusive Artikelüberschrift, die ja bei schmalen Bildschirmen oftmals auch zu lang wird.

Jetzt sind aber alle Blog- und Haupteinträge-Seiten ohne Effekt. Brauche ich also weitere Zeilen im Feld mit dem Wissen, dass die Blogseiten einen alles umschließenden DIV haben mit CSS-Klasse blog und die Hauptbeiträge blog-featured. Ich ende vorerst mit diesen Zeilen:

.item-page
.blog
.blog-featured

Oder eine Lösung für Leute, die sich nicht scheuen in der Templatedatei oder in anderen Layouts "rumzubasteln"?

Da ich sowieso für nahezu alle Seiten diverse Template-Overrides verwende, habe ich mir in viele einen div-Container eingesetzt, der den zu trennenden Wunsch-Bereich umschließt.

<div class="div4hyphens">
...
</div>

oder diese Klasse div4hyphens in bereits existierenden Tags zusätzlich eingesetzt. Bisschen Tüftelei für Millisekunden-Fuxer... Am Ende verbleibe ich so bei einer einzelnen Zeile im Feld Hyphenate-Selektoren.

.div4hyphens

Das soll nur sagen, wenn man will, kann man ein bisschen oder etwas mehr für die Lade-Geschwindigkeit tuen. Anfänglich habe ich allerdings auch mit einem halben Dutzend Selektoren im Feld gearbeitet und fand es alles nicht so dramatisch. Wie's beliebt...

Tabulator `Selektoren` - Stopp-Hyphenate-Selektoren

Stopp-Hyphenate-Selektoren ist ein Textfeld, in dem Sie CSS-Selektoren eintragen, für die Sie die Silbentrennung de-aktivieren wollen.

Diese CSS-Selektoren, besser: die zugehörigen HTML-Elemente, erhalten demit automatisch eine CSS-Klasse donthyphenate. Der Inhalt eines so markierten Elements und seiner untergeordneten Elemente wird nicht mehr getrennt. Pro Selektor legt man eine neue Zeile an. Es können auch komplexere Selektoren eingesetzt werden (siehe oben).

Ich habe oben hyphenate-Regeln gesetzt, die für den gesamten Artikel-Bereich Silbentrennung aktivieren. Blöd finde ich jetzt aber, dass das Wort "Drucken" des Print-Buttons ebenfalls getrennt wird (siehe folgendes Bild).

Unerwuenschte Silbentrennung in Teilbereichen des aktivierten HTML-Containers
Bild in größter Auflösung öffnen (Popup)
Unerwuenschte Silbentrennung in Teilbereichen des aktivierten HTML-Containers

Der Drucken-Button befindet sich in einem Kindbereich mit umschließender CSS-Klasse icons. Also trage ich in das Feld Stopp-Hyphenate-Selektoren eben diese Klasse ein, damit das Wort nicht mehr getrennt wird.

.icons
Unerwuenschte Silbentrennung in Teilbereichen des aktivierten Containers deaktiviert
Bild in größter Auflösung öffnen (Popup)
Unerwuenschte Silbentrennung in Teilbereichen des aktivierten Containers deaktiviert

Zusätzlich diie Überschrift deaktivieren? Da bietet sich bei mir die CSS-Klasse page-header an, die ich in einer neuen Zeile eintrage. Alle Hauptüberschriften meiner Webseite sind von dieser CSS-Klasse umgeben.

.icons
.page-header

Oder gleich alle H2-Überschriften in aktivierten Elternbereichen deaktivieren?

.icons
h2

Tabulator Sprachen - Was kann der Browser?

Damit das JavaScript von Matthias Nater prüfen kann, ob der verwendete Browser die CSS-Eigenschaft hyphens "von alleine kann" oder nicht, müsen Sie im Tabulator Sprachen zu jeder Sprache, die auf Ihrer Webseite verwendet wird ein Testwort eingeben und die Sprache dann aktivieren. Lesen Sie dazu die Beschreibung im Plugin.

Die auszuwählenden Sprachen sind die, die Matthias Nater zur Verfügung stellt. Anders: Mehr gibt es derzeit nicht. Sie können sich aber an der Erstellung weiterer Sprach-Patterns beteiligen.

Für die Einstellungen der Sprachen im Plugin gilt: Aktivieren Sie keine Sprachen, die auf Ihrer Webseite gar nicht verwendet werden, da die Prüfung auf hyphens-Fähigkeit einer nicht verwendeten Sprache Zeit verschwendet. Stellen Sie aber auch nicht zu wenige ein, was ebenfalls negative Performanceeffekte haben kann!

Notwendig für Browser, die CSS-hyphens selber können

Seit Plugin-Version 2019.03.10 müssen Sie den folgenden CSS-Code nicht mehr händisch einsetzen. Es gibt eine Einstellung, die das für Sie übernimmt (oder nicht).

Das Plugin reduziert seine Arbeit auf ein Minimum, wenn das JavaScript feststellt, dass der Browser keine Unterstützung bei der Silbentrennung benötigt, z.B. der Firefox oder Internetexplorer ab Version 10. Trotzdem setzt es auch bei solchen Browsern die oben erwähnten Markierungen hyphenate (Silbentrennung aktivieren) bzw. donthyphenate (Silbentrennung deaktivieren) in den HTML-Quelltext der Seite wie von Ihnen konfiguriert ein.

Aber ohne entsprechende CSS-Regeln tun dann auch die "schlauen" Browser nichts.

Setzen Sie deshalb in Ihrer CSS-Datei oder im HEAD Ihres Templates in einem STYLE-Block diese CSS-Regeln ein:

.hyphenate{
 word-wrap: break-word;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 -o-hyphens: auto;
 hyphens: auto;
}
.donthyphenate{
 word-wrap: break-word;
 -webkit-hyphens: none;
 -moz-hyphens: none;
 -ms-hyphens: none;
 -o-hyphens: none;
 hyphens: none;
}

Oder, falls Sie Bootstrap 2 oder 3 mit LESS verwenden, die Versionen haben ein passendes Mixin dabei, in Ihre *.less-Datei eintragen:

.hyphenate{
 .hyphens();
}
.donthyphenate{
 .hyphens(none);
}

Erweiterungs-Infos

Name

PLG_SYSTEM_HYPHENATEGHSVS

Beschreibung

Nicht alle Browser beherrschen CSS3-hyphens. Dieses freie Joomla-Plugin bietet eine JavaScript-Lösung für Silbentrennung als Fallback in solchen Fällen.

Inspiriert durch

https://github.com/mnater/Hyphenator und github.com/mnater/Hyphenopoly

Download

Direkter Download oder zur Download-Seite

Updateserver-Unterstützung

Benachrichtigung im Backend über Aktualisierungen.

Sprachen

Sprache de-de Sprache en-gb:

Projekt-Seite

Projektseite öffnen

Kommentare und Hinweise

Neuere Versionen des Plugins benötigen mindestens Joomla 3.9.x und mindestens PHP-Version 7.x.
Sollten Sie tatsächlich noch ältere Versionen verwenden, können Sie das Plugin in Version 2017.11.29 installieren. Dieses beinhaltet aber nicht Hyphenopoly, sondern nur veralteten Hyphenator.

Changelogs / Version-History

Changelogs-Seite öffnen

Allgemeiner Hinweis zu Erweiterungen und Code-Schnipseln

Verbesserungsvorschläge, Fragen und Feature-Wünsche sind willkommen.

Alle nicht explizit als fertige Erweiterung markierten Skripte und Codes von www.ghsvs.de dienen als Ansätze / Ideen für eigene Ausarbeitung. GHSVS bzw. die jeweiligen Autoren übernehmen keinerlei Garantien beim Einsatz Ihrer kostenlosen Erweiterungen, Programme, Codes und Skripte, helfen aber gerne bei Rückfragen, soweit zeitlich möglich.