Webdesigner, die auch im Printbereich beheimatet sind, kennen aus InDesign und Quark die Möglichkeit, Bilder an einem Grundlinienraster auszurichten. Gerade wenn Text und Bild nebeneinander stehen, sorgt die Ausrichtung an einem Raster für ein einheitliches Bild. Das jQuery-Plugin Baseline.js implementiert eine ähnliche Möglichkeit für Weblayouts.

Baseline.js: Bilder mit (links) und ohne (rechts) Grundlinienraster

Baseline.js ist ein jQuery-Plugin, das Bilder innerhalb eines HTML-Dokumentes so skaliert, dass sie in ein vorgegebenes Grundlinienraster passen.

jQuery und Baseline.js einbinden

Die Vorgehensweise ist einfach. Zunächst werden jQuery und das Baseline-Plugin im HTML-Kopf eingebunden:

1
2

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.baseline.js"></script>

Anschließend wird ein Grundlinienraster in Pixel angegeben, welches auf alle oder bestimmte Bilder innerhalb des Dokumentes angewendet wird:

1
2
3
4
5

<script type="text/javascript">
$(document).ready(function() {
    $("img").baseline(18);
})
</script>

Im Beispiel spricht der jQuery-Selektor alle IMG-Elemente an. Sie werden in der Höhe so skaliert, dass sie in das Grundlinienraster von 18 Pixel passen. Das heißt, die Höhe der Bildelemente skaliert so, dass sie immer ein Vielfaches von 18 ist.

Da die Bilder nur in der Höhe skaliert werden – die Breite bleibt erhalten –, erscheinen sie verzerrt. In den meisten Fällen dürfte diese geringe Verzerrung nicht auffallen. Je größer jedoch das Raster ist und je mehr die Höhe des Bildes vom Raster abweicht, desto stärker wird auch die Verzerrung des Bildes sein.

Durch die Anpassung des Selektors erreichen wir, dass sich nur bestimmte Bilder am Grundlinienraster ausrichten:

1

$("#inhalt img").baseline(18);

Im Beispiel wirkt sich das Raster nur auf Bilder aus, die innerhalb des Elementes mit der ID „inhalt“ liegen.

Baseline.js für unterschiedliche Auflösungen optimieren

Gerade für responsives Layout interessant ist auch die Möglichkeit, das Raster für unterschiedliche Dokumentbreiten separat zu definieren. Dazu gibt man mehrere Rasterwerte in Abhängigkeit der Dokumentbreite an:

1
2
3
4

$("img").baseline({
  "0px": 18,
  "800px": 9
});

Im Beispiel werden zunächst alle Bilder für ein 18-Pixel-Raster optimiert. Bei einer Dokumentbreite ab 800 Pixel verkleinert sich das Raster auf 9 Pixel. Auf diese Art können mehrere Auflösungen angesprochen werden.

Leider funktioniert diese Möglichkeit in der Praxis nicht, da im Quelltext des Plugins mit „document.width“ gearbeitet wird, was mittlerweile von vielen Browsern nicht mehr unterstützt wird. Diese Angaben müssen durch „document.body.clientWidth“ ersetzt werden. Dann funktioniert es.

Baseline.js von Daniel Eden ist unter der WTFPL-Lizenz verfügbar.

Fazit: Wer viel Wert auf die Einhaltung eines Grundlinienrasters auch im Webdesign legt, ist mit Baseline.js gut bedient. Ohne viel Aufwand und ohne manuelle Anpassung jedes Bildes können alle Bilder automatisch angepasst werden.

(dpe)

Denis Potschien

Seit 2005 ist er freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

• Web
|
• Facebook
|
• Google+
|
• More Posts (158)