Felix

Mehrspaltige Texte sind in Print-Medien, insbesondere Zeitungen und Zeitschriften, Gang und Gäbe, aber im Web ließen sie sich bislang nur auf umständliche Art und Weise realisieren.

Mittlerweile kann man aber auch in einem ganz normalen HTML-Element dafür sorgen, dass ein Text mehrspaltig dargestellt wird. So kann man z.B. einen Text im folgenden Beispiel-Div-Element mehrspaltig realisieren.

<div class="columns">
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ...
</div>

Dank CSS3 funktioniert das in modernen Browsern, wie z.B. Mozilla Firefox, Google Chrome oder Opera, ohne größere Probleme. Teilweise ist dafür aber leider noch der jeweilige Präfix (-moz, -webkit usw.) nötig:

/* multi columns */			
.columns {
	width: 100%;
	-moz-column-count: 3;
	-moz-column-gap: 20px;
	-webkit-column-count: 3;
	-webkit-column-gap: 20px;
	column-count: 3;
	column-gap: 20px;
}

Mozilla Firefox 14.0

Aber leider funktioniert diese Variante noch nicht in allen Browsern.

canisuse.com

Wie man sieht, funktioniert es vor allem in älteren und sogar in der aktuellen Version vom Internet Explorer noch nicht. Erst Microsofts Internet Explorer 10 wird dieses Konstrukt verstehen, und dieser Browser erscheint womöglich sogar nur unter Windows 8.

Daher muss eine Lösung her, wie man mehrspaltige Texte auch im Internet Explorer realisiert, denn schließlich sind (leider) noch viele Nutzer mit dem Internet Explorer 8 (maximale Version unter Windows XP) und dem Internet Explorer 9 (vermutlich maximale Version unter Windows 7) unterwegs. Dafür bietet sich das JavaScript-Framework JQuery mit dem Plugin Columnizer an.

Grundsätzlich funktioniert der Customizer für JQuery wie folgt (in unserem Beispiel mit 3 Spalten):

$('.columns').columnize({
	columns: 3
});

Dadurch werden 3 Div-Boxen mittels float:left nebeneinander Gelegt. Durch columns: 3 wird die Breite der Elemente auf 33% gesetzt.

JQuery Columnizer mit 3 Spalten

Wenn man nun noch den Gap, also den Abstand, zwischen den Spalten einbauen will, kann man dies wie folgt tun:

$('.columns').columnize({
	columns: 3
});
$('.column:not(.first)').css('margin-left', '20px');

Jede einzelne Spalte bekommt nämlich standardmäßig die Klasse „.column“. Die erste Spalte gehört außerdem zur Klasse „.first“. Es bekommen also alle Spalten, bis auf die erste, einen Margin (links) auf 20 Pixel gesetzt.

JQuery Columnizer mit Gap und ungewünschten Zeilenumbruch

Nun hat man zwar einen Abstand zwischen den Spalten, aber das letzte Element rutscht in die nächste Zeile, da die Breite der Spalten bei je 33% bleibt und der Abstand dazwischen hinzukommt. Ein einfacher Workaround ist es, nachträglich die Breite der einzelnen Spalten zu verändern.

$('.columns').columnize({
	columns: 3
});
$('.column:not(.first)').css('margin-left', '20px');
$('.column').width('30%');

Das funktioniert zwar, kann aber zu unvorhergesehenen Ergebnissen führen. Schöner wäre es, wenn man diese neue Breite direkt ausrechnen könnte.

$('.columns').columnize({
	columns: 3
});
var gap = 20
$('.column:not(.first)').css('margin-left', gap+'px'); 
width = $('.columns').width() // get width of columns box
widthOfCol = width*((100/3)/100)-gap // calculate width of single column
$('.column').width(widthOfCol);

Nun errechnet man dank JavaScript die Breite einer einzelnen Spalte mit Hilfe der Breite der Box, die die Spalten enthält (Also die Box mit der Klasse „.columns“). Diese Breite wird mit der prozentualen Breite multipliziert und davon wird der Gap abgezogen.

JQuery Columnizer mit korrektem Gap

