Hilfe:Textgestaltung/Mehrspaltigkeit und Listen

Diese Hilfeseite beschreibt, wie sich bei der Textgestaltung einer Wiki-Seite mehrspaltige Listen (Aufzählungen) einsetzen lassen. Verwendet wird „CSS“, das auch ohne aktiviertes JavaScript funktioniert.

Layout-Tabellen

Darunter werden Tabellen verstanden, die nicht Daten inhaltlich strukturieren, sondern optische Elemente auf dem Bildschirmbereich arrangieren.

• Dies gibt eine feste Struktur vor, die sich der aktuellen Situation nicht anpassen kann.
• Auf sehr breiten Bildschirmbereichen werden die Elemente womöglich mit übermäßigen Lücken auseinandergezogen; auf einem kleinen Bildschirm werden die Inhalte zerquetscht, durch sehr viele Zeilenumbrüche schwer lesbar gemacht.
• Teile der Inhalte können überhaupt nicht mehr lesbar sein, außerhalb des sichtbaren Bildschirmbereichs liegen, sich mit anderen Elementen teilweise überdecken.

Derartige Techniken waren im letzten Jahrhundert, in der Frühzeit der Webseitenentwicklung einmal üblich, sind aber seit langer Zeit strikt verpönt. Gleichwohl findet man sie in Hunderttausenden Artikeln der deutschsprachigen Wikipedia. Sie sind in aller Regel nur auf Desktop-Ansichten, also für auf einem Schreibtisch stehende PC und deren größere Bildschirme geeignet, zuweilen auch noch für Tablets, versagen jedoch auf Smartphones.

Responsives Design

Responsives Design bedeutet, dass sich die Darstellung des HTML-Dokuments dem momentanen Leser, seinen Gerätschaften, seinen körperlichen und geistigen Möglichkeiten automatisch anpasst.

• Auf einem normalen PC-Desktop, mit einer Zeilenbreite, die ähnlich viele Buchstaben enthält wie auf einer Buchseite, soll eine brauchbare Darstellung erreicht werden können.
• Auf einem Smartphone steht deutlich weniger Bildschirmbreite zur Verfügung. Das auf einen Desktop zugeschnittene Design führt dann entweder zu unnatürlich schmalen Spalten mit sehr vielen Zeilenumbrüchen, oder eine Tabelle ragt rechts aus dem sichtbaren Bildschirmbereich heraus und es können nur Teile wahrgenommen werden.
• Moderne hochauflösende Breitbandbildschirme ermöglichen technisch eine Art Kinoleinwand, also besonders viele Elemente nebeneinander. Der Verlauf eines Artikels ist allerdings mehr darauf ausgelegt, dass die Elemente, Abschnitte, Tabellen untereinander folgen. Eine Zeilenbreite in voller Breite solcher Bildschirme ist nicht mehr lesbar, da leicht 300 Buchstaben in einer Textzeile stehen könnten. Hier findet das Auge nicht mehr zum Anfang der folgenden Zeile zurück. Nebeneinander angeordnet werden könnten allerdings mehrere Bilder oder unabhängige kurze Textblöcke.

Die Anzahl der Zeichen in einer Zeile, die Menschen gut lesen können, ist individuell verschieden. Typisch sind etwa 100 Buchstaben. Wer Schwierigkeiten hat, möchte aber ggf. weniger und zieht sich sein Bildschirmfenster schmaler. Andere könnten lange Zeilen auch gut lesen und ziehen Bildschirmfenster bei entsprechenden Möglichkeiten breiter.

Wer nicht gut gucken kann, hat in seinem Browser entsprechend große Schriftgrößen eingestellt.

Wir stellen einen Wikitext und damit ein HTML-Dokument bereit, das für alle Leser gleich ist, aber im Endgerät aller Abrufenden nach technischen und persönlichen Gegebenheiten angepasst präsentiert wird. Dabei bauen wir Tipps für die Software ein, die signalisieren, wo welche dynamischen Formatierungen sinnvoll und erwünscht wären.

Vor- und Nachteile der Mehrspaltigkeit

Zu den Konventionen im Projekt siehe Wikipedia:Spaltensatz.

