CSS3-Spaltenlayouts: Flexibler Textumbruch mit dem Multi-Column-Layout-Modul

Kein Beitragsbild

Markus Schlegel

Markus Schlegel arbeitet als freier Webdesigner und bloggt über Web- und Icondesign,...

Spalten-Layouts sind in Zeitungen und Print-Magazinen ein Standard, der sich im Webdesign bisher leider nur mit Biegen und Brechen simulieren ließ. Neue CSS3-Module versprechen Abhilfe. Teil 2 der Artikelreihe über CSS-Spalten-Layouts beleuchtet das neue Multi-Column-Layout-Modul.

Die Menschen hinter der Technik

Das im letzen Teil behandelte Flexbox-Modul wurde von Mozilla spezifiziert und vorangetrieben. Das Zweite gilt auch für Multi-Column, denn die Mozilla-Entwickler waren die ersten, die das Modul in Firefox implementierten. Hauptsächlich entwickelt wird es jedoch von Håkon Wium Lie, einem Norweger, der seit 1999 bei Opera arbeitet. Schon seit 1995 ist er für das W3C tätig und wirkt dort als einer der wenigen Autoren, die an allen wichtigen CSS-Spezifikationen mitarbeiten.


Håkon Wium Lie in einem You-Tube-Interview

Multi-Columns – mehrere Spalten

Die komplette Themenserie behandelt Mehrspalten-Layouts und dennoch heißt einzig und allein dieses Modul „Multi-Columns“, also übersetzt „mehrere Spalten“. Mit allen Modulen dieser Artikelserie kann man zwar mehrere Spalten erschaffen, doch nur Multi-Column konzentriert sich ausschließlich auf dieses Ziel und wirft alles, was was damit nicht in unmittelbarer Verbindung steht, über Bord. So kann man mit Flexbox bekanntlich nicht nur in der Horizontalen strukturieren, sondern gleichfalls in der Vertikalen, womit der Begriff der Mehrspaltenlayouts hier schon nicht mehr ganz richtig wäre. Multi-Column hingegen lässt ausschließlich Spalten zu.

Das Grundprinzip

Beim ersten Hinsehen könnte man meinen, dass Flexbox und Multi-Column ähnliche Resultate hervorbringen. Multi-Column liegt jedoch ein komplett anderes Prinzip zugrunde, wodurch sich dessen Einsatzgebiet auch klar verankern lässt. Das Modul beschränkt sich auf die Formatierung von Inhalten und nicht von ganzen Seitenstrukturen. Wer einen zusammenhängenden Text in ein zeitungsartiges Layout gießen möchte, ist bei Multi-Column an der richtigen Stelle. Die grobe äußere Struktur mit Sidebar und Co. lässt sich mit den anderen Modulen realisieren.

Automatischer Textfluss

Das Hauptmerkmal von Multi-Column besteht nämlich darin, dass der Inhalt von einer in die nächste Spalte fließen kann. Das Ganze automatisch und ohne semantische Einbuße, denn die entsprechenden Regeln werden ohne den Bedarf weiterer Elemente auf das Elternelement angewendet. Wer bisher seinen Text wie bei Zeitungen in drei Spalten unterteilen wollte, hatte nur die Möglichkeit, drei div-Blöcke anzulegen und den Inhalt darauf manuell und mit Augenmaß zu verteilen. Je nach Schrifteinstellungen konnte es sein, dass beim Betrachter dieser Text dann eben nicht ausgeglichen verteilt war, sondern im schlimmsten Fall die letzte Spalte länger als die zweite und diese länger als die erste war. Mit schöner Typografie und perfektem Zeitungslayout hatte das dann nicht mehr viel zu tun.

Zwei Herangehensweisen

  1. Mit Mutli-Column lassen sich Inhalte auf zwei unterschiedliche Arten in Spalten ausrichten. Geht man den ersten Weg und bestimmt eine feste Anzahl von Spalten, berechnet der Browser anhand aller Umgebungsvariablen die resultierende Breite der entstehenenden Spalten.
  2. Die zweite Möglichkeit besteht darin, die Breite im Vorhinein festzulegen und sich von der Browser-Engine die Anzahl der Spalten berechnen zu lassen. In beiden Fällen wird der Inhalt auf alle Spalten gleichmäßig verteilt.