Aber was passiert nun, wenn man das Fenster verkleinert oder vergrößert? (Das betrifft allerdings nur Boxen mit variablen Breiten, z.B. in Prozent.) Mit Hilfe von JQuery kann man das allerdings ebenfalls berücksichtigen.

// columns
$('.column').columnize({
	columns: 3,
	buildOnce: true // columnize once
});

// gap
calcGap = function() {
	$('.column:not(.first)').css('margin-left', gap+'px');
	width = $('.columns').width() // get width of columns box
	widthOfCol = width*((100/3)/100)-gap // calculate width
	$('.column').width(widthOfCol); // set column width
}

calcGap(); // set gap
$(window).resize(calcGap); // set gap if window resizes

Die Option „buildOnce: true“ sorgt zunächst dafür, dass beim Verändern des Fensters, die Spalten nicht neu berechnet werden (denn die Größe soll anderweitig angepasst werden). Mit Hilfe der Funktion „resize“ für das Fenster wird die die neu gefundenen Funktion, die den Gap und die Breite der Spalten errechnet, verwendet. Diese Funktion wird außerdem bereits vorher aufgerufen, also beim ersten Laden des Skripts.

Damit funktioniert die Breite der Spalten inkl. Gap auch beim Verändern der Fenstergröße wunderbar.

Dieses Skript soll nun allerdings nur im Internet Explorer bis Version 9 Verwendung finden, denn in anderen Browser kann ja das obige CSS-Konstrukt verwendet werden. Dafür muss man nur in einer if-Anweisung die Browser-Version mit Hilfe von JQuery checken.

if ($.browser.msie && $.browser.version < 10) { // below IE version 10
	// ...
}

Um das Skript zu erweitern und zu verbessern, sollten noch Variablen und jQuery-Ausdrücke hinzugefügt werden

Dann sieht das Skript in etwa so aus:

/*
 * Multi columnizer JQuery script for IE
 * 
 * Requires
 * JQuery http://jquery.com/
 * JQuery columnizer http://welcome.totheinter.net/columnizer-jquery-plugin/
 * 
 * @author Felix Griewald
 * @version 2012-08-14
 * @url http://www.felix-griewald.de/2012/08/15/mehrspaltige-texte-mit-ie-fallback/
 */

// JQuery must be loaded
if (typeof jQuery != 'undefined') {  
	jQuery.noConflict(); // prevent conflict with other libraries
	// $ alias jQuery
	(function($) { 
		// check browser
		if ($.browser.msie && $.browser.version < 10) { // below IE version 10
		  $(function() {
		  	// wait for DOM
		    $(document).ready(function() {
		    	// variables
		    	var box = '.columns' // name of columns box (class or id)
		    	var col = 3 // number of columns
		    	var gap = 20 // gap in px

				// columns
				$(box).columnize({
					columns: col,
					buildOnce: true // columnize once
				});

				// gap
				calcGap = function() {
					$('.column:not(.first)').css('margin-left', gap+'px'); // set 20px margin left
					width = $(box).width() // get width of columns box
					widthOfCol = width*((100/col)/100)-gap // calculate absolute width of single column
					$('.column').width(widthOfCol); // set column absolute column width
				}

				calcGap(); // set gap
				$(window).resize(calcGap); // set gap if window resizes

			});
		  });
	  }
	})(jQuery);

	// other code using $ as an alias to the other library
}

// other code without jQuery

Download: Multi Column IE Skript

Eingebunden wird das Ganze im HTML Header.

<head>
	<!-- ... -->
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="js/jquery.columnizer.min.js"></script>
	<script src="js/MultiColumnIE.js"></script>
	<!-- ... -->
</head>

Natürlich ließe sich das Skript weiter verbessern, z.B. in dem man das Ganze in eine oder mehrere Funktionen gießt und mit Parametern arbeitet.

Ergebnis – so sehen die mehrspaltigen Texte in verschiedenen Browsern aus:

MultiColumn im
Mozilla Firefox (mit CSS3)

MultiColumn im
Google Chrome (mit CSS3)

MultiColumn im
Opera (mit CSS3)

MultiColumn im
Internet Explorer 8 (mit JQuery)

MultiColumn im
Internet Explorer 9 (mit JQuery)

MulitColumn im
Internet Explorer 10 (mit CSS3)