CSS-Quiz: Textformatierung und -darstellung – Teil 1

Die fünf allgemeinen Schriftfamilien

CSS 1 hat fünf allgemeine Familien eingeführt: Serifenschrift, serifenlose Schrift, Festbreitenschrift, kursive Schreibschrift und Zierschrift. Hinter jeder steht keine bestimmte Schrift, sondern eine Kategorie, für die der Browser aus seinen Einstellungen eine konkrete Schrift einsetzt – deshalb trifft eine solche Angabe immer. Deshalb gehört eine von ihnen ans Ende jeder Schriftliste.

Namen mit Leerzeichen gehören in Anführungszeichen, die allgemeinen Familien niemals: In Anführungszeichen wäre daraus die Suche nach einer real installierten Schrift dieses Namens, und die gibt es nicht. Das ist einer der Fehler, die still bleiben – die Liste läuft dann bis zum Ende durch und endet bei der Vorgabe des Browsers.

Abgearbeitet wird die Liste übrigens Zeichen für Zeichen und nicht einmal für das ganze Element: Fehlt in der ersten Schrift ein Zeichen, holt der Browser es aus der nächsten, die es hat. Deshalb kann ein Text in zwei Schriften erscheinen, ohne dass im Stylesheet etwas falsch steht – besonders auffällig bei Anführungszeichen, Gedankenstrichen und Währungszeichen.

Worauf sich die Prozentwerte beziehen

Drei Eigenschaften dieses Kapitels nehmen Prozentwerte, und alle drei beziehen sich auf etwas anderes. Bei der Schriftgröße ist der Bezug die Schriftgröße des Elternelements – daraus folgt das Aufsummieren in verschachtelten Strukturen. Bei der Zeilenhöhe ist es die Schriftgröße desselben Elements. Und beim Erstzeileneinzug ist es die Breite des enthaltenden Blocks.

Bei der Zeilenhöhe kommt eine Besonderheit hinzu, die es sonst nirgends gibt: Eine Zahl ohne Einheit wird anders vererbt als ein Prozentwert mit demselben Ergebnis. Die Zahl vererbt den Faktor, sodass jedes Kind mit seiner eigenen Schriftgröße rechnet; der Prozentwert vererbt das ausgerechnete Ergebnis. In einer Überschrift innerhalb eines Bereichs mit prozentualer Zeilenhöhe kleben die Zeilen deshalb aneinander.

Aus alledem folgt eine schlichte Empfehlung: Zeilenhöhen als Zahl ohne Einheit, Schriftgrößen als Angabe mit Bezug auf die Wurzel, Einzüge in einer relativen Einheit oder in Prozent, je nachdem ob sie der Schrift oder der Spaltenbreite folgen sollen.

Ausrichtung: Inhalt oder Box

Die waagerechte Ausrichtung richtet den Inhalt eines Block-Containers aus – also die Zeilenboxen darin mit allem, was inline ist. Auf die Lage der Box selbst hat sie keinen Einfluss. Wer einen Kasten mittig setzen will, braucht die automatischen Außenabstände; wer den Text darin mittig setzen will, die Ausrichtung. Diese Verwechslung ist die dauerhafteste in diesem Kapitel.

Senkrecht gibt es keine entsprechende Eigenschaft für Blöcke. Die Eigenschaft mit dem passenden Namen hat zwei verschiedene Bedeutungen: An einem Inline-Element bestimmt sie die Lage in der Zeilenbox, an einer Tabellenzelle die Lage des Inhalts in der Zelle. Nur die zweite tut, was man von einer senkrechten Ausrichtung erwartet – und genau deshalb wurden über Jahre Layouts als Tabellen gebaut.

Die Unterstreichung gehört ebenfalls hierher, und mit ihr eine Frage der Bedeutung: Sie ist im Web das Zeichen für einen Verweis. Sie an gewöhnlichem Text zu setzen erzeugt eine Erwartung, die ins Leere läuft; sie an Verweisen zu entfernen nimmt allen, die Farben schlecht unterscheiden, das einzige verbleibende Merkmal. Beides ist keine Frage der Eigenschaft, sondern eine Entwurfsentscheidung.

Die Schlüsselwörter für die Schriftgröße

Neben Längen und Prozentwerten nimmt die Schriftgröße zwei Sorten von Schlüsselwörtern an. Die absoluten reichen von sehr klein bis sehr groß in sieben Stufen; die Stufen bilden eine Skala, deren Verhältnis der Browser bestimmt und deren mittlere dem Ausgangswert entspricht. Die relativen benennen eine Stufe größer oder kleiner als beim Elternelement.

Der praktische Vorteil der absoluten Schlüsselwörter ist, dass sie sich an der Einstellung des Nutzers orientieren und nicht aufsummieren. Der Nachteil ist die grobe Abstufung und die fehlende Kontrolle über die Schritte – deshalb sind sie im Alltag selten, tauchen aber im Vorgabe-Stylesheet der Browser für Überschriften auf.

Als absolute Längeneinheiten sind für die Schriftgröße Zentimeter, Millimeter, Zoll, Punkt, Pica und das Pixel zulässig. Auf dem Bildschirm sind sie alle über einen festen Faktor an das Pixel gebunden; im Druck sind sie echte Maße, und dort ist der Punkt die naheliegende Wahl. Für Bildschirmschriften ist eine Angabe mit Bezug auf die Wurzel fast immer die bessere, weil sie die Einstellung des Nutzers respektiert.

Und wer die Prozentbezüge dieses Kapitels nicht auswendig lernen will, findet sie gesammelt in der Kapitelseite zur Schrift und der Kapitelseite zum Text – dort steht für jede Eigenschaft in einer eigenen Spalte, worauf sich ein Prozentwert bezieht.