CSS/Tutorials/Typografie/Spalten
Informationen zu diesem Text
- Lesedauer
- 30min
- Schwierigkeitsgrad
- einfach
- Vorausgesetztes Wissen
- Grundkenntnisse in
• HTML
• CSS
Immer breitere Monitore ermöglichen immer breitere Seiten. Dies ist aber nicht lesefreundlich, da man bei langen Zeilen nur schwer den Anfang der neuen Zeile findet. Mit der Eigenschaft columns können Sie Fließtext und lange Listen in mehrere Spalten aufteilen. Im Gegensatz zu bisherigen workarounds ist dieses Layout flexibel, das heißt z. B. dass Spaltenumbrüche nur bei Bedarf erfolgen und die Anzahl der Spalten ebenfalls in Abhängigkeit von der Breite des Browserfensters variabel ist.
Inhaltsverzeichnis
columns[Bearbeiten]
Die Eigenschaft columns ist eine Zusammenfassung der möglichen Einzelangaben column-width und column-count.
Details: caniuse.com
Die Eigenschaft columns erwartet folgende durch Leerzeichen getrennte Werte:
- eine Angabe zur Spaltenanzahl (positive ganze Zahl oder
auto) - eine nicht negative Längenangabe als Mindestspaltenbreite
.beispiel1 ul {
columns: 5 7em;
}
.beispiel2 ul {
columns: 5 12em;
}
.beispiel3 ul {
columns: 2 12em;
}
<div class="beispiel beispiel1">
<h2>columns: 5 7em;</h2>
<p>Bei einer <strong>Mindest</strong>breite von 7em passen 5 Spalten in dieses Element.</p>
<ul>
<li>1. Punkt</li>
<li>2. Punkt</li>
<li>3. Punkt</li>
<li>4. Punkt</li>
<li>5. Punkt</li>
</ul>
</div>
In diesem Beispiel werden verschiedene Kombinationen für Spaltenanzahl/Spaltenbreite vorgestellt.
.mehrspaltig {
columns: 5 12em;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
In diesem Beispiel wird ein Text in fünf Spalten mit einer Mindestbreite von 12em aufgeteilt, wenn der Viewport genügend groß ist.
Damit die Abstände zwischen den einzelnen Wörtern nicht zu groß werden, wurde eine Silbentrennung mit hyphens hinzugefügt.
Der columns-Algorithmus nimmt jedoch keine Rücksicht auf Absätze, sodass teilweise einzeln stehende Zeilen entstehen.
Eine Angabe von gap ist im Allgemeinen nicht nötig, da der Standardwert normal ca. 1em Platz lässt.
Information: Vertikaler Rhythmus
column-Eigenschaft so zu steuern, dass bei Absätzen nicht einzelne Zeilen isoliert am Ende (Schusterjunge), bzw. Beginn (Hurenkind) der Spalte überstehen.
column-width[Bearbeiten]
Mit der Eigenschaft column-width können Sie für ein Element durch die Angabe einer Mindestspaltenbreite bestimmen, ob es in mehreren Spalten angezeigt wird. Die Spalten werden dabei gleichmäßig befüllt. Die Anzahl der Spalten und deren tatsächliche Breite ergeben sich aus dem zur Verfügung stehenden Platz.
Details: caniuse.com
Erlaubte Werte:
- Längenangabe
-
auto: (Standardwert) Er bedeutet, dass die Anzahl der Spalten durchcolumn-countfestgelegt wird oder dass es nur eine Spalte gibt.
.mehrspaltig {
column-width: 12em;
max-width: 40em;
}
Der Artikel wird in Spalten mit einer Mindestbreite von 12em aufgeteilt. Da die max-width 40em beträgt und der Abstand zwischen den einzelnen Spalten durch den Standardwert von column-gap ca. 1em beträgt, ist die (bei größeren Viewports) angezeigte Breite nahe an den 12em.
column-count[Bearbeiten]
Mit der Eigenschaft column-count können Sie für ein Element durch die Angabe der Spaltenanzahl bestimmen, ob es in mehreren Spalten angezeigt werden soll. Die Breite der Spalten richtet sich nach dem zur Verfügung stehenden Platz. column-count gibt dabei die maximale Spaltenanzahl an. Wenn gleichzeitig eine Angabe zur Spaltenbreite gemacht wurde, werden ggf. weniger Spalten erzeugt.
Details: caniuse.com
Erlaubte Werte:
- positive ganze Zahl
-
auto: (Standardwert) Er bedeutet, dass die Anzahl der Spalten durch column-width festgelegt wird oder dass es nur eine Spalte gibt.
...
.mehrspaltig {
column-count: 2;
}
Der Artikel ist 30em breit und wird, da es keine Angaben zur Mindestbreite gibt, in 2 Spalten aufgeteilt.
column-rule[Bearbeiten]
Die Eigenschaft column-rule ist eine Zusammenfassung der möglichen Einzelangaben column-rule-width, column-rule-style und column-rule-color, mit der Sie das Aussehen der Linien zwischen den Spalten bestimmen können.
Details: caniuse.com
Notieren Sie Angaben zu Linienstärke, Style und Farbe mit Leerzeichen dazwischen:
- Linienstärke: optional, Voreinstellung
medium - style: Voreinstellung
none, alle border-style-Werte möglich - Farbangabe: Voreinstellung ist die Textfarbe des Elements
Hinweis
column-rule: width style color;.
.mehrspaltig {
column-count: 3;
gap: 1em;
column-rule: dashed;
}
Der mehrspaltige Text erhält mit column-rule: dashed eine gestrichelte Trennlinie. Als Strichstärke wird die Voreinstellung medium; als Farbe die Textfarbe verwendet.
Zur Visualisierung sind die Kindelemente des Divs der Klasse „mehrspaltig“ mit einem Hintergrund versehen.
.mehrspaltig {
columns: 5 12em;
column-rule: 5px dotted gold;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
Der mehrspaltige Text erhält mit column-rule: 5px dotted gold; eine 5px breite goldene gepunktete Trennlinie.
Zur Visualisierung sind die Kindelemente des Divs der Klasse „mehrspaltig“ mit einem Hintergrund versehen.
column-rule-width[Bearbeiten]
Mit der Eigenschaft column-rule-width können Sie für ein mehrspaltig anzuzeigendes Element die Dicke der Linien zwischen den Spalten bestimmen. Sinnvollerweise sollten Sie diese Angabe zumindest mit einer Angabe zum Linientyp kombinieren, gegebenenfalls aber auch mit einer Festlegung der Linienfarbe.
Details: caniuse.com
Erlaubt ist eine numerische Angabe (mit Ausnahme von Prozentwerten) für die Dicke oder einer der folgenden Werte:
-
thin= dünn. -
medium= mittelstark. -
thick= dick.
.mehrspaltig {
column-count: 2;
column-gap: 10em;
column-rule-width: thick;
column-rule-style: dashed;
}
Zur Visualisierung sind die Kindelemente des Divs der Klasse „mehrspaltig“ mit einem Hintergrund versehen.
column-rule-style[Bearbeiten]
Mit der Eigenschaft column-rule-style können Sie für mehrspaltig anzuzeigende Elemente verschiedene Schmuckrahmen definieren. Damit die Typen zur Geltung kommen, empfiehlt sich die Kombination mit Angaben zur Spaltenrahmendicke und/oder zur Farbe.
Details: caniuse.com
Erlaubt ist einer der folgenden border-style-Werte:
-
none, keine Linie -
hidden, keine Linie -
dotted, gepunktet -
dashed, gestrichelt -
solid, durchgezogen -
double, doppelt durchgezogen -
groove, 3D-Effekt -
ridge, 3D-Effekt -
inset, 3D-Effekt -
outset, 3D-Effekt
.mehrspaltig {
column-count: 2;
column-gap: 10em;
column-rule-style: double;
}
column-rule-color[Bearbeiten]
Mit der Eigenschaft column-rule-color können Sie für ein mehrspaltig anzuzeigendes Element die Farbe der Linie zwischen den Spalten bestimmen. Die Angabe dazu sollten Sie mit einer Angabe zum Typ und/oder einer Angabe zur Spaltenrahmendicke kombinieren.
Details: caniuse.com
Erlaubt ist eine Farbangabe oder der Wert transparent. Initialwert ist die Schriftfarbe des Elements (currentColor).
.mehrspaltig {
column-count: 2;
column-gap: 10em;
column-rule-style: dotted;
column-rule-color: red;
}
column-span[Bearbeiten]
Die Eigenschaft column-span erlaubt es, Elemente über mehrere Spalten zu verteilen, wie es etwa mit dem HTML-Attribut colspan für Tabellen möglich ist.
Details: caniuse.com
Folgende Angaben sind möglich:
-
none: Das Element fließt nicht über mehrere Spalten hinweg. -
all: Das Element fließt über sämtliche Spalten hinweg. Der Inhalt davor wird automatisch zwischen den Spalten ausgeglichen.
.mehrspaltig {
columns: 5 12em;
column-rule: 5px dotted gold;
hyphens: auto;
}
h2 {
font-family: 'Parisienne', cursive;
column-span: all;
}
Der mehrspaltige Text besteht aus bis zu 5 Spalten mit Textabsätzen und Überschriften.
Die h2-Überschriften werden mit column-span: all; über alle Spalten ausgedehnt.}}
Siehe auch[Bearbeiten]
Anzahl und Breite der Spalten
Abstände zwischen den Spalten
Linien zwischen den Spalten
