CSS3 im Detail: Columns

19. April 2010 von Norman

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:

(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ß!

Die hier könnten dich auch interessieren…

8 Kommentare RSS

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

21.04.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.05.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.05.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.09.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.

H. Koch

18.07.2013

Textspalten (Beispiele): Sieht gut aus, aber nicht gut genug. Der Text wirkt unruhig. Grund: Zeilen banachbarter Spalten erscheinen nicht auf derselben Höhe, sondern versetzt.
Hervorgerufen wird dies durch die relativ größeren Abstände zwischen den Absätzen. Viele Printmedien zeigen, wie man das umgeht: auf die relativ größeren Abstände zwischen den Absätzen wird verzichtet und als “Orinetierungsersatz” bei jedem neuen Absatz die erste Zeile eingerückt (text-indent).
Wenn man die beiden Versionen nebeneinanderlegt, ist der Unterschied offensichtlich.
Davon abgesehen, ist die hiesige Website fast eine Augenweide und sehr instruktiv. Oder wie der Lateiner sagt: prodesse et delectare … Sie nützt und erfreut.

Fatima

28.05.2019

Should you’re aan outdoor adventurikst like I’m, a very good GPS iss a muet – handheld even higher.

ویزای تایلند

27.09.2020

سلام . کهتر قسم می خورم که این مطلب رسا است و
محتملاً مطلقاً کس نتواند پیغام مشابه بوسیله این مطلب را داخل وبلاگ برملا کند برای اینکه خیلی طولانی است

1perseus

13.01.2022

1inundation…

…

Browserunterstützung