Hoch- und tiefgestellter Text im HTML5
HTML5-Elemente sup und sub
Buchstaben oder Zahlen, die relativ zum Haupttext leicht nach oben oder unten verschoben sind, nennt man hoch- bzw. tiefgestellten Text. HTML besitzt Elemente, um beide Arten von Text zu definieren. Hochgestellter Text wird üblicherweise bei Markenzeichen-Symbolen, Exponenten und Fußnoten verwendet. Tiefgestellte Zeichen finden sich z.B. bei chemischen Formeln.
Ein Einsatzgebiet für das sup-Element sind Fußnoten. Ich habe diese in einen footer im article gelegt statt auf der Seite insgesamt, weil sie damit verknüpft sind. Ich habe auch jede Fußnotenziffer mit dem Text zu dessen Fußnote im Footer verlinkt, damit die Leser einfacher darauf zugreifen können. Beachten Sie, dass auch das title-Attribut bei den Links einen weiteren Hinweis liefert.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<article>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<p>
Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5. Wir wollen Ihnen einen ausführlichen Einblick in die neuen Möglichkeiten von HTML5 geben. <i>HTML5-Info</i> <a href="#html5-info" title="➝" "HTML5-Info"><sup>1</sup></a>.
</p>
<p>
HTML5 bietet neue Elemente für die Definition der Struktur einer Website und die Einbettung von Inhalten. <a href="➝" "#die-neuen-funktionen-von-html5" title="Die neuen Funktionen von HTML5"><sup>2 ➝ </sup></a>, HTML5 ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt."
</p>
<footer>
<p>
<sup>1</sup>HTML5-Info.
</p>
<p>
<sup>2</sup>Die neuen Funktionen von HTML5.
</p>
</footer>
</article>
</body>
</html>
Leider machen die Elemente sub und sup den Zeilenabstand kaputt. Beachten Sie, dass es zwischen den Zeilen 5 und 6 im ersten Absatz und den Zeilen 2 und 3 des zweiten Absatzes mehr Abstand gibt. Doch hier hilft ein wenig CSS aus – siehe den Kasten Den Zeilenabstand bei Verwendung von sub oder sup korrigieren. Sie können auch den Umgang mit verlinktem hochgestelltem Text verändern, damit eine Unterstreichung nicht so weit weg vom hochgestellten Text erscheint.
Hoch- oder tiefgestellten Text erstellen
- Tippen Sie
<sub>für hochgestellten oder<sup>für tiefgestellten Text. - Schreiben Sie die Zeichen oder Symbole, die als hoch- bzw. tiefgestellter Text gedacht sind.
- Tippen Sie
</sub>oder</sup>, abhängig von dem, was Sie in Schritt eins genommen haben, um das Element zu vervollständigen.
Die meisten Browser reduzieren automatisch die Schriftgröße von hoch- oder tiefgestelltem Text um ein paar Punkte.
Hochstellungen sind ideal, z.B. um bestimmte fremdsprachliche Abkürzungen abzukürzen.
Tiefstellungen kommen z.B. bei der Schreibung chemischer Moleküle wie H2O zum Einsatz. Beispiel:
<p>Ich bin ganz ausgedörrt. Könnte ich bitte ein Glas H<sub>2</sub>O bekommen?</p>.
Hoch- bzw. tiefgestellte Zeichen bringen den gleichmäßigen Zeilenabstand ein wenig durcheinander. Im Kasten finden Sie einen Lösungsvorschlag.
Den Zeilenabstand bei Verwendung von sub oder sup korrigieren
Die Elemente sub und sup bringen gerne den Abstand zwischen Textzeilen durcheinander. Zum Glück können Sie das mit ein wenig CSS wieder geradebiegen.
Der folgende Code stammt aus dem hervorragenden normalize.css von Nicolas Gallagher und Jonathan Neal (https://necolas.github.io/normalize.css/). Sie haben die folgende Methode nicht erfunden, sondern sich bei https://gist.github.com/unruthless/413930 bedient und die Codekommentare entfernt. Im zweiten GitHub-Link wird dieses CSS umfassend erklärt. Es lohnt sich also, dort vorbeizuschauen. Schauen Sie sich auch mal normalize.css an, das Sie in eigenen Projekten einsetzen können. Es hilft Ihnen, eine konsistente Grundlinie für die browser-Übergreifende Darstellung zu erzielen, und ist sehr gut dokumentiert.
/*
* Verhindert in allen Browsern, dass sub und sup die Zeilenhöhe beeinflussen * gist.github.com/413930
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
Wahrscheinlich müssen Sie dieses CSS noch ein wenig auf Ihre jeweilige Schriftgröße anpassen, um den richtigen Zeilenabstand zu bekommen, aber zumindest ist es doch ein guter Start.