Selten genug macht sich einmal jemand die Mühe, <strong> und <em> umzugestalten. Wenn, dann ist meist Sperrsatz die erste Wahl, also das Erhöhen des Zeichenabstands mittels CSS. Warum es aber nicht damit getan ist, einfach em { letter-spacing:0.5em; } in den Stylesheet zu kloppen, behandelt dieser Artikel.

Geschichte und Regelwerk

Sperrsatz wurde einst erfunden, weil gebrochene Schriften (landläufig Frakturschrift) keine fetten oder kursiven Varianten hatten und man bestimmte Satzteile ja irgendwie hervorhaben musste. Und so klemmten die Setzer einfach kleine kleine Bleiplatten zwischen die Buchstaben.

Die Anwendung von Zeichenabstand unterliegt einem komplizierten Regelwerk und nicht alles davon kann man im Rahmen eines vertretbaren Aufwandes auch mit CSS umsetzen. So sollen etwa Zahlen nicht gesperrt werden, Satzzeichen schon, sofern sie nicht Punkt oder Anführungszeichen sind – wollte man das alles befolgen, stünde man in Windeseile vor einer unsemantischen HTML-Suppe.

Das Regelwerk schreibt auch vor, dass der gesperrte Satzteil Abstand zum normalen Text haben muss. Es sieht ohne diesen Abstand auch wirklich reichlich unschön aus:

Falsch

Es gibt mehrere Möglichkeiten, hier mit CSS anzusetzen. Allerdings haben alle auch ihre Nachteile.

Möglichkeit 1: Leerzeichen mitsperren

Normalerweise erzeugt man den nötigen Abstand, indem man einfach die Leerzeichen vor und hinter dem fraglichen Text mitsperrt. Das hieße in HTML ausgedrückt, dass man zusätzliche Leerzeichen mit in die <strong> und <em> einschließt. Aus <em>Wort</em> wird einfach <em> Wort </em>. Das sieht zwar gut aus…

Richtig

… wird aber dann zum Problem, wenn man eines Tages beschließen sollte, die fraglichen Elemente nicht mehr nur mit letter-spacing zu gestalten. Wollte man dann zum Beispiel <strong> und <em> mit einer Unterstreichung versehen, sind auch die Leerzeichen vor und hinter dem hervorzuhebenden Wort betroffen. Anders herum sind in einem bereits bestehenden Text vermutlich nicht die Leerzeichen in die Hervorhebungs-Elemente eingeschlossen.

Diese Methode mag schulbuchmäßig sein, aber für das Web ist sie nicht wirklich praktikabel.

Möglichkeit 2: Margin/Padding

Naheliegend mag die Idee sein, die gesperrten Satzteile einfach mit ein wenig Außen- oder Innenabstand zu versehen. Optisch macht das auch einiges her…

Margin
Marginfehler
Unschöner Nebeneffekt

…jedenfalls so lange, bis ein gesperrter Satzteil der erste nach einem Zeilenumbruch ist. Dann nämlich, wie rechts zu sehen, wird der Abstand mit die neue Zeile genommen und setzt den hervorgehobenen Satz unschön vom Rand statt vom Resttext ab. Das gleiche passiert leider, wenn man versucht mit der CSS-Eigenschaft content Leerzeichen vor und hinter dem gesperrten Text zu platzieren. Bei mitgesperrten Leezeichen gemäß Methode 1 besteht dieses Problem nicht, aber da gibt es ja wiederum anderen Ärger. Und dann gibt es noch eine etwas unorthodoxe Lösung…

Möglichkeit 3: Spacer-GIFs

Spacer-GIFs sind eigentlich Relikte auf der finsteren Webdesign-Steinzeit. Als es noch kein CSS gab, platzierte man einfach transparente Bilder zwischen Elementen um Abstände zu erzeugen. Klingt aus heutiger Sicht grausig primitiv (ist es auch), aber um unser Problem zu lösen ist es eine ernstzunehmende Methode. Sehen wir uns erst einmal das Endergebnis an:

Spacer
Zeilenumbruch mit Spacer
Zeilenumbrüche sind kein Problem

Schaut doch gut aus! Diese Methode verwendet zwar Spacer, aber sie basiert trotzdem auf CSS und verhunzt im Gegensatz zu Methode 1 nicht das HTML und hat keine Probleme mit Zeilenumbrüchen. Im Einzelnen geht das Ganze so: Wir basteln ein transparentes GIF, das die Breite unseres gewünschten Abstandes hat. Dieses platzieren wir mittels CSS vor und hinter den gesperrten Textteilen.

em:before, em:after { content:url(spacer.gif); }

So eingefügte Bilder werden nämlich umgebrochen, im Gegensatz zu den in Möglichkeit 2 erwähnten auf die gleiche Weise eingefügten Leerzeichen. Das HTML bleibt also unberührt, wir haben unseren Abstand und schöne Zeilenumbrüche sind auch dabei! Alles perfekt? Nun ja, nicht ganz.

Die Spacer haben eine feste Breite, die sich nicht dynamisch ändern lässt. Das heißt, dass bei einer Vergrößerung oder Verkleinerung des Textes der Abstand nicht mitwächst. Da tut es gut zu wissen, dass so gut wie niemand diese Funktion nutzt und man diesbezüglich kein zu schlechtes Gewissen haben muss.

Zweitens beherrscht der gute alte Internet Explorer 6 weder das Einfügen von Inhalten mittels content, noch weiß er etwas mit den Selektoren :before und :after anzufangen. Das müsste man dann entweder scripten oder oder man weist dem IE mit einem eigenen Stylesheet die Abstände wie in Methode 2 zu. Beides keine optimalen Lösungen.

Fazit?

Wie zu sehen war haben alle vorgestellten Vorgehensweisen ihre Mängel. Die einzig wirklich schlimme Methode ist meines Erachtens Nummer 1, weil dort im HTML herumgefuhrwerkt wird – zwar nur ein wenig, aber dafür mit (möglicherweise) großem Effekt, wenn erst einmal das Redesign kommt. Methode 2 ist unter Umständen sehr hässlich, dafür aber was HTML und CSS angeht sauber und funktioniert auch überall. Und Methode 3 ist eine Mischung aus archaischen Spacern, modernem CSS und Methode 2 als Fallback für den IE6.

Es scheint dann wohl auf die berühmte Wahl zwischen Pest und Cholera hinauszulaufen. Ich persönlich würde vermutlich Methode 3 wählen. Alle Methoden im Vergleich gibt es auf einer Testseite.

Nachtrag vom 13.12.2007

Unbedingt lesen: Nachtrag zu Sperrsatz mit CSS – vergesst die Spacer! Die Spacer-Methode ist nämlich tatsächlich nicht die beste!