Typografie/Spalten
- 30min
- einfach
- Grundkenntnisse in
Immer breitere Monitore ermöglichen immer breitere Seiten. Dies ist aber nicht lesefreundlich, da man bei langen Zeilen nur schwer den Anfang der neuen Zeile findet. Mit der Eigenschaft columns können Sie Fließtext und lange Listen in mehrere Spalten aufteilen.[1][2]Im Gegensatz zu bisherigen workarounds ist dieses Layout flexibel, das heißt z. B. dass Spaltenumbrüche nur bei Bedarf erfolgen und die Anzahl der Spalten ebenfalls in Abhängigkeit von der Breite des Browserfensters variabel ist.
Das hier beschriebene Mehrspalten-Layout ist auf Block-Container anwendbar. Damit sind Block-Elemente gemeint, in denen der normale Textfluss (inline flow) gilt oder die nur Block-Elemente enthalten, die der klassischen Blockformatierung folgen. Container-Elemente, die table-, flex- oder grid-Layout verwenden, können nicht für das Mehrspalten-Layout verwenden werden, das von den column-Eigenschaften erzeugt wird.
Inhaltsverzeichnis
Mehrspaltigkeit
column-count
Mit der Eigenschaft column-count können Sie für ein Element durch die Angabe der Spaltenanzahl bestimmen, ob es in mehreren Spalten angezeigt werden soll. Die Breite der Spalten richtet sich nach dem zur Verfügung stehenden Platz. column-count gibt dabei die maximale Spaltenanzahl an.
...
.mehrspaltig {
column-count: 2;
}
Der Artikel ist 30em breit und wird, da es keine Angaben zur Mindestbreite gibt, in 2 Spalten aufgeteilt.
Wenn gleichzeitig eine Angabe zur Spaltenbreite gemacht wurde, werden ggf. weniger Spalten erzeugt.
column-width
Mit der Eigenschaft column-width können Sie für ein Element durch die Angabe einer Mindestspaltenbreite bestimmen, ob es in mehreren Spalten angezeigt wird. Die Spalten werden dabei gleichmäßig befüllt. Die Anzahl der Spalten und deren tatsächliche Breite ergeben sich aus dem zur Verfügung stehenden Platz.
Erlaubte Werte sind …
- Längenangabe
-
auto: (Standardwert) Er bedeutet, dass die Anzahl der Spalten durchcolumn-countfestgelegt wird oder dass es nur eine Spalte gibt.
.mehrspaltig {
column-width: 12em;
max-width: 40em;
}
Der Artikel wird in Spalten mit einer Mindestbreite von 12em aufgeteilt. Da die max-width 40em beträgt und der Abstand zwischen den einzelnen Spalten durch den Standardwert von gap ca. 1em beträgt, ist die (bei größeren Viewports) angezeigte Breite nahe an den 12em.
columns
Die Eigenschaft columns ist eine Zusammenfassung der möglichen Einzelangaben column-width und column-count.
.beispiel1 ul {
columns: 5 6em;
}
.beispiel2 ul {
columns: 5 12em;
}
.beispiel3 ul {
columns: 2 12em;
}
In diesem Beispiel werden verschiedene Kombinationen für Spaltenanzahl/Spaltenbreite vorgestellt.
Spaltenzwischenräume gestalten
In den Default-Stylesheets der Browser wird bei columns eine 1em breite Spalte ohne Linie erzeugt. Diese können Sie mit CSS genauer formatieren.
column-rule-style
Mit der Eigenschaft column-rule-style können Sie für mehrspaltig anzuzeigende Elemente verschiedene Schmuckrahmen definieren. Damit die Typen zur Geltung kommen, empfiehlt sich die Kombination mit Angaben zur Spaltenrahmendicke und/oder zur Farbe.
.mehrspaltig {
column-count: 2;
column-gap: 10em;
column-rule-style: double;
}
column-rule-width und gap
Mit der Eigenschaft column-rule-width können Sie für ein mehrspaltig anzuzeigendes Element die Dicke der Linien zwischen den Spalten bestimmen. Sinnvollerweise sollten Sie diese Angabe zumindest mit einer Angabe zum Linientyp kombinieren, gegebenenfalls aber auch mit einer Festlegung der Linienfarbe.
Erlaubt ist eine numerische Angabe (mit Ausnahme von Prozentwerten) für die Dicke oder einer der folgenden Werte:
-
thin= dünn. -
medium= mittelstark. -
thick= dick.
.mehrspaltig {
column-count: 2;
column-rule-width: thick;
column-rule-style: dashed;
gap: 10em;
}
Zur Visualisierung sind die Kindelemente des Divs der Klasse „mehrspaltig“ mit einem Hintergrund versehen.
Damit die dicke gestrichelte Trennlinie besser zur Geltung kommt, wurde der Zwischenabstand mit gap auf übertriebene 10em vergrößert. Die Eigenschaft wurde zuerst als column-gap für die vertikalen Zwischenräume im Splatenlayout eingführt, findet sich aber mittlerweiel auch bei Grid Layout und Flexbox.
Eine Angabe von gap ist im Allgemeinen nicht nötig, da der Standardwert normal ca. 1em Platz lässt.
column-rule-color
Mit der Eigenschaft column-rule-color können Sie für ein mehrspaltig anzuzeigendes Element die Farbe der Linie zwischen den Spalten bestimmen. Die Angabe dazu sollten Sie mit einer Angabe zum Typ und/oder einer Angabe zur Spaltenrahmendicke kombinieren.
Erlaubt ist eine Farbangabe oder der Wert transparent. Initialwert ist die Schriftfarbe des Elements (currentColor).
.mehrspaltig {
column-count: 2;
column-gap: 10em;
column-rule-style: dotted;
column-rule-color: red;
}
column-rule
Die Eigenschaft column-rule ist eine Zusammenfassung der möglichen Einzelangaben column-rule-width, column-rule-style und column-rule-color, mit der Sie das Aussehen der Linien zwischen den Spalten bestimmen können.
Notieren Sie Angaben zu Linienstärke, Style und Farbe mit Leerzeichen dazwischen:
- Linienstärke: optional, Voreinstellung
medium - style: Voreinstellung
none, alle border-style-Werte möglich - Farbangabe: Voreinstellung ist die Textfarbe des Elements
column-rule: width style color;.
.mehrspaltig {
column-count: 3;
gap: 1em;
column-rule: dashed;
}
Der mehrspaltige Text erhält mit column-rule: dashed eine gestrichelte Trennlinie. Als Strichstärke wird die Voreinstellung medium; als Farbe die Textfarbe verwendet.
Zur Visualisierung sind die Kindelemente des Divs der Klasse „mehrspaltig“ mit einem Hintergrund versehen.
.mehrspaltig {
columns: 5 12em;
column-rule: medium dotted gold;
-webkit-hyphens: auto;
hyphens: auto;
}
Der mehrspaltige Text erhält mit column-rule: medium dotted gold; eine mittelbreite goldene gepunktete Trennlinie.
Zur Visualisierung sind die Kindelemente des Divs der Klasse „mehrspaltig“ mit einem Hintergrund versehen.
Der columns-Algorithmus nimmt jedoch keine Rücksicht auf Absätze, sodass teilweise einzeln stehende Zeilen entstehen.
column-span
Die Eigenschaft column-span erlaubt es, Elemente über mehrere Spalten zu verteilen, wie es etwa mit dem HTML-Attribut colspan für Tabellen möglich ist.
Folgende Angaben sind möglich:
-
none: Das Element fließt nicht über mehrere Spalten hinweg. -
all: Das Element fließt über sämtliche Spalten hinweg. Der Inhalt davor wird automatisch zwischen den Spalten ausgeglichen.
.mehrspaltig {
columns: 5 12em;
column-rule: medium dotted gold;
hyphens: auto;
}
h2 {
font-family: 'Parisienne', cursive;
column-span: all;
}
Der mehrspaltige Text besteht aus bis zu 5 Spalten mit Textabsätzen und Überschriften.
Die h2-Überschriften werden mit column-span: all; über alle Spalten ausgedehnt.
column-count den Wert auto hat, füllt der mit column-span: all; versehene Inhalt nur die erste Spalte. Dies kann mit einer expliziten Angabe für width behoben werden.Vertikaler Rhythmus
Auch wenn Sie wahrscheinlich noch nie vom vertikalen Rhythmus gehört haben, ist dies eine der typografischen Feinheiten, die Ihrer Webseite den letzten Schliff geben können. Der Begriff stammt aus dem Druckwesen. Es geht dabei darum, dass mehrspaltiger Text so gesetzt werden soll, dass die Grundlinien des Texts in den Spalten auf gleicher Höhe liegen. Der Anlass dafür ist, dass das menschliche Auge sich unbewusst an gleichmäßigen Linien und Strukturen orientiert. Ein vertikaler Rhythmus macht einen Text deshalb nicht nur optisch ansprechender sondern auch lesbarer, weil das Hirn Zeit zum Erfassen der Textstruktur spart. Dazu müssen Schriftgröße, Abstände und eventuelle Randlinien genau aufeinander abgestimmt werden.
Mit der lh-Einheit können Sie die Zeilenhöhe als zentrale Einheit für Zeilenhöhe, Abstände und anderes zu verwenden. Im Allgemeinen ist 1lh der vom Browser berechnete Wert für die line-height-Eigenschaft eines Elements. Es gibt eine Ausnahme: wird die lh-Einheit in einer der font-Eigenschaften oder in der line-height-Eigenschaft verwendet, bezieht sie sich auf die berechnete Zeilenhöhe des Elternelements, weil sonst ein Selbstbezug entstehen würde.
.mehrspaltig {
columns: 3 16em;
hyphens: auto;
}
.baseline-grid {
line-height: calc(1lh + 1px);
background-color: gold;
background-image: repeating-linear-gradient(
transparent 0 calc(1lh - 1px),
midnightblue calc(1lh - 1px) 1lh
);
}
.baseline-grid * {
line-height: 1lh;
margin-block: 1lh;
text-indent: 1lh;
}
.baseline-grid .smaller {
font-size: 0.8em;
}
Der Text in diesem Beispiel wird in drei Spalten mit einer Mindestbreite von 16em aufgeteilt, wenn der Viewport genügend groß ist. Damit die Abstände zwischen den einzelnen Wörtern nicht zu groß werden, wurde eine Silbentrennung mit hyphens hinzugefügt.
Der vertikale Rhythmus wird durch ein Linienmusters sichtbar gemacht. Diese Linien sollen 1px hoch sein, und um Platz für sie zu schaffen, erhöhen wir zunächst die Zeilenhöhe des .baseline-grid Elements um 1px. Wie oben beschrieben, bezieht sich 1lh in der line-height-Eigenschaft auf das Elternelement. Diese Zeilenhöhe wird dann in der nachfolgenden CSS-Regel als line-height und margin-block aller Kindelemente des .baseline-grid gesetzt, so dass Textzeilen und -abstände alle gleich hoch sind.
Das Linienmuster selbst wird mit Hilfe eines repeating-linear-gradient() erzeugt. In der background-image Eigenschaft gilt der Normalfall, dass sich 1lh auf das Element selbst bezieht, also auf die um 1px erhöhte Standardzeilenhöhe. Das Gradientenmuster besteht aus einem transparenten Streifen, der um 1px schmaler ist als 1lh, gefolgt von einem mitternachtsblauen Streifen, der von 1lh - 1px bis 1lh geht, also genau 1px hoch ist. Das gesamte Wiederholmuster hat damit eine Höhe von 1lh und entspricht so der Zeilenhöhe der Textelemente.
Das h2-Element verwendet die gleiche Zeilenhöhe wie die Textparagraphen und fügt sich damit in den vertikalen Rhythmus ein. Die Schriftgröße der Überschrift ist mit 3.5em viel zu groß für die Zeile, deshalb ragt der Überschriftentext in den Randbereich des h2-Elements hinein. Schauen Sie sich das gerne in den Entwicklerwerkzeigen an.
widows und orphans
Bisher war es nicht möglich, die column-Eigenschaft so zu steuern, dass bei Absätzen nicht einzelne Zeilen isoliert am Ende (Schusterjunge), bzw. Beginn (Hurenkind) der Spalte überstehen.[3]
Mit orphans können Sie bestimmen, wie viele Zeilen eines längeren Fließtextabsatzes auf der Seite vor dem Umbruch mindestens stehen sollen. Erlaubt ist eine Zahl für die Anzahl Zeilen. Voreinstellung ist 2.(DTP-Fachjargon hierzulande: Schusterjungen).[4]
.mehrspaltig {
columns: 3 16em;
hyphens: auto;
orphans:3;
}
Analog dazu regelt die widows-Eigenschaft, wie viele Zeilen eines längeren Fließtextabsatzes auf der Spalte nach dem Umbruch auf der neuen Seite mindestens stehen sollen.
.mehrspaltig {
columns: 3 16em;
hyphens: auto;
widows:3;
}
Exkurs: Scroll Snap bei columns
Ist es möglich bei einer variablen Anzahl von Spalten, die mit columns erzeugt wurden, von einer Spalte zur anderen zu scrollen (siehe auch: Scroll Snap)? Das Problem ist ja, dass man die einzelnen Spalten nicht selektieren kann, andererseits aber nicht weiß, welche Kindelemenente sich in welcher Spalte befinden.
Die Lösung, die Gunnar Bittermann fand[5], scheint verblüffend einfach:
body {
height: 100vh;
padding: 1em 2em 0;
display: flex;
flex-direction: column;
}
div {
overflow: auto;
padding: 0.5em 0;
column-width: 15em;
column-gap: 3em;
scroll-snap-type: x mandatory;
}
section {
margin: 1.4em 0;
break-inside: avoid;
scroll-snap-align: start;
}
Jedes section-Element enthält mit scroll-snap-align: start; eine Fangposition. Die Browser ignorieren die zusätzlichen Angaben, falls sich mehrere Fangpositionien an gleicher Stelle befinden.
Probleme:
- In Chromia braucht der Container noch tabindex="0", damit man den Tastaturfokus darauf setzen und mit Pfeiltasten scrollen kann.
- Im Firefox kann man mit → zwar vorwärts scrollen, mit ← aber nicht mehr zurück.
- Die Spaltenbreite wird so berechnet, dass eine ganzzahlige Anzahl von Spalten ins Containerelement passt. Das mag zwar chic aussehen, auf Systemen, die – solange man nicht scollt – keine Scrollbar zeigen (macOS, iOS, Android?), haben Nutzer aber keinen visuellen Hinweis darauf, dass da rechts noch mehr Inhalt ist, zu dem man horizontal scrollen kann.
Besser wäre es, wenn rechts eine Spalte angeschnitten wäre oder man irgend einen anderen Hinweis (Pfeil?) bekäme.
Siehe auch
Anzahl und Breite der Spalten
Abstände zwischen den Spalten
Linien zwischen den Spalten
Weblinks
- ↑ W3C: CSS Multi-column Layout Module
- ↑ W3C: Algorithmus zur Bestimmung von Spaltenzahl und -breite
- ↑ eine Kritik: http://www.castor-und-pollux.de/2010/01/6-typographische-feinheiten-im-web/#vertikal
- ↑ W3C: Breaks Between Lines: orphans, widows
- ↑ SELF-Forum: Scroll Snap bei columns vom 13.06.2021