• Schlecht eingesetzte, insbesondere überflüssige und den aktuellen Inhalten nicht angepasste Features können zur Verschlechterung des Layouts führen. Das gilt insbesondere dann, wenn zu wenig Inhalt im konkreten Artikel vorhanden ist, um diesen dann noch einmal auf viele einzelne Spalten zu verteilen.
• Die zusätzliche Syntax ist störend für andere und weniger erfahrene Autoren und könnte Benutzer des VisualEditor in erhebliche Schwierigkeiten bringen, wenn bei Vorlagennutzung größere Mengen an Wikisyntax als Vorlagenparameter erscheinen, die neueren Anwender des VisualEditor jedoch überhaupt keine Wikisyntax mehr kennen.

Der Vorteil für den betreffenden Artikel muss also deutlich überwiegen.

• Besonders lange sehr schmale Aufzählungen lassen viel Raum auf der rechten Seite frei, sind unübersichtlicher wenn länger als die zu erwartende Bildschirmhöhe.

Voraussetzungen

Es müssen regelmäßig viele Listenpunkte vorhanden sein, was meist mindestens zehn meint.

Andernfalls bringt die Verteilung auf mehrere Spalten mehr Unübersichtlichkeit und Irritation für die Leser als irgendeinen Vorteil oder bessere Raumausnutzung.

„Mehrspaltige Listen“ bezieht sich auf Aufzählungen mittels der WikiSyntax # (nummeriert) und * (unnummeriert). Für andere Elemente gibt es ggf. auch Möglichkeiten des dynamischen Layouts, die jedoch hier nicht Thema sind.

Schrifteigenschaften

Die beim aktuellen Leser vorhandenen und für das Layout maßgeblichen Eigenschaften werden in der relativen Schriftbreite em abgebildet.

• Diese bedeutet näherungsweise die Breite eines großen „M“.
• In der Proportionalschrift wird die Länge von Wörtern auf diese Vergleichsgröße bezogen.
• Absolute Maße wie px (Pixel) oder gar pt sind unzulässig, da sie nicht auf die momentanen Schrifteigenschaften bezogen sind.
• Egal welche Schrift vom Leser eingestellt wurde, durch die Anzahl von em wird relativ genau der geforderte Platzbedarf von Wörtern beschrieben.
• Neben em gibt es noch einige weitere relative Maßeinheiten, etwa ex und rem, die im Inhaltsbereich und unserem Artikeltext jedoch nicht verwendet werden sollen, um die Länge von Textfragmenten zu beschreiben.
• Es kann zu geringfügig unterschiedlichen Längen von Wörtern kommen, etwa wenn Leser eine Schrift mit Serifen eingestellt haben. Das Wort Illinois enthält mehrere besonders schmale Buchstaben I, i, l – in einer serifenlosen Schrift passen davon besonders viele in die Breite eines großen „M“, während es durch Serifen etwas weniger sein könnten. Auch andere Features eines Schriftdesigns können das Verhältnis schmaler zu breiten Buchstaben beeinflussen.
• Die Wortlängen sind deshalb immer großzügig aufzurunden.
• Auf dicktengleiche Schriften (monospace, Schreibmaschine) ist das Konzept nicht anwendbar; hier ist jedes Zeichen immer gleich breit.

CSS-Möglichkeiten

Seit einigen Jahren bieten alle für die Wikipedia verwendbaren und unterstützten Browser mehrere Features an, die sich für dynamische, responsive, auf die Situation bei den Lesern eingehende Gestaltungen nutzen lassen. Dies sind:

• column-width
• column-count
• column-gap
• page-break-inside (bessere Verfügbarkeit als break-inside)

Sie werden mit dem Attribut für CSS-Code style= den jeweiligen Elementen zugeordnet. Das wird in der Regel ein umschließendes <div> sein.

Spaltenbreite

Zuerst muss die Spaltenbreite sorgfältig den erwarteten und schon weitgehend bekannten Inhalten angepasst werden. Die Eigenschaft ist column-width: und nach dem Doppelpunkt muss eine Breitenangabe in em folgen.