Doch das alles lässt sich am besten anhand zweier Beispiele verdeutlichen. Folgendes HTML wird dabei jedes Mal vorausgesetzt:

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht
<!-- HTML -->
<div id="content">
    <p>Sehr viel Lorem Ipsum</p>
    <p>Gegliedert durch einige Paragraphen</p>
</div>

Für die Bestimmung der Spaltenanzahl wird nun column-count verwendet.

/* CSS */
#content {
    width: 600px;
    column-count: 2;
    column-gap: 40px;
}

Für die Bestimmung der Spaltenbreite wird column-width verwendet.

/* CSS */
#content {
    width: 600px;
    column-width: 280px;
    column-gap: 40px;
}

Beide Notationen führen in diesem Fall zum selben Ergebnis.


Zwei Methoden – ein Ergebnis

Bei column-count wird der Inhalt auf die dahinter notierte Anzahl an Spalten aufgeteilt – immer! Im Gegensatz dazu gibt column-width etwas missverständlich nur die Mindestbreite der Spalten an. Wie breit sie am Ende wirklich sind, hängt auch von der Breite des gesamten Blockes ab. Der Grund für dieses Verhalten ist die Bruchrechnung, bei der man bekanntlich selten auf schöne ganzzahlige Ergebnisse kommt. Hat man einen 600px breiten Block und gibt als Spaltenbreite column-width: 250px an, ergäben sich daraus 2,4 Spalten. Das lässt sich natürlich nicht umsetzen, deshalb vernachlässigt der Browser einfach die Nachkommastellen und legt nur zwei Spalten à 300px an.

Wie man sieht, gibt es neben column-count und column-width noch die Möglichkeit, den Abstand zwischen den Spalten zu bestimmen. Des weiteren lässt sich mit column-rule auch eine Art Linie setzen. Vergleichbar sind diese beiden Eigenschaften mit padding und border im normalen Boxenmodell.

Column-rule teilt sich ebenso wie border in Breite, Linienart und Farbe auf.

#content {
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: black;
/* entspricht: */
column-rule: 1px solid black;
}

Text umbrechen

Mit dem Spaltensatz haben wir eine weitere Ebene auf der man sich um Umbrüche kümmern muss, denn wie gesagt fließt der Inhalt von der einen Spalte in die jeweils benachbarte.

Umbrüche haben wir auch bei Print-Stylesheets, nämlich immer dann, wenn der Inhalt über eine Seite hinausgeht. Um die Umbrüche dort in die gewünschten Bahnen zu lenken, verwendet man page-break-before, page-break-inside und page-break-after. Bei Spaltenumbrüchen verfährt man ganz ähnlich.

h3 {
break-before: column;
break-after: avoid;
}

Diese Anweisung bewirkt, dass h3-Elemente immer in eine neue Spalten gesetzt werden und die vorherige umgebrochen wird. Nach der h3-Überschrift darf kein Spalten- und Zeilenumbruch erfolgen.

Vier neue Begriffe fürs Spalten-Handling

Zu den schon bekannten Schlüsselwörtern auto, always, avoid, left und right, kommen in CSS3 noch folgende vier Werte hinzu, um mit Spalten besser umgehen zu können.

  • page: Hat die gleichen Auswirkungen wie always: Vor/hinter dem Element gibt es immer einen Seitenumbruch.
  • column: Vor/hinter dem Element gibt es immer einen Spaltenumbruch.
  • avoid-page: Vor/hinter dem Element wird ein Seitenumbruch vermieden.
  • avoid-column: Vor/hinter dem Element wird ein Spaltenumbruch vermieden.

