CSS, HTML & Javascript mit {stil}

HTML sub | sup

HTML sub und sup stellen einfache chemische, physikalische und mathematische Ausdrücke wie Potenzen oder Maße im Text ohne Grafik oder Bitmap dar. Die Buchstaben oder Ziffern werden in einer kleinen Schriftgröße hochgestellt oder tiefgestellt und auch als Supscript bzw. Superscript bezeichnet.

sup und sub Hochstellen / Tiefstellen

Tiefsetzen und Hochstellen

HTML sub setzt einen Text tief, sup fügt einen Text hochgestellt ein. Die meisten Browser verkleinern Text in sub und sup auf die halbe Schriftgröße und benutzen dieselbe Schrift wie im Rest des Textes.

In Oliven-Knoblauch gebratene Gambas B,L,J,G
B (Krebstiere), L (Schwefeldioxid und Sulfite), J (Senf), G (Milch) 
In Oliven-Knoblauch gebratene Gambas <sup>B,L,J,G</sup>
<small>B (Krebstiere), L (Schwefeldioxid und Sulfite), J (Senf), G (Milch)</small>

HTML sub und sup sind Inline-Elemente, d.h. sie führen nicht zu einem Zeilenumbruch innerhalb eines Textes und dürfen keine Blockelemente wie p, table oder div-Tags enthalten. HTML small setzt längere Texte wie den Kommentar des Autors oder einen Quellenhinweis um einen Schritt kleiner.

Einfache Formeln mit sub und sup

Wenn wir Formeln auf Webseiten sehen, steckt dahinter fast immer ein Bild, denn HTML hat sich nicht wirklich um Formeln gekümmert. Erst HTML5 erlaubt den direkten Einsatz von MathML in HTML-Dokumenten, aber die Blink-Entwickler (Chrome) haben den Formelsatz mit MathML schnell wieder unter den Teppich gekehrt.

Nun ist es lästig, für eine einfache kleine Formel ein Bildbearbeitungsprogramm zu nutzen oder gleich SVG zu lernen. Bei jeder Änderung (Änderung der Schriftgröße, vom Typo bis zum Fehler) muss das Bild erneut angefasst werden. Wenn der Benutzer die Seite zoomt, werden Bilder unscharf und pixelig.

Solange allerdings mathematische Formeln kurz und klein bleiben, können wir auf Bilder verzichten – aber natürlich ist der schlichte Formelsatz mit sup und sub kein Ersatz für MathML.

sub { color: red; }
<p>2H<sub>2</sub>+O<sub>2</sub> -> 2H<sub>2</sub>O</p>
2H2+O2 -> 2H2O

Wurzel und Exponenten mit HTML

|r|  =  <span>√</span>(x<sup>2</sup> + y<sup>2</sup> + z<sup>2</sup>)
|r|  =  √(x2 + y2 + z2)

Summenformel mit HTML

<small>∞</small><br />
  <span>∑</span>
<i>a<sub>n</sub></i><br />
<small><i>n</i> = 0</small>
∞
∑ an
n = 0

Mit UTF-8 stehen für Formeln in HTML-Seiten Sonderzeichen vom PlusMinus (±) über (∏) Produkt- und Summenzeichen (∑) bis Unendlich (∞) zur Verfügung.

Wenn es etwas mehr als eine einfach Formel ist, liefert MathML mit MathJax schönere Formeln mit weniger Frickelei

sup und sub im Text

Im Fließtext fallen Zeilen mit sup und sub aus dem Rahmen.

sub und sup stören den Textfluss: Mit H2O auf mehr als 50 m2 beeindruckt der See und Segel von AhoiTM fallen schnell durch unterschiedliche Zeilenhöhe ins Auge.

sub und sup stören den Textfluss: Mit H2O auf mehr als 50 m2 beeindruckt der See und Segel von AhoiTM fallen schnell durch unterschiedliche Zeilenhöhe ins Auge.

Das bekommen ein paar Zeilen CSS für sub und sup in den Griff.

sup, sub {
   position: relative;
   vertical-align: baseline;
   top: -0.4em;
}
sub { top: 0.4em; }
Suchen auf mediaevent.de