CSS3 im Detail: Columns

19. April 2010 von Norman 4 Kommentare

Teil 7 der CSS3 im Detail – Reihe beschäftigt sich mit Columns.

Columns oder zu deutsch Spalten gibt es schon eine Ewigkeit. Uns allen sind sie aus den klassischen Printerzeugnissen wie Zeitungen und Magazinen bekannt. Prinzipiell machen sie nichts anderes als Text in schmalere Spalten aufzuteilen.

Der Vorteil des mehrspaltigen Satzes als Textgestaltung liegt darin, dass insbesondere bei großformatigem Papier die Zeilenlänge kurz gehalten wird [...]

… und damit die Lesbarkeit des Textes erhöht wird. Durch CSS3 haben Webdesigner nun die Möglichkeit, diese Art des Satzes auch in Webseiten anzuwenden.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

(Opera ab Version 11.10, IE ab Version 10)

Syntax

Columns haben mehrere Eigenschaften, die wir uns im Einzelnen anschauen werden. Gecko- und Webkitbrowser haben die Technik wieder mit ihren Präfixen implementiert.

column-count

column-count gibt die Anzahl der Spalten an, in die der Text aufgeteilt werden soll.

div.columns {
	-moz-column-count:2; /* Firefox */
	-webkit-column-count:2; /* Safari, Chrome */
	column-count:2; /* Opera, IE, W3C Standard */
	border:4px solid #adf;
	padding:10px;
}

Folgender Fließtext wird durch obigen Code in zwei Spalten aufgeteilt. Die Breite einer Spalte wird immer aus der Breite des Elternelements durch die Anzahl der Spalten berechnet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

column-width

Anstatt eine feste Anzahl Spalten anzugeben, kann man auch eine ungefähre Breite einer Spalte deklarieren. Dabei wird die Spaltenanzahl automatisch errechnet. Ihr versteht sicherlich, dass es wenig Sinn macht column-count und column-width gleichzeitig zu verwenden..

div.columns {
	-moz-column-width:100px; /* Firefox */
	-webkit-column-width:100px; /* Safari, Chrome */
	column-width:100px; /* Opera, IE, W3C Standard */
	border:4px solid #adf;
	padding:10px;
}

column-gap

Das ist natürlich noch nicht alles, mit column-gap könnt ihr den Abstand zwischen den Spalten festlegen..

div.columns {
	-moz-column-count:2; /* Firefox */
	-moz-column-gap:7em;
	-webkit-column-count:2; /* Safari, Chrome */
	-webkit-column-gap:7em;
	column-count:2; /* Opera, IE, W3C Standard */
	column-gap:7em;
	border:4px solid #adf;
	padding:10px;
}

column-rule

.. und mit column-rule zieht ihr zwischen den Spalten eine Linie. Der Befehl hat genau wie border folgende drei Parameter:

column-rule-width, die Breite der Linie
column-rule-style, der Stil der Linie (solid, dashed, dotted, etc.)
column-rule-color, die Farbe der Linie

div.columns {
	-moz-column-count:2; /* Firefox */
	-moz-column-rule:4px dashed #adf;
	-webkit-column-count:2; /* Safari, Chrome */
	-webkit-column-rule:4px dashed #adf;
	column-count:2; /* Opera, IE, W3C Standard */
	column-rule:4px dashed #adf;
	border:4px solid #adf;
	padding:10px;
}

Verfeinerung

Nochmals verstärkt wird der Effekt, wenn man zusätzlich text-align:justify anwendet.

Justifiy Me!

Fazit

So, damit wisst ihr nun alles über Columns und wie man sie verwendet. Besonders schön an ihnen finde ich die Tatsache, dass Browser, die die Technik noch nicht beherrschen, einfach auf die “normale” Darstellungsweise zurückfallen (Paragraphen untereinander statt nebeneinander). Ein sinnvolles Einsatzgebiet sind natürlich News-Portale, die sehr breit sind. Auf solchen Seiten lohnt es sich lange Artikel in kürzere Spalten zu teilen um die Lesbarkeit zu verbessern. Ich wünsche wie immer viel Spaß!

4 Kommentare RSS

Tweets die CSS3 im Detail: Columns – Norman's Blog erwähnt -- Topsy.com

21. April 2010

[...] Dieser Eintrag wurde auf Twitter von Jens vs. Hoffmann, tolleiv erwähnt. tolleiv sagte: hm CSS3 columns seems to be a pretty neat feature: http://bit.ly/arB5aa (translated:) http://bit.ly/ceDLl3 [...]

Martin Schröder

18. Mai 2010

“Nochmals verstärkt wird der Effekt, wenn man zusätzlich text-align:justify anwendet.” Na ja. Ich weiß nicht so recht, was mit “verstärkt” gemeint ist, aber die Lesbarkeit leidet ganz sicher unter dem Blocksatz. Denn dann werden die Worte ja gleichmäßig über die Zeile verteilt, mit dem Effekt, dass der Abstand zwischen den Worten höchst unregelmäßig ist. Absolut leseunfreundlich (und unter Typografen schon seit langem verpönt).

Norman

18. Mai 2010

Da geb ich dir Recht Martin. Es war nicht meine Absicht die Leute aufzufordern Blocksatz im Web zu verwenden, es ist nur ein Hinweis gewesen, dass Blocksatz den Spalten-Effekt besser betont.
Es gibt übrigens auch Möglichkeiten dieses Auseinanderzerren von Wörtern zu verhindern, z.B. gibt es für WordPress ein Plugin, was die Silben automatisch trennt. Ist eine ordentliche Silbentrennung im Einsatz, ist Blocksatz denke ich vertretbar – auch im Web.
Vielen Dank trotzdem für deinen berechtigten Einwand

Andy

23. September 2010

Man könnte auch folgern das man mit Silbentrennung noch weniger Anlass hätte Blocksatz zu verwenden, da die Spalten dann ohnehin weniger flattern.

Norman's Blog