Wo hier schon der Bogen zu seitenbasierten Medien, das heißt Druck-Stylesheets geschlagen ist, sei an dieser Stelle darauf hingewiesen, dass sich der Multi-Column-Spaltensatz in CSS exakt so verhält, wie Sie das womöglich aus dem Desktop-Publishing kennen: Erstreckt sich ein Mutli-Column-Block über mehrere Seiten, so wird der Block auf jeder Seite automatisch umbrochen und läuft auf der nächsten Seite im Spaltenlayout weiter.

Was in Worten schwer zu erklären ist, lässt sich anhand der folgenden Abbildung sehr leicht verdeutlichen.

Überschriften über mehrere Spalten laufen lassen

Mit der Eigenschaft column-span und dem Schlüsselwort „all“ verhält sich ein Element so, dass es aus dem normalen Spaltensatz herausgenommen wird und sich quer über alle Spalten erstreckt. Nützlich ist das vor allem für stark gewichtete Überschriften oder Bilder.

h2 {
column-span: all;
}

Die Eigenschaft column-span gibt schon einen kleinen Einblick in die Möglichkeiten des Grid-Moduls, das im nächsten Teil dieser Artikelserie erklärt wird.

Tipps zum praktischen Einsatz

Damit alle Spalten einen wirklich ausgeglichenen Eindruck machen, reicht die rein technische Balance mit column-fill nicht aus. Viel wichtiger ist hierfür die Einhaltung einer wichtigen typografischen Regel: der vertikale Rhythmus. Da man für eine Abhandlung zu diesem Thema allein einen ganzen Artikel füllen könnte, sei hier nur das Grundprinzip erklärt.

Den vertikalen Rhythmus kann man sich als die imaginären Linien, auf denen die Schrift läuft, vorstellen. Die Zeilenhöhe bestimmt den Abstand zwischen den Linien, der immer und überall gleich groß sein sollte. Lässt man unter einem Absatz einen Abstand, sollte dieser genau der Zeilenhöhe entsprechen, damit der nachfolgende Absatz wieder im vertikalen Raster verläuft. Dadurch ist es auch wichtig, dass Überschriften oder Bilder stets ein Vielfaches der Standard-Zeilenhöhe einnehmen.

Im Web war die Regel des vertikalen Rhythmus bisher eher nice to know als unbedingt notwendig. Wirklich wichtig ist die Regel erst im Spaltensatz, denn durch die nebeneinander verlaufenden Zeilen erkennt der Betrachter viel schneller, wenn etwas aus dem Ruder läuft.

Ein weiterer Punkt, an dem man beim Einsatz von Multi-Column Vorsicht walten lassen sollte, ist zugleich eines der umstrittensten Themen in Sachen User Experience. Das Stichwort „Page Fold“ lässt bei einigen Webdesignern die Nackenhaare zu Berge stehen. Das Prinzip des Page Fold besagt, dass es einen Bereich der Website gibt, den jeder Besucher ohne scrollen zu müssen überblicken kann. Viele folgern daraus, dass alles wichtige oberhalb dieser imaginären Grenze platziert sein muss. Wieder andere nehmen eine Antihaltung ein und meinen, dass es einen derartigen Bereich überhaupt nicht gibt oder dass er zumindest keinerlei Relevanz hätte. Meiner Meinung nach – und vor allem in Verbindung mit dem Spaltensatz – sind beide Standpunkte falsch. Beim Spaltensatz mit Multi-Column sollte man darauf achten, dass alle Spalten nur so lang sind, dass sie für jeden Besucher ohne langes Scrollen konsumierbar sind. Natürlich kann man nicht genau sagen, wie hoch die Spalten maximal sein dürfen, doch ein Gefühl dafür sollte man haben.

Browserunterstützung

Wie auch schon Flexbox im letzten Artikel, ist dieses Modul sehr populär und dementsprechend breit ist das Feld der Implementierungen. So haben Gecko und Webkit die Grundfunktionen schon eingebaut und man kann die meisten Eigenschaften mit den jeweiligen Präfixen (-moz- und -webkit-) verwenden. Tatsächlich kann man das Modul also schon heute einsetzen; es sprechen keine Argumente dagegen, denn die Fallback-Methode für mehrspaltige Blöcke sind normale Textblöcke. Die Situation verhält sich also wie mit der Eigenschaft border-radius: alle, die mit älteren Browsern unterwegs sind, merken nicht einmal, dass ihnen etwas fehlt.

