Ein Online-Magazin gestalten: Blocksatz, Spalten, Silbentrennung

Blocksatz und Mehrspaltigkeit ade? Muss nicht sein, das geht auch im Web!

Diesmal geht es nicht direkt um Joomla sondern ganz allgemein um die Gestaltung von Texten in Joomla! Artikeln. Wer eine Zeitungs- oder Magazinseite betreibt und richtige Artikel, nicht nur Schlagzeilen, anbietet, möchte diese vielleicht auch wie in richtigen Magazinen formatieren.

Print-Designer haben es schön! Mit Blocksatz, mehrspaltiger Darstellung, automatischer Silbentrennung, Einrückung verbessern sie die Lesbarkeit ihrer Artikel. In einer Zeitschrift werden Artikel nachbearbeitet. Wenn die automatische Trennung "Urin-stinkt" erzeugt, macht der Redakteur daraus von Hand "Ur-instinkt" und sorgt bei Bedarf durch pixelweise Abstandbearbeitung dafür, dass das der Blocksatz gleichmäßig aussieht und sich keine "Straßen" ergeben.
Im Web ist es nicht so einfach. Noch vor einigen Jahren wurden Module in Magazin-Seiten gerne im Blocksatz geschrieben, es sieht einfach gut aus. Der Trick war dabei: Winzige Schriftgröße, feste Breite, manuelle Trennung von Wörtern. Und wehe, eine Kunde wollte font-size changer, die nur Schriften vergrößerten aber nicht die Boxen!

Mit CSS3, HTML5 und Bootstrap (V4) gibt es viele Möglichkeiten, Seiten als Magazinseiten mit Blocksatz und mehrspaltig zu erstellen. Der Vorteil ist klar: Kurze Zeilen lesen sich besser, die Seite sieht einfach besser aus, bessere user experience bringt mehr Klicks.

Das wichtigste Hilfsmittel für die Gestaltung von Magazin-Texten ist https://caniuse.com/ denn bei der Textdarstellung sind sich die Browser ganz und gar nicht einig. Manches geht auf manchen Browsern einfach nicht.

Text responsive in Spalten aufteilen

Eigentlich sind Zeilen am besten zu lesen wenn sie weniger als 60 Zeichen pro Spalte haben. Es hängt auch von der Schrift und vom Zeilenabstand ab, ich will nicht missionarisch auf einem Wert herumreiten. Sicher ist, dass einspaltige Texte auf responisve Seiten oft mehr Zeichen pro Zeile haben als bei langen Texten angenehm zu lesen ist.

Mehrspaltigkeit ist eine einfach Übung seit es CSS3 gibt. Vorher waren Spalten nur per Script oder mit Tricks wie absoluter Positionierung möglich. Mehrspaltigkeit bedeutet: Ein Abschnitt muss gleichmäßig auf Spalten aufgeteilt werden, alle Spalten sollen natürlich gleiche Höhe haben, nur die letzte Spalte darf etwas kürzer sein. In CSS3 wurde dafür die Eigenschaft "Column" implementiert. Damit können Spalten erzeugt werden, ohne besondere Semantik zu verwenden. An einem kleinen Beispieltext beobachten wir, was bei Mehrspaltigkeit zu beachten ist.

Mein Beispieltext - Trapattoni in Hochform: Normal, einspaltig, mit ein paar (roten) Ergänzungen von mir, denn Trapattoni hatte keinen langen deutschen Wörter in seiner Tirade.

Die Mehrspaltigkeit ist einfach genug mit CSS zu erreichen. Dazu nutzen wir die column Eigenschaften.

.col4 {
  column-count: 4; // Mach 4 Spalten
  column-gap: 2rem; // Abstand zwischen den Spalten
  column-rule: 1px solid lightgray;  // Trennlinie zwischen den Spalten
}

Mehr dazu gibt es u.a. hier. Nun kommt es drauf an, auf welchem Medium du gerade liest. Denn Mehrspalter sind nur auf großen, evlt. noch mittleren Screens sinnvoll. Es macht z.B. Sinn, auf mittleren Screens den Text zweispaltig, auf kleinen einspaltig anzuzeigen. Dafür sorgen Media-Queries

@media (max-width: 780px) {.col4 { column-count: 2; }}
@media (max-width: 480px) {.col4 { column-count: 1; }}

Ein Nachteil bei dieser Darstellung sei nicht verschwiegen: bei langen Artikeln muss der Leser für jede Spalte zuerst nach unten, dann für die nächste wieder nach oben scrollen. Das ist für Schnellleser lästig, und nicht nur für diese. Die Regel für große Screens ist daher: Ein Abschnitt sollte, aufgeteilt in Spalten, komplett auf eine Bildschirmseite passen. Ist er länger, kann man mit Zwischenüberschriften Blöcke voneinander absetzen. Es gibt dafür column-span - von der Definition her würde es wirken wie in Tabellen, wo man Zellen verknüpfen kann. Der Firefox (mit dem ich bevorzugt arbeite) kann das aber nicht. Mit ganz normalen getrennten divs und Überschriften ist man auf der sicheren Seite.

