Metrikangaben mit CSS entschärft

Metrik-Angaben oder chemische Formeln im Fließtext lassen Webdesigner verzweifeln. Sie zerstören durch unterschiedliche Zeilenhöhen das Gesamtbild. Das muss nicht sein.

Metrische Angaben wie m³ (Kubikmeter) oder chemische Formeln wie CO₂ bringen bei allen gängigen Webbrowsern die Zeilenhöhe durcheinander. Für solche Angaben werden die Tags <sub> (Subscript, Tiefstellung) und <sup> (Superscript, Hochstellung) verwendet. Das Ergebnis sieht so aus:

Lorem ipsum Kohlendioxid: CO₂ dolor sit amet, consetetur sadipscing elitr, sed Kohlendioxid: CO₂ diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam Kubikmeter: m³ erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore Kohlendioxid: CO₂ magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores Kubikmeter: m³ et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Die Zeilenhöhe schwankt stark. Besonders hässlich wird es, wenn in einer Zeile Zeichen tiefgestellt sind (wie CO₂) und in der nächsten Zeichen hochgestellt sind (zum Beispiel m³). Eine wirklich elegante Lösung für dieses Problem existiert nicht. Mit einem Trick können Webdesigner diesen Effekt aber relativ einfach abschwächen oder sogar beheben. Die Lösung ist, die Zeilenhöhe für die Tags <sub> und <sup> auf 0 zu setzen und deren Schriftgröße zu verringern. Solch kleine Schrift bleibt mit serifenlosen Schriften einigermaßen lesbar. Und das Beste: die Zeilenhöhe schwankt nicht mehr oder nicht mehr so stark. Mit wenigen zusätzlichen Zeilen in der Stylesheet-Datei ist das Problem gelöst:

 sub, sup {
      line-height: 0px;
      font-size: 60%;
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

Das Ergebnis:

Lorem ipsum Kohlendioxid: CO₂ dolor sit amet, consetetur sadipscing elitr, sed Kohlendioxid: CO₂ diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam Kubikmeter: m³ erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore Kohlendioxid: CO₂ magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores Kubikmeter: m³ et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Die Zeilenhöhe wird in den folgenden Browsern nun wie gewünscht dargestellt: IE 6.0/Win, IE 5.0/Win, Safari 1.1, Firefox 1.0.6/Win+Linux, Opera 8.0/Win und Konqueror 3.4.1/Linux. Einzig der Problem-Browser Internet Explorer 5.2 auf MacOS X zeigt keine Veränderung.