CSS/Eigenschaften/Textausrichtung/Spalten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

Anzahl und Breite der Spalten

Abstände zwischen den Spalten

Linien zwischen den Spalten

Steuerung von Spaltenumbrüchen


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[Bearbeiten]

Beispiel ansehen …
.beispiel1 ul {
    -webkit-columns: 5 7em;
    columns:         5 7em;
}
.beispiel2 ul {
    -webkit-columns: 5 12em;
    columns:         5 12em;
}
.beispiel3 ul {
    -webkit-columns: 2 12em;
    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[Bearbeiten]

Beispiel ansehen …
.mehrspaltig {  
  -webkit-column-count: 5;  
  -webkit-column-width: 12em; 
  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 column-gap ist im Allgemeinen nicht nötig, da der Standardwert normal ca. 1em Platz lässt.

Vertikaler Rhythmus[Bearbeiten]

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.

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]

Weblinks[Bearbeiten]