Je nachdem, wie viel nutzbarer Platz auf dem Bildschirm des momentanen Lesers vorhanden ist, werden entsprechend viele Spalten dieser Breite gleichmäßig nebeneinander angeordnet, wobei die ganze erlaubte Breite ausgenutzt wird.

Schmale Spalten

Zu breite Spalten sind sinnlos, wenn etwa nur dreistellige Zahlen oder Abkürzungen mit vier oder fünf Buchstaben aufgezählt werden.

Adventskalender

1 2 3 4 5 6 7 8

9 10 11 12 13 14 15 16

17 18 19 20 21 22 23 24

Hier muss die Spaltenbreite schmal gewählt werden; vielleicht 3em einschließlich etwas Abstand zum folgenden Element.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

Bei schmalen Spalten kann eine Breitenbeschränkung sinnvoll werden.

Einzelne Titel

Wenn eine Auflistung von Begriffen, etwa bei Film- oder Musiktiteln gezeigt werden soll, dann wird man diese möglichst in einer einzelnen Zeile zeigen wollen. Umgekehrt soll die Spalte aber auch nicht viel breiter als der längste zu erwartende Begriff sein. Je nach aktuellen Inhalten in speziell dieser Liste ist also ein geeigneter Wert zu wählen; vielleicht mal 20em oder auch 25em oder 15em oder was immer. Einzelne Ausreißer, also besonders lange Ausdrücke (etwa vor einer in Klammern eingeschlossenen Erläuterung oder Ortsnamen), erhalten vielleicht besser vorsorglich an einer inhaltlich gut passenden Stelle mittels <br /> einen festen Zeilenumbruch. Eine Breitenbeschränkung kann auch hier sinnvoll sein.

Fließtext, längere Textpassagen

Die Spaltenbreite sollte mindestens 35em, besser 40em oder mehr betragen, falls längerer und auf mehrere Zeilen umzubrechender Fließtext auftritt.

• Schmalere Spalten provozieren extrem viele Zeilenumbrüche.
• Damit stehen nur wenige Wörter in einer Zeile, weil jeweils ein langes Wort auf eine neue Zeile verschoben werden muss.
• Darunter leiden Lesbarkeit des Textes und optische Anmutung.
• Dies ist das analoge Problem wie beim Blocksatz.

Grundstruktur

Nachdem eine für den Einzelfall sinnvolle Spaltenbreite festgelegt wurde, kann die Liste in ein entsprechendes Element eingebettet werden. Das sieht beispielsweise wie folgt aus:

<div style="column-width:7em">
* Anton
* Berta
* Cäsar
* …
* Ypsilon
* Zacharias
</div>

Die Aufzählung wird von öffnenden und schließenden <div> und </div> eingerahmt. Das öffnende <div> erhält das Attribut style= und dieses enthält die CSS-Deklarationen.

Anzahl der Spalten

Die CSS-Eigenschaft column-count: gibt die maximale Spaltenanzahl an.

• Gerade wenn die einzelnen Spalten sehr schmal sind, wäre es vorstellbar, dass auf einem breiten Bildschirm zehn oder zwölf Spalten nebeneinander entstehen. Das wäre ungünstig für die Lesbarkeit.
• Insbesondere bei schmaler Breitenangabe sollte deshalb die Maximalzahl der Spalten nebeneinander begrenzt werden, etwa: column-count:5
• Zu berücksichtigen ist auch die Gesamtzahl der Elemente. Gibt es insgesamt nur 11 Elemente, dann würden bei fünf oder sechs Spalten manche nur noch zwei Listenpunkte untereinander enthalten, irgendwann womöglich nur einen einzigen.
• Jede Liste sollte deshalb wenigstens vier Punkte untereinander liefern, zumindest in deren allererster Spalte. Andernfalls sähe das Resultat ziemlich verunglückt aus.
• Bei breiten Spalten, insbesondere für Fließtext, sind auch bei breiteren sinnvollen Bildschirmbreiten kaum Probleme zu erwarten.

Mit einem Semikolon ; wird die Angabe der Spaltenzahl an die Spaltenbreite angehängt; etwa:

column-width:20em; column-count:4;

Abstand zwischen Spalten

