CSS, HTML und Javascript mit {stil}

HTML sub | sup | small

HTML sub, sup Tag

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

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

HTML small • Kleingedrucktes

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.

Einfache Formeln mit sub und sup

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 für den 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.

Wenn wir Formeln auf Webseiten sehen, steckt dahinter fast immer ein Bild, denn HTML hat nicht wirklich um Formeln gekümmert.

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 schreiben

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

Weiterlesen