Wenn man also seinen Cutting-Edge-Besuchern einen Mehrwert bieten möchte, kann man Multi-Column einsetzen, ohne irgend jemandem weh zu tun. Hält man sich an ein paar typografische Verhaltensregeln und bleibt auf dem Laufenden, was die zukünftige Entwicklung des Moduls angeht, kann man damit sehr ansprechende Designs gestalten und nebenbei sehr viel Spaß haben.

Im nächsten Teil dieser Serie lesen Sie:

Die Möglichkeiten des Grid-Modul

(mm),

Markus Schlegel

Markus Schlegel arbeitet als freier Webdesigner und bloggt über Web- und Icondesign, Typografie und Usability. Twitter,

Sortiert nach:   neueste | älteste | beste Bewertung
123
Gast

Nichts gegen den Artikel, aber welchen Sinn haben mehrspaltige Texte auf einem großen Bildschirm? Da ergeben sich neue Probleme bei der Typographie: bei Blocksatz sind die Lücken zu groß, bei linksbündig franst der Text zu sehr nach rechts aus und Silbentrennung ist im Web nicht wirklich sinnvoll umzusetzen. Vorteile sehe ich keine. Man stelle sich vor, der Leser müsste erstmal nach unten scrollen, um die erste Spalte zu lesen und dann nach oben, um die rechte zu lesen und dann nochmal runterscrollen.

Michael
Gast

@123 das kann ich so unterschreiben!

Manuela Müller
Mitglied

Es kommt eben immer darauf an, wie es gemacht ist.

Spaltenlayout kann im Web sehr gut funktionieren und viel ansprechender und komfortabler, vor allem schneller zu lesen sein, weil man nicht megalangen Zeilen über den 22-Zoll-Monitor folgen muss.

Leseprobe siehe hier: http://bit.ly/5sTMNM
oder hier: http://bit.ly/cPTGqL?
oder hier: http://bit.ly/UnJLF

trackback

[…] CSS-3-Spaltenlayouts: Flexibler Textumbruch mit dem Multi-Column-Layout-Modul | CSS, Layouts | Dr. W… […]

Claudia Liersch
Gast

Schöne Zusammenstellung der CSS3 Möglichkeiten für Spaltendarstellung. Eine Demo Page wäre noch schön gewesen!

trackback

[…] CSS-3-Spaltenlayouts: Flexibler Textumbruch mit dem Multi-Column-Layout-Modul | CSS, Layouts | Dr. W…. […]

Bata
Gast

Super Sache!
Seit einigen Tagen beschäftige ich mich mit HTML5 und CSS3. Da steckt viel Potential drinne, aber die Unterstützung durch aktuelle Browser ist doch wirklich noch mehr als dünn. Es wird sicher noch zwei bis drei Jahre dauern, bis man das wirklich sinnvoll einsetzen kann!

izon//Design
Gast

Vielen Dank für deinen Beitrag.
CSS 3 macht mir richtig Spaß. Schade, dass noch nicht überall der Mehrwert genutzt wird.

Viele Grüße

Rainer Bolliger
Gast

Es hätte mich gewundert, wenn die Geschichte auch im IE funktionieren täte. Ausser langsam kann dieser Browser wirklich gar nix.

Tim
Gast

Super Artikel!

Aber kann mir jemand sagen, warum die Funktion column-span immer noch nicht in den Firefox implementiert wurde? Das Fehlen dieser Funktion macht das ganze Modell (vor allem bei CMS) nahezu unbrauchbar!

Ranbir Kaur
Gast

Dieser Artikel ist leider schon sehr alt, wird aber immer noch von den Suchmaschinen ausgeworfen.

Zum Thema Spaltensatz gibt es ein tolles JQuery Plugin: http://welcome.totheinter.net/columnizer-jquery-plugin/

wpDiscuz