Es gibt eine Eigenschaft column-gap.

• Dies bewirkt einen garantiert freibleibenden Raum zwischen zwei benachbarten Spalten.
• Pfiffiger ist es meist, die Spaltenbreite um etwa zwei em breiter zu wählen als voraussichtlich für die Texte benötigt wird. Dadurch ergibt sich automatisch ein Abstand zur folgenden Spalte. Sollte trotzdem einmal eine besondere Schrift beim Leser noch einige Pixel für die letzte Serife benötigen, so stört das nicht weiter und die als freibleibend geplante Zone kann mal einige Pixel auffangen. Damit kann ein störender Zeilenumbruch vermieden werden.
• Allerdings wird das gap nur zwischen Spalten berechnet; damit ließe sich theoretisch am rechten Rand ein solcher Zwischenraum einsparen. Auch hier könnte jedoch gelegentlich eine etwas breitere Textspalte notwendig werden, und der letzte Abstand als „Puffer“ wirken.
• Browser setzen in der Regel von sich aus einen Mindestwert für column-gap an, etwa 1em, falls dies nicht explizit angegeben wurde.
• Die Wertzuweisung ist mittels Semikolon ; an die bisherigen Eigenschaften anzuhängen.
• Links von Aufzählungszeichen gibt es einen kleinen optischen Abstand, der nicht von der vorangehenden Spalte überschrieben werden kann. Ein Mindestabstand ist damit immer gesichert.
• Wenn Fließtext erwartet wird, stellt die (implizite) Forderung column-gap:1em sicher, dass keine Zeile allzu dicht an die folgende Spalte heranreicht, was bei vielen Zeilen sonst immer mal wieder vorkommen könnte.

Breitenbeschränkung

Bei schmaleren Spalten und/oder bei Begrenzung der Spaltenanzahl kann es sinnvoll sein, die Gesamtbreite künstlich zu begrenzen.

• Die Verteilung der Spalten erfolgt gleichmäßig über die nutzbare Breite. Bei wenigen relativ schmalen Spalten würde sich zwischen den Inhalten jeweils eine auffallende Lücke ergeben.
• Das CSS-Attribut ist max-width und der Wert ist das Produkt aus zulässiger Anzahl der Spalten und der Spaltenbreite, ggf. zuzüglich der summierten Breite aller Abstände zwischen den Spalten, möglichst plus einer Kleinigkeit zur Vermeidung von Rundungsproblemen.
• Die Wertzuweisung ist dann mittels Semikolon ; an die bisherigen Eigenschaften anzuhängen; etwa:

column-width:20em; column-count:4; max-width: 85em;

• Im Prinzip wäre das ein alternativer wenn auch wenig übersichtlicher Weg, um die zulässige Anzahl der Spalten zu begrenzen.

Blockweise Gruppierung und Zwischenüberschriften

Es kann der Wunsch bestehen, einzelne Gruppen von Listenpunkten zusammenzuhalten, auch mit Überschriften zu versehen.

• Auf Hilfe:VisualEditor/Index ist eine derartige Gruppierung zu sehen, bei der die mit Überschrift versehenen Blöcke zusammengehalten werden.

Dabei werden die einzelnen Listen und ihre Überschriften mittels eines jeweils diese Gruppe zusammenhaltenden <div>-Elements umschlossen:

<div style="page-break-inside:avoid">
=== G ===
* [[Hilfe:Galerie/VisualEditor|Galerie]]
* [[Hilfe:Graph/VisualEditor|Grafik]]
</div>

Die CSS-Eigenschaft page-break-inside:avoid verhindert, dass diese Liste oder ihre Überschrift auf unterschiedliche Spalten verteilt werden.

Innerhalb von Artikeln sollte jedoch darauf verzichtet werden Überschriften des Inhaltsverzeichnisses in solche Listen einzubinden, da Überschriften (mit Bearbeitungsmöglichkeit des Inhalts) generell am linken Seitenrand stehen sollten.

Weitere Eigenschaften

CSS bietet noch weitere Möglichkeiten, die jedoch nicht von allen Browsern unterstützt werden und für unsere nüchternen enzyklopädischen Artikel auch übermäßig dekorativ wären.

