CSS, HTML und Javascript mit {stil}

HTML sub | sup | small

HTML sub ist Tiefstellen, sub ist Hochstellen

HTML sub und sup oder stellen einfache chemische, physikalische und mathematische Formeln und Fußnoten im Text ohne Grafik oder Bitmap dar. small steht für Kleingedrucktes.

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.

HTML sub und sup, big und small 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 enthalten.

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; }

HTML small • Kleingedrucktes

HTML small setzt den Text kleiner – wie klein und mit welcher Schrift, bleibt dem Browser bzw. dem CSS überlassen.

small ist nicht mehr einfach zur Verkleinerung der Schriftgröße gedacht,
sondern für das Kleingedruckte

small ist ein Inline-Element, führt nicht zu einem Zeilenumbruch und darf keine Blockelemente wie p, table oder div enthalten.

Am Samstag gibt Mario Mustermann ein Klavierkonzert in der Aula der Antoniusschule.

Kartenvorverkauf am Kiosk gegenüber

big wird von den Browsern zwar noch unterstützt, hat aber den Sprung in HTML5 nicht geschafft – big ist kein semantisches Tag, bringt keine besondere Bedeutung, sondern dient nur der Darstellung. small hingegen ist in HTML5 weiter vertreten: Seine Bedeutung ist die einer Fußzeile, eines kleinen Nebensatzes am Rande – vergleichbar mit dem Kleingedruckten im Print.

Weiterlesen

H O <sub> </sub>