CSS columns – Spaltensatz

Spaltensatz in Webseiten

Mit Grid und Flex hat CSS die Darstellung von Inhalten in Spalten vereinfacht, aber das Nebeneinander mit Grid und Flex ist nur für kleine Boxen mit Text und Bild ohne »Überlauf» in benachbarte Spalten sinnvoll. Auch der klassische Spaltensatz des Drucks ist nicht unbedingt für die Darstellung auf Monitoren geeignet: Sind die Spalten höher als der Monitor, müssen Besucher wieder nach oben scrollen, um die zweite Spalte zu lesen. Wenn ein Spaltensatz für Webseiten eingesetzt wird, dann sollten die nebeneinander liegenden Spalten kurz genug sein, dass sie ohne Scrollen im Viewport liegen.

Spaltensatz vs display: flex / display: grid

Spaltensatz organisiert lange Texte eines Themas und verbessert die Lesbarkeit. Spalten lockern den Text auf, sparen Platz bei umfangreichen Informationen und sorgen dafür, dass die Zeilen nicht zu lang laufen. Dagegen werden Tabellen oder Techniken wie Flex oder Grid bei Preislisten oder Vergleichen eingesetzt, wenn die Spalten unterschiedliche Elemente wie Bilder, Text und Überschriften enthalten, um die Vergleichbarkeit herauszuarbeiten.

@media (min-width: 600px) {
	.text-columns {
		column-count: 2;
		column-gap: 40px;
	}
}

Auch lange ungeordnete und geordnete Listen mit kurzen Texten sind sich im Spaltensatz überschaubar organisieren.

1. Douglas Adams »Titanik«
2. Terry Pratchett »Helden«
3. Hergé »Tim und Struppi«
4. Schuiten und Peeters »Der Turm«
5. Edward Gorey »Balaclava«
6. Mervyn Peake »Gormenghast«
7. Douglas Adams »Anhalter«
8. Terry Pratchett »Wachen«

Registerhaltiger Spaltensatz

Desktop-Monitore werden immer größer, die mobilen Geräte hingegen konfrontieren uns mit kleinen Monitoren. Beide zeigen denselben klaren Trend: Das Verhältnis von Breite und Höhe tendiert in den letzten Jahren immer mehr zugunsten der Breite.

Für einen registerhaltigen Spaltensatz müssen line-height und vertikaler margin für alle Elemente berechnet werden: Eine magnetische Grundlinie wie in den Satzprogrammen gibt es in CSS nicht.

Text in Spalten soll den verfügbaren Platz ausnutzen, aber die Länge der Zeilen kurz halten – der Grundgedanke hinter dem Spaltensatz der Layoutprogramme für den Druck.

Unten rechts ziehen zum Verkleinern und Vergrößern des Spaltenblocks

Für einen registerhaltigen Spaltensatz in HTML-Seiten mit CSS columns müssen font-size, line-height und margin für den Fließtext und die Überschriften berechnet werden. Eine magnetische Grundline wie in Satzprogrammen (z.B. Quark oder InDesign) gibt es in CSS nicht.

Das ist ein Beispiel für einen Spaltensatz mit zwei Spalten, Silbentrennung (CSS hyphens) und Blocksatz (text-align:justify). Allem Anschein nach kommt Chrome den Anforderungen an einen sauberen Spaltensatz am nächsten.

.col {
   column-count: 2; 
   column-gap:2em;
   column-width: 270px;
   column-rule-style:dotted; 
   column-rule-width:1px; 
   column-rule-color:silver;

}
.col p {
   margin: 0 0 1.35rem 0;
   font-size: 1rem; 
   line-height: 1.35rem;
   text-align: justify; 
   hyphens:auto;
   orphans:2; 
   widows: 2;
}
.col h3 {
	font-size: 1.2rem; 
	line-height: 1.35rem;
	margin: 1.35rem 0 1.35rem 0;
	column-break-after: avoid;
	break-after: avoid-column;
	-webkit-column-break-inside:avoid;
}

Wenn Bilder in die Spalten gesetzt werden, muss die Höhe der Bilder ein Vielfaches der Grundlinienhöhe entsprechen. Nur so kann verhindert werden, dass ein Bild die virtuelle Grundlinie verschiebt und die Spalten aus dem Register geraten.

Baseline ist ein CSS Framework, das sich auf Typografie konzentriert und eine baseline – eine Grundlinie – ähnlich der Grundline in Quark und InDesign – mitbringt. baseline besteht aus drei Komponenten: Typografie, Formulare und Grid für einen registerhaltigen Spaltensatz.

column-break-inside

Damit ein Absatz zwangsweise vollständig innerhalb einer Spalte gerendert wird, kann column-break-inside: avoid verhindern, dass ein Absatz von einer in die nächste Spalte überfließt.

.col-2 blockquote { 
   page-break-inside: avoid;                 // Firefox   
   column-break-inside: avoid;               // Chrome, Opera, Safari
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
      break-inside: avoid;
}

CSS columns und orphans

CSS orphans (»Schusterjungen« oder »Waisenkinder«) ist eigentlich eine Eigenschaft für media="print". Orphans oder Schusterjungen entstehen, wenn eine Seite oder Spalte nach der ersten Zeile eines Absatzes den Text umbricht.

CSS widows (»Witwe«) entstehen, wenn die letzte Zeile eines Absatzes durch einen Umbruch auf die nächste Seite oder in die nächste Spalte rutscht und die einsame Zeile einen verwaisten Eindruck macht.

widows

Minimale Zahl von Zeilen, die oben auf einer neuen Seite zusammen gehalten werden sollen

orphans

Minimale Zahl von Zeilen, die unten auf einer Seite zusammen gehalten werden sollen

Browser, die sowohl columns als auch orphans unterstützen, wenden orphans aber auch beim Spaltensatz für media="screen" bei Block-Elementen an.

column-width

Wenn die Breite der Spalten nicht angegeben wird, nehmen sich die Browser den verfügbaren Platz. Wenn column-width angegeben wird und der Platz nicht ausreicht, setzen die Browser den Text in eine einzige Spalte.

column-rule – Linien zwischen Spalten

Bei längeren Textspalten kann eine trennende Linie die Lesbarkeit des Texts verbessern.

column-rule-style: solid; 
column-rule-width: 1px;
column-rule-color: blue;