Responsive Textspalten mit CSS

Texte und Inhalte in einem responsive Layout gut lesbar dazustellen kann eine Herausforderung sein, insbesondere, wenn man Redakteuren oder sich selbst keine unnötige Arbeit bereiten will.

Der Idealfall wäre, wenn sich erstellte Inhalte automatisch und je nach Bildschirmgröße auf eine oder mehrere Spalten verteilten würden. Und mittels CSS ist es sogar problemlos machbar:

div {
-moz-column-width: 15em;
-webkit-column-width: 15em;
column-width: 15em;
}

Mit column-width lassen sich die maximalen Breiten der Spalten definieren. Wird die angegebene Breite erreicht, so wird der Inhalt in Spalten aufgeteilt. Je kleiner die gewählten Breiten sind, desto mehr Spalten werden erzeugt.


In diesem Abschnitt wird der Text bei größerer Bildschirmauflösung auf zwei Spalten verteilt. Wird das Browerfenster kleiner gezogen, wird die Darstellung irgendwann auf eine Spalten reduziert. Dieser Mechanismus greift nicht nur für Texte, sondern letztendlich für jeden Inhalt. Allerdings können automatisierte Umbrüche von Bildern, Tabellen o.ä. je nach Textfluss zu unschönen Verteilungen führen.

Absätze - die ja i.d.R. eine andere Zeilenhöhe haben als beschriebene Zeilen - führen zu einem etwas unruhigen Schriftbild, in der Form, dass die Zeilen nicht mehr alle auf gleicher Höhe sind.

Insgesamt lässt sich Inhalt mit column-width aber sehr schön und vor allem sowohl für den Webentwickler als auch einem potenziellen Redakteur schnell, und einfach responsive auslegen.


IE 10 und Opera können mit dem Standard-CSS-Befehl umgehen, Firefox, Chrome und Safari benötigen aktuell noch die entsprechenden Brower-Präfixe (-moz-, bzw. -webkit-). Der IE 9 sowie ältere Versionen können mit dem Befehl überhaupt nicht umgehen, was aber auch kein wirkliches Problem darstellt, da der Inhalt in dem Fall einfach einspaltig ausgegeben wird.

Ergänzend zu column-width gibt es noch folgende Anweisungen:

  • column-gap: definiert den Abstand zwischen den Spalten
  • column-rule: hiermit lassen sich Breite, Farbe und andere Styles des Bereichs zwischen den Spalten einstellen (z.B. wie im obigen Beispiel eine dünne Linie)
  • column-count: diese Anweisung kann statt column-width eingesetzt werden und teilt den Inhalt in die angegebe Zahl Spalten auf

Beispiel:

column-gab: 20px;
column-width: 300px;
column-rule: 1px dotted #CCCCCC;

/*Firefox*/
-moz-column-gab: 20px;
-moz-column-width: 300px;
-moz-column-rule: 1px dotted #CCCCCC;

/*Safari, Chrome*/
-webkit-column-gab: 20px;
-webkit-column-width: 300px;
-webkit-column-rule: 1px dotted #CCCCCC;

 

Kommentare (0)

No comments found!

Neuen Kommentar schreiben