Vorlage:column-multiple

Diese Vorlage bietet besondere Einstellungen an, um gelegentlich auftretende negative Effekte zu vermeiden, die vor allem aus der MediaWiki-Software und Projektkonfiguration herrühren können. Sie sollte vorsichtshalber vor jedem Einsatz der hier beschriebenen CSS-Mehrspaltigkeit eingefügt werden.

Vorlage:Mehrspaltige Liste

Diese Vorlage stellt einige komfortable Effekte bereit; hat allerdings wie jede Vorlage gegenüber direkter HTML-Syntax das Problem, dass Zeichen wie Pipe-Symbol und schließende geschweifte Klammern zunächst auf die Vorlagensyntax wirken würden.

Benutzer des VisualEditor könnten in erhebliche Schwierigkeiten geraten, wenn sie mit der Wikisyntax nicht vertraut sind, aber gezwungen werden, diese als Vorlagenparameter bearbeiten zu müssen.

Erprobungs-Syntax

Aus den ersten Jahren, vielleicht ab 2014, bevor die neue CSS-Syntax ab etwa 2017 als Standard umgesetzt wurde, können noch vorangestellte Codes wie -moz- oder -webkit- in unseren Quelltexten stammen:

-moz-column-count

Diese müssen entfernt werden. Sie gehen auf die Zeit zurück, als noch zur Erprobung bestimmte Browser adressiert wurden; -moz- steht für „Mozilla“ (Firefox) usw. („proprietärer Präfix“).

• Heute würden sie die Erkennung durch sämtliche anderen Browser verhindern, falls sie allein stünden.
• Stehen sie zusätzlich zum mittlerweile standardisierten Attribut gleichen Namens und mit gleichem Wert, dann sind sie inzwischen praktisch wirkungslos und können gelegentlich entfernt werden.

Blocksatz und Worttrennung

Um Blocksatz zu ermöglichen, ist es wichtig, dass die Lücken zwischen Wörtern dabei nicht zu groß sind. Das setzt Worttrennung voraus, da ein langes Wort, das über das Zeilenende hinausragt, sonst auf der folgenden Zeile erscheinen muss. In der vorangehenden Zeile wird viel Platz frei, der in Form von Zwischenräumen an die vorangehenden Wörter verteilt werden muss, was dann unnatürlich große Abstände zwischen den Wörtern bewirkt.

Worttrennung für die deutsche Sprache ist schwierig; die Regeln und Ausnahmen sind hochkomplex und von der inhaltlichen Bedeutung abhängig. Hinzu kommt, dass unsere enzyklopädischen Artikel viele ungewöhnliche Namen und Begriffe enthalten, die über das Alltagsvokabular weit hinausgehen. Ein Standard-Wörterbuch enthält diese Namen und exotischen Begriffe nicht. Damit sind derzeitige Webbrowser regelmäßig nicht zur zuverlässigen Worttrennung in deutschsprachigen Wikipedia-Artikeln in der Lage.

In der deutschen Sprache gibt es die Möglichkeit zur unbegrenzten Bildung von Komposita, wodurch besonders lange Einzelwörter entstehen, die für die Worttrennung in inhaltliche Teilwörter zerlegt werden müssen. Dies ist in Webbrowsern nicht zufriedenstellend eingebaut. In der englischen Sprache sind die Wörter deutlich kürzer, die Bildung langer Zusammensetzungen ist unüblich. Deshalb sehen Demonstrationsbeispiele für Blocksatz auf Englisch regelmäßig überzeugend aus; aber hier können Wörter schlicht an den Leerzeichen oder gelegentlichen Bindestrichen auf neue Zeilen geschrieben werden.

Das analoge Problem besteht bei Fließtext in schmalen Spalten.

Weitere Informationen

• Hilfe:Listen – Wikisyntax für Aufzählungen
• Hilfe:CSS – Stildefinitionen in einer Wiki-Seite
• Hilfe:Barrierefreiheit#Strukturen nicht zur Dekoration missbrauchen – Hintergrundinformationen
• Wikipedia:Spaltensatz – Projektrichtlinien
• Vertiefung im selfhtml-Wiki