CSS, HTML und Javascript mit {stil}

CSS columns – Spaltensatz

CSS text-columns Spaltensatz für Webseiten

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

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

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

Registerhaltiger Spaltensatz

Grundlinienraster für registerhaltigen SpaltensatzGrundlinienrasterfür registerhaltigen SpaltensatzGrundlinieIn Satzprogrammen wie Quark und InDesignsorgt ein Grundlinienraster dafür, dass die Zei-len der Absätze und Überschriften immer aufderselben Höhe liegen. Die linke Spalte darfnicht kürzer als die rechte sein.Absatzformate im Spaltensatz müssen Huren-kinder und Schusterjungen vermeiden. JederAbsatz muss dabei mindestens zwei Zeilen zu-sammenhalten und darf nicht mit einem ein-zelnen Wort auf der letzten Zeile enden.In Zeitschriften und Magazinen herrscht zu-dem der Blocksatz vor. Die Vorgaben für dieSilbentrennung vermeidet Lücken im Block-satz und schafft den einheitlichen Grauwert.
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 mehr. Spalten bieten einen Ausweg: Sie packen Text in Blöcke mit zwei oder mehr Spalten.

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 kann die Spalten auf kleinen Monitoren deaktivieren.

Spaltensatz vor CSS3 columns

Bis CSS3 das Modul für den Spaltensatz vorstellte, war Spaltensatz ein kompliziertes Geschäft. Nebeneinander liegende div-Tags 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 fast 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 (orphans und widows) lassen sich noch nicht zuverlässig vermeiden.

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 dem Satzprogrammen – 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).

.col {
   margin-top: 1.8ex;
   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 2.7ex 0;
   font-size: 1.8ex; line-height: 2.7ex;
   text-align: justify; hyphens:auto;
   orphans:3; widows: 3;
}
.col h2 {
   font-size: 1.8ex; line-height: 2.7ex;
   margin: 2.7ex 0 0 0;
}

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;
      -moz-column-break-inside: avoid;
      -ms-column-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 (»Schusterjunge« oder »Waisenkind«) 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 (»Hurenkind« oder »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;