Webeinheiten in YAML

Theorie und Umrechnungstabelle

Von: Santscho

Um was gehts? — Theorie Masseinheiten | Umrechnungstabelle | Point |Pixel |Em | %

Wer sich die originalen YAML-Templates und auch den "YAML Builder" genauer anschaut, stellt fest, dass sämtliche Werte in % oder em angegeben sind. Das hat einen berechtigten Grund, denn die Templates bilden so mit den CSS-Dateien eine flexible Einheit.

Zum Beispiel ermöglichen ein flexibles Layout (basemod.css und die Core-CSS-Dateien in yaml) in Kombination mit flexiblen Inhalts-CSS (content.css), ein Stufenloses Skalieren im Web Browser. So wird z.B. auf einem 22 Zoll Bildschirm die Internetseite gleich dargestellt wie auf einem 17 Zoll Bildschirm. Die Gesamte Einheit wird proportional verkleinert, bzw. vergrössert (Layout, Spaltenbreiten und -höhen, Schriftgrössen, ...).

Wer das "Spalten-Tutorial" durchgeführt hat, muss bemerkt haben, dass nirgends Spaltenbreiten angegeben werden mussten. — Weil die Spaltenbreiten standardmässig mit %-Werten definiert sind und sich somit automatisch dem "Mutter-Container" anpassen.


Um die "Logic" von YAML besser zu verstehen, wirft man am Besten mal einen Blick auf die CSS-Definitionen der Inhalts-Elemente, welche zudem sehr gut komentiert sind:

In der content.css werden zuerst alle Schriftgrössen auf 100.01% (16px) zurück gesetzt (siehe Tabelle). Man könnte das auch als "Eichung" bezeichnen. Dies geschieht in der Klasse für html:

html * { font-size: 100.01% }


Als nächstes wird die Standardschriftgrösse des Basis-Layouts definiert:

body { font-size: 75.00% } was 12px entspricht.


Dann kommen die Definitionen der Absatz-Titel h1 bis h6


Für das Standard Absatzformat "p" (<p>Das ist ein Standard Absatz</p>) gibt YAML keinen Wert vor. Da nichts angegeben, wird der Wert von body übernommen, also 75.00%. Wäre die Schriftgrösse auch nicht in body definiert, würde p die Werte von html übernehmen (100% = 16px).


Wer diese Logik versteht, kann für zukünftiges Webdesign weitgehend auf die Verwendung von festen Werten (px und pt) verzichten. Die Umrechnungstabelle (rechts) kann dabei sehr unterstützend sein.

Angaben ohne Gewähr!

Points
Pixels
Ems
Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%