Sub- und Superscript

Text-level Sematics

Unter diesem Begriff finden wir im HTML-Standard (vom 10.März 2022) eine Liste aller HTML-Elemente, die die Schriftgestaltung beeinflussen.

Der Standard enthält erfreulicherweise auch Beispiele, so eine Tabelle mit einem kurzen Codebeispiel zu jedem Element. Bei der Verwendung der Elemente sub (Subscript) und sup (Superscript) fällt etwas auf:

Ein Beispiel im HTML-Code

Für morgen ist ganztägig Regen angekündigt.<br>
Der Himmel wird mal wieder grau verhangen sein.<br>
Da kommt wohl jede Menge H<sub>2</sub>O vom Himmel.<br>
Die Prognose nennt 4mm Niederschlagshöhe.<br>
Wieviel Liter sind das auf einem Quadratmeter?<br>
Rechnen wir mit 1m<sup>3</sup> gleich 1000 Liter,<br>
so wären 1mm Höhe ein Tausendstel, also 1 Liter.<br>
Folglich sind 4mm auf einem Quadratmeter 4 Liter.

Und so sieht es im Browser aus

Für morgen ist ganztägig Regen angekündigt.
Der Himmel wird mal wieder grau verhangen sein.
Da kommt wohl jede Menge H₂O vom Himmel.
Die Prognose nennt 4mm Niederschlagshöhe.
Wieviel Liter sind das auf einem Quadratmeter?
Rechnen wir mit 1m³ gleich 1000 Liter,
so wären 1mm Höhe ein Tausendstel, also 1 Liter.
Folglich sind 4mm auf einem Quadratmeter 4 Liter.

Ein unschöner Effekt

Die Elemente sub und sup erzwingen einen höheren Zeilenabstand, Subscript nach unten, Superscript nach oben. Für einzelne Zeichen findet man bestimmt Alternativen, wie die hochgestellte 3 als Sonderzeichen auf der Tastatur. Da gibt es keinen Einfluss auf die eingestellte Zeilenhöhe. Für beliebige hoch- oder runtergestellte Texte muss man sich eine generelle Lösung einfallen lassen.

Was passiert bei `sub` und `sup` eigentlich?

Das wird deutlich, wenn wir die Zeichenfläche des hoch- oder heruntergestellten Textes sichtbar machen. Dazu versehen wir sowohl sub als auch sub mit diesem Style-Attribut:

style="display:inline-box; border:1px solid red;"

Die Eigenschaft inline-block verändert die Darstellung optisch nicht. Per rot gefärbtem border können wir sehen, dass die gesamte Zeichenfläche verschoben wird und nicht das Zeichen innerhalb der Fläche. Daraus erklärt sich wohl der zusätzliche Abstand.

Für morgen ist ganztägig Regen angekündigt.
Der Himmel wird mal wieder grau verhangen sein.
Da kommt wohl jede Menge H₂O vom Himmel.
Die Prognose nennt 4mm Niederschlagshöhe.
Wieviel Liter sind das auf einem Quadratmeter?
Rechnen wir mit 1m³ gleich 1000 Liter,
so wären 1mm Höhe ein Tausendstel, also 1 Liter.
Folglich sind 4mm auf einem Quadratmeter 4 Liter.

Eine mögliche Lösung

Da wir die Elemente als Inline-Blocks definiert haben, können wir die üblichen Blockeigenschaften verändern. So ist es möglich, mit negativen Abständen zu arbeiten. Dies beeinflusst den Inhalt des Blocks nicht, sehr wohl aber dessen Lage. Den farbigen border entfernen wir wieder. Und das ist die Lösung:

Erweiterung für `sub`

<sub style="display:inline-block; margin-bottom:-0.5em;">2</sub>

Erweiterung für `sup`

<sup style="display:inline-block; margin-top:-0.5em;">3</sup>

Das Beipiel mit diesen Erweiterungen

Für morgen ist ganztägig Regen angekündigt.
Der Himmel wird mal wieder grau verhangen sein.
Da kommt wohl jede Menge H₂O vom Himmel.
Die Prognose nennt 4mm Niederschlagshöhe.
Wieviel Liter sind das auf einem Quadratmeter?
Rechnen wir mit 1m³ gleich 1000 Liter,
so wären 1mm Höhe ein Tausendstel, also 1 Liter.
Folglich sind 4mm auf einem Quadratmeter 4 Liter.

Natürlich muss man die Styles nicht unbedingt in ein style-Attribut packen, sondern kann sie regulär im verwendeten CSS-Bereich ansiedeln.