Webseiten und ZubehörProgrammierung UmsetzungPflege Backups BetreuungJoomla-Spezialist

JoomlaSchnipsel

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.

Das hier zum Download angebotene, Joomla-Plugin System - Hyphenateghsvs Hyphenator_Loader  (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 Matthias Natter. 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.

Anleitung

Laden Sie das Plugin unten herunter, um es im Backend Ihres Joomlas zu Installieren. Alternativ können Sie die Installationsmethode Von URL installieren verwenden, um sich den Download zu ersparen.

Öffnen Sie das Plugin namens System - Hyphenateghsvs Hyphenator_Loader by GHSVS, um die Plugin-Einstellungen zu sehen.

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. Dazu unten mehr.

Plugin-Parameter

Hyphenate-Selektoren ist ein Textfeld, in dem Sie CSS-Selektoren Ihrer Seite eintragen können, für die Sie Silbentrennung inklusive aller Kinder aktivieren wollen. Pro Selektor eine neue Zeile.

Wenn es bspw. die ganze Seite sein soll, tragen Sie 1 Zeile ein.

body

Das ist allerdings mit Vorsicht zu genießen, weil es viele Bereiche gibt, in denen die Silbentrennung "schräg" aussieht. Bspw. bei Firmennamen oder in Menüs. Zwar bietet das Plugin weitere Optionen, mit denen man bestimmte Bereiche innerhalb des so markierten BODY wieder ausschließen kann, aber behalten Sie bei der Konfiguration immer im Kopf, egal, ob Sie Bereiche markieren oder demarkieren:

Je weniger Selektoren im Plugin eingetragen werden, umso schneller wird das vorbereitende JavaScript seine Arbeit tun.

Nun gut, man könnte also vielleicht alle Absätze markieren. Ist ja auch nur 1 Selektor.

p

Auch das ist aber "anstrengend" für das JavaScript, weil auf einer Seite ja viele Absätze auszuzeichnen sind.

Bei einer Joomla-Standard-Auszeichnung des HTML-Quelltextes bietet sich für eine Artikelseite vielleicht besser ein Selektor

.item-page

an. Diese CSS-Klasse kommt auf der normalen Artikelseite genau 1x vor und umschließt den gesamten Textbereich inklusive Artikelüberschrift, die ja bei schmalen Bildschirmen oftmals auch zu lang wird.

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

Oder doch lieber alle Absätze innerhalb dieses Bereichs?

.item-page p

Sind aber dann auch wieder sehr viele. Also erneut zu überlegen, ob man das nicht besser lässt und stattdessen in dem andern Textfeld nur die Überschrift innerhalb .item-page explizit ausschließt. Dann muss das JavaScript sich nur um 2 Stellen im HTML-Code kümmern. Wie man ausschließt, kommt gleich.

Jetzt sind aber alle Blog-Seiten ohne Effekt. Brauche ich also eine weitere Zeile im Feld mit dem Wissen, dass die Blogseiten einen alles umschließenden DIV haben mit CSS-Klasse blog

.item-page
.blog

Werfe ich einen Blick in das Protostar-Template, sehe ich, dass auf allen Seiten der Hauptbereich von einem DIV-Container umschlossen wird, der die CSS-id content hat. Auch das wäre vielleicht eine Option?

#content

Ich habe mich allerdings für diese Lösung entschieden:

Da das Suchen nach einem Selektor, der auf einer Seite gar nicht existiert, das JavaScript ebenfalls langsamer macht und ich sowieso für nahezu alle Seiten und Komponenten Template-Overrides verwende, habe ich mir in alle diese Seiten einen DIV-Container eingesetzt, der möglichst optimal den Wunsch-Bereich umschließt.

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

 oder diese Klasse in bereits existierenden Tags zusätzlich eingesetzt, aber so, dass ich ihn pro Seite nur 1x verwende. Bisschen Fieselei für Millisekunden-Fuxer... Am Ende verbleibe ich so bei einer Zeile

.div4hyphens

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

Im Eingabefeld Stopp-Hyphenate-Selektoren tragen Sie, ebenfalls zeilenweise, die CSS-Selektoren von Kindbereichen ein, für die Sie die Silbentrennung wieder deaktivieren wollen.

Nachdem ich meinen Silbentrennungsbereich wie oben beschrieben eingestellt hatte, zeigte sich, dass einige Kindbereiche ausgeschlossen werden müssen (je nach individuellem Gusto).

Unerwuenschte Silbentrennung in Teilbereichen des aktivierten Containers
Unerwuenschte Silbentrennung in Teilbereichen des aktivierten Containers

Der Drucken-Button befindet sich in einem Kindbereich mit umschließender CSS-Klasse icons. Also trage ich in das Feld Stopp-Hyphenate-Selektoren diese Klasse ein.

.icons

Und das Ergebnis

Unerwuenschte Silbentrennung in Teilbereichen des aktivierten Containers deaktiviert
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. Das ist der gesamte graue Bereich im Bild oben inklusive der Überschrift.

.icons
.page-header

Oder alle H2 in aktivierten Elternbereichen deaktivieren?

.icons
h2

Das Feld Aktiv für Robots sollte auf NEIN stehen. Es ist nicht nötig, das Plugin zu beschäftigen, wenn Robots, Suchmaschinen etc. die Seite besuchen. Kostet nur unnötig Zeit beim Seitenaufbau.

Der Trend im Internet geht weg von JQuery, hin zu "normalem JavaScript" ( = Vanilla JS), das jeder Browser eh schon mitbringt. JQuery wird gerne verwendet, um sicherzustellen, dass auch alte Browser mit dem JavaScript klar kommen, ohne, dass man sich als Programmierer zu sehr verrenken muss. Mit Vanilla JS war man zu oft in der Bredouille für alte Browser doppelt und dreifach zu programmieren. Das Laden der JQuery-Basisbibliothek kostet allerdings Zeit und auch die meisten Funktionen sind unter'm Strich langsamer als mit Vanilla JS. Joomla lädt aber meist JQuery sowieso. Trotzdem hat das Plugin diese Einstellung, mit der man ein paar Millisekunden gewinnen kann. Wenn einem veraltete Browser egal sind, wie mir z.B., stellt man hier JA ein. Das betreffende Script ist allerdings so simpel, dass es wahrscheinlich auch auf alten Browsern problemlos funktionieren wird.

Lädt die nicht minifizierten JavaScript-Dateien aus dem /media/-Ordner (z.B. Hyphenator-uncompressed.js). Für Leute, die debuggen wollen oder ändern und rumspielen. Sollte man als Nicht-Spielkind auf NEIN belassen.

Damit das JavaScript von Matthias Natter prüfen kann, ob der verwendete Browser CSS-Hyphens unterstützt 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 Natter 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!

Nicht vergessen! Einstellungen für Browser, die CSS-hyphens selber können

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 (Silbentrennung aktivieren bzw. deaktivieren) in den HTML-Quelltext der Seite ein. Das sind die CSS-Klassen hyphenate und donthyphenate. Das erleichtert Ihnen das Setzen der Eigenschaft hyphens in einer Ihrer CSS-Dateien (oder im HEAD Ihres Templates in einem STYLE-Block).

Tragen Sie 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 mit LESS verwenden in Ihre less-Datei:

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

 Zwar hätte ich das auch noch in's Plugin einbauen können, ist aber derzeit noch nicht drinnen ;-) Vielleicht in einer zukünftigen Version.

Download und Info

PLG_SYSTEM_HYPHENATEGHSVS

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: github.com/mnater/Hyphenator

Download Version 2016.09.26

Letzter Test: Joomla 3.6.2

Unterstützt Updateserver. Benachrichtigung im Backend über Aktualisierungen.

Sprachen: de-de en-gb

Für FRAGEN(!), Bug-Berichte, Probleme, Anregungen
Projektseite
Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!

Hinweise:
Verwendet Hyphenate Version 5.2.0 (devel).

Version history:
Siehe github.com/GHSVS-de/plg_system_hyphenateghsvs/wiki/Version-history-plg_system_hyphenateghsvs

Verbesserungsvorschläge 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.

Joomla CSS Frontend Erweiterung Plugin Browser Download