CSS/Tutorials/Typographie/Spalten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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 bei Bedarf erfolgen und die Anzahl der Spalten ebenfalls in Abhängigkeit von der Breite des Browserfensters variabel ist.

Beachten Sie: Der Zugriff auf einzelne Spalten, einzelne Spaltenabstände oder einzelne Linien zwischen den Spalten ist nicht möglich.

columns[Bearbeiten]

Die Eigenschaft columns ist eine Zusammenfassung der möglichen Einzelangaben column-width und column-count.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

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
Funktionsweise ansehen …
.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.


Anwendungsbeispiel ansehen …
.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

Im Printbereich soll mehrspaltiger Text in einem vertikalen Rhythmus so layoutet werden, dass die Zeilenlinien der verschiedenen Spalten eine gemeinsame Höhe haben. Dazu müssen Schriftgröße, Abstände und eventuelle Randlinien genau aufeinander abgestimmt werden.


Andererseits ist es sowieso nicht möglich, die column-Eigenschaft so zu steuern, dass bei Absätzen nicht einzelne Zeilen isoliert am Ende (Schusterjunge), bzw. Beginn (Hurenkind) der Spalte überstehen.


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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

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

Obwohl die Reihenfolge der Angaben beliebig ist und keine Verwechslungsgefahr besteht, sollten Sie dennoch konsequent bei einer Notation bleiben. Die meisten Werkzeuge zur Fehlersuche verwenden die Reihenfolge column-rule: width style color;.
Anwendungsbeispiel ansehen …
 
.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.

Erzähltext mit Zwischenlinien ansehen …
 
.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.

Browser-Support[Bearbeiten]

Achtung!

Für ältere Versionen des Android-Browsers kann man proprietäre Eigenschaften verwenden:

für Android-Browser

-webkit-columns

Details: caniuse.com

Andererseits haben mobile Geräte häufig einen kleineren Viewport, sodass hier der Fallback dem gewünschten Verhalten entspricht.

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

Siehe auch[Bearbeiten]

Anzahl und Breite der Spalten

Abstände zwischen den Spalten

Linien zwischen den Spalten

Steuerung von Spaltenumbrüchen


Weblinks[Bearbeiten]