Mit Blocksatz noch besser

Eine hervorstechende Eigenschaft von Zeitungen ist der Blocksatz. Das ist die einfachste Übung:

.justify { text-align: justify; }

Hier sieht man aber schon sofort einen Nachteil: der Blocksatz wird durch Leerraum zwischen den Wörtern erreicht. Das sieht bei manchen Wortkombinationen nicht sehr schön aus. Eine Silbentrennung schafft hier Abhilfe.

Silbentrennung, Hyphenation

Spalten setzen Textumbrüche voraus, denn im Deutschen mit langen Wörtern bilden sich, wie oben sichtbar, andernfalls häßliche Lücken oder überstehende Strings. Dies geschieht durch die sogenannte Hyphenation. Es ist ein Verfahren, mit dem anhand von Regeln für jede Sprache berechnet wird, wo ein Trennzeichen (hyphen) eingefügt werden kann, um ein Wort umzubrechen.
Dazu muss die Sprache definiert sein, bei Joomla! findet sich das (abhängig vom Template(Framework)) in der index.php des Templates:

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">

Danach weiß der Browser, nach welchen Regeln er die Silbentrennung praktizieren muss. Die Hyphenation wird dann wie folgt aktiviert.

.hyphens {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphenate-limit-chars: auto 3;
  -webkit-hyphenate-limit-lines: 4;
  -ms-hyphenate-limit-chars: auto 3;
  -ms-hyphenate-limit-lines: 4;
}

Die schlechte Nachricht: Nicht alle Browser machen das. Opera und Chrome weigern sich, bei den anderen funktioniert die Trennung, jedoch ist sie mit Vorsicht zu genießen. Schweinsteigerkopfballverletzungsprämie wird richtig getrennt. Hier ist auch abzuwägen, ab wieviel Zeichen getrennt werden darf. Wenn man nichts festlegt, kommt es eventuell zu geköpften Kellnern ("O-ber") oder zu Rührei "Ei-er" wo "Eier" gewollt sind. Bei drei Buchstaben ist das Risiko schlechter Trennung kleiner - aber auch nicht immer. Hier muss der Redakteur wirklich von Fall zu Fall entscheiden. Wohlgemerkt: Ich spreche von Deutsch. Bei Seiten mit Russisch oder Japanisch gelten eventuell andere Regeln.

Hier mal der Trapattoni mehrspaltig und mit Silbentrennung: Nur der Seufzer ... dafür gibt es keine Trennungsregel in der deutschen Sprache, die Berechnung der Mannschaftsgröße ist, je nach Screen, eventuell auf mehrere Spalten verteilt.

Fast perfekt! Nur noch die manuelle Trennung!

Wenn der Redakteur Hand anlegen und die Silbentrennung austricksen will, gibt es verschiedene Trennzeichen:
#173 und ­ sind weiche Trennzeichen. Wenn sie in einem Wort stehen dann wird bei Bedarf an dieser Stelle getrennt.
<wbr> ist ebenfalls ein weiches Trennzeichen, es macht einen Zeilenumbruch ohne Trennzeichen, was z.b. bei Links oder Verzeichnisnamen nützlich ist.

Im umgekehrten Fall will man vielleicht eine Trennung unterdrücken. Das Zeichen, um die Trennung in einem Leerraum zu unterdrücken kennt bestimmt jeder: Das non-breaking space &nbsp; , das auch gerne verwendet wird, um mehrere Leerzeichen zu erzwingen wo der Browser sonst Leerzeichen zusammenstauchen würde. Bei Trapattonis Mannschaftsberechnung sieht man, wie es wirkt. 1&nbsp;+&nbsp;10&nbsp;=&nbsp;11! wird nicht getrennt, trotz der vielen Leerzeichen.

Eine Trennung in Wörtern, die eigentlich nach den Regeln der Hyphenation möglich sind, wie das berühmte Urin-stinkt, aber an der Stelle nicht getrennt werden sollen, verlangt aber eine eigene Klasse: word-wrap: nobreak

Zu guter Letzt verhindern wir Overflows wenn es weder automatische noch manuelle Trennregeln gibt:

.overflow {
	overflow-wrap: break-word; 
	word-wrap: break-word;
}

Der Trapattoniseufzer ist damit auch erledigt. Wer sich wundert: overflow-wrap ist die modernere Schreibweise und wird irgendwann das word-wrap ablösen. Im Moment nimmt man beides und ist auf der sicheren Seite.

Fazit

Blocksatz und Spalten, mit Sorgfalt eingesetzt, verbessern die Lesbarkeit langer Artikel und die Optik der Seite enorm. Zusammen mit passenden Schrifttypen, berechneten Schriftgrößen, gut gewählten Zeilenabständen werten sie eine Seite für den Leser auf. Um es Redakteuren einfach zu machen empfiehlt sich ein eignes Layout für Magazin-Beiträge, in denen die Klassen für Blocksatz und Hyphenation fest geschrieben sind.