CSS columns – Spaltensatz

CSS columns – Spaltensatz – lässt Text automatisch von einer Spalte in die nächsten laufen und gleicht die Höhe der Spalten an.

Text 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.

Seitenverhältnis
Seitenverhältnis von Monitoren früher und heute

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.

zweispaltiges Grundlinienraster
Ein Grundlinienraster wie im Druck mit CSS columns

Die Empfehlung für einen lesbaren Text lautet: 8 bis 12 Wörter pro Zeile und nicht viel mehr. Spalten bieten einen Ausweg: Sie packen Text mit kurzen Zeilen in Blöcke nebeneinander.

Spaltensatz mit Anspruch

Der Spaltensatz stellt schon beim Print große Anforderungen: Spalten müssen aufgefüllt werden, Absätze müssen mindestens zwei Zeilen umfassen.
Zur hohen Kunst des Spaltensatz gehört der registerhaltige Spaltensatz: Der Text muss in nebeneinander liegenden Spalten auf derselben Grundlinie sitzen.
Auf Webseiten sind diese Anforderungen noch nicht so einfach wie auf dem Papier zu bewältigen, denn hier gibt es keine Konstanten. Ein responsives Webdesign wird die Spalten auf kleinen Monitoren deaktivieren.

Spaltensatz vor CSS3 columns

Bevor CSS das Modul für den Spaltensatz vorstellte, war Spaltensatz ein kompliziertes Geschäft. Nebeneinander liegende div-Elemente bieten keinen einfachen Spaltensatz – wenn der Text länger wird, fließt der Text am Ende einer Spalte nicht automatisch in die nächste Spalte.

Darüber hinaus müssen die Spalten für ein professionelles Erscheinungsbild stets dieselbe Höhe haben, zumindest aber die linken Spalten müssen bis zum Ende der Spaltenhöhe laufen. Einfache div-Tags ohne CSS columns müssten dafür immer wieder manuell oder mit Javascript nachgeführt werden.

Spaltensatz mit Blocksatz und Silbentrennung

Zum Spaltensatz gehört untrennbar eine ausgleichende Silbentrennung, denn beim Spaltensatz wird häufig Blocksatz eingesetzt. Damit die Registerhaltigkeit erhalten bleibt, müssen Zeilenhöhe und Abstände berechnet werden. Hurenkinder und Schusterjungen (politisch korrekter: Witwen und Waisen; englisch: widows und orphans) lassen sich noch nicht zuverlässig vermeiden.

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;
}

Einfache Texte (z.B. AGBs), die nur Überschriften gleicher Größe enthalten, lassen sich in den modernen Browsern im Spaltensatz darstellen.

Auf Webseiten sollten die Spalten nicht zu hoch werden. Ansonsten müsste der Leser die Seiten nach unten scrollen, um dann zum Lesen der zweiten Spalte wieder nach oben zu scrollen.

Für ein komplexes Layout mit Listen, Tabellen oder Formularen ist der Spaltensatz mit CSS noch nicht bereit.

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;
Suchen auf mediaevent.de