CSS Multi-column Layout Module @ Ein kleines! Lexikon des Internet

ist eine vom W3C vor­ge­schla­gene Em­pfeh­lung für die mehr­spal­tige Ge­stal­tung von HTML-Do­ku­men­ten.
CSS Level 3 (CSS3) wird von der CSS-Wor­king Group in eigen­ständigen Mo­du­len ent­wickelt, um zu­künf­tige An­for­de­rungen schneller ein­ar­bei­ten zu können. Dieses Mo­dul be­in­haltet die Re­geln zur Auf­tei­lung von Fließ­text auf meh­rere Spal­ten, die mit Ab­stän­den und Trenn­linien ver­sehen werden können.

Die Basisdefinition erfolgt über die An­ga­be der An­zahl der Spal­ten column-count:n; - so dass die Breite er­rech­net wird - oder der Breite der Spalte column-width:n; - so dass die An­zahl der Spalten er­rech­net wird -. Prin­zi­piell könnte bei­des gleich­zei­tig an­ge­ge­ben werden (column-count:2; column-width:12em;), doch würde das nur in wenigen Fäl­len Sinn ma­chen, da der vor­han­de­ne Platz nicht op­ti­mal ge­nutzt würde. Zur Do­ku­men­tat­ion kann der Wert auto ein­ge­tra­gen werden (columns: 2 auto; oder columns: auto 20em; in der zu­sam­men­ge­fass­ten Regel columns). Zu­sätz­liche An­gaben be­tref­fen den Ab­stand zwi­schen den Spal­ten (column-gap:n;) und eine Linie da­zwi­schen.

Die Beschreibung der Linie ent­spricht der von Rän­dern. So kann eine Dicke an­ge­ge­ben wer­den (column-rule-width:n;), das Aus­sehen be­stimmt werden (column-rule-style:none| hidden| solid| ...;) und die Farbe (column-rule-color:<color>;). Die Be­schrei­bung kann zu­sam­men­ge­fasst werden: column-rule:2px solid darkred;

Um den Umbruch zwi­schen den Spal­ten zu regeln, werden die Ele­men­te break-before, break-after und break-inside ge­nutzt. Für diese sind fol­gende Opt­ionen vor­ge­sehen.

auto

Der Umbruch wird nicht reglementiert.

always

Der Umbruch erfolgt immer vor | nach dem Element.

avoid

Untersagt einen Umbruch vor | nach | inner­halb eines Elementes.

left

Erzwingt einen oder zwei Seiten­um­brüche vor | nach | inner­halb eines Ele­men­tes, da­mit das fol­gende auf der linken Seite erscheint.

right

Erzwingt einen oder zwei Seiten­um­brüche vor | nach | inner­halb eines Ele­men­tes, da­mit das fol­gende auf der rechten Seite erscheint.

page

Erzwingt einen Seitenumbruch vor | nach einem Element.

column

Erzwingt einen Spaltenumbruch vor | nach einem Element.

avoid-page

Verhindert einen Seitenumbruch vor | nach einem Element.

avoid-column

Verhindert einen Spaltenumbruch vor | nach einem Element.

Seitenumbrüche wirken sich nur bei seiten-orien­tierten Me­dien aus, z. B. beim Druck.

Mit column-fill kann das Füllen der vorhandenen Spalten beeinflusst werden. Die Option balance füllt die Spalten gleichmäßig, mit auto erfolgt sie sequentiell, so dass die letzte Spalte nur teilweise oder auch leer sein kann.

Die Unterstützung für CSS durch die mo­der­nen Browser ist sehr un­ter­schied­lich (ᵅ). Teil­weise wer­den Ele­men­te aus CSS3 be­reits unter­stützt, während Ele­mente aus CSS2 noch fehlen.

Tipp: Da bei mehrspaltigem Layout durch lange Wörter häss­liche Lücken ent­ste­hen können, ist es wichtig, Trenn­mög­lich­keiten zu bieten. Dies ge­schieht am Ein­fach­sten durch die En­ti­tät ­ (soft-hyphen, wei­cher Bin­de­strich), ein Bin­de­strich, der nur sicht­bar ist, wenn er am Ende einer Zeile be­nö­tigt wird. Erst zu­künf­tige Ver­sionen werden das auto­ma­tische Ein­fügen von Trenn­strichen (engl.: hy­phe­na­tion) mit Hilfe von Wörter­büchern be­herr­schen (¹).