CSS-Quiz · Runde 2
CSS-Quiz: Textformatierung und -darstellung – Teil 2
10 Fragen zu Textformatierung und -darstellung in CSS 2.1. Jede Antwort wird sofort bewertet und erklärt; das Ergebnis erscheint am Ende der Seite.
Warum die Unterstreichung durchgreift
Die Textauszeichnung wird nicht im eigentlichen Sinn vererbt, wirkt aber über die Nachfahren hinweg: An einem Block gesetzt, unterstreicht sie den gesamten Text darin, einschließlich aller Inline-Elemente – und lässt sich an einem Nachfahren nicht abschalten. Eine Betonung innerhalb eines unterstrichenen Absatzes bleibt unterstrichen, auch wenn dort ausdrücklich das Gegenteil steht.
Der Grund ist, dass die Linie zur Auszeichnungsbox des Blocks gehört und nicht zu den Boxen der Kinder. Nur ein Nachfahre, der einen eigenen Formatierungskontext eröffnet – ein Inline-Block, eine schwebende Box, eine Tabellenzelle –, ist davon ausgenommen und trägt die Linie nicht.
Ein Rahmen verhält sich anders: Er gehört genau zu der Box, an der er notiert ist. Wer eine Linie braucht, die einzelne Wörter aussparen soll, kommt mit der Unterstreichung also nicht weiter. Umgekehrt ist die Durchgriffswirkung nützlich, wenn eine ganze Zeile durchgestrichen erscheinen soll – ein einziger Wert am Container genügt.
Was die Kurzform für Schriften nicht kann
Die Kurzform setzt bis zu sechs Angaben in einer Zeile, und zwei davon sind Pflicht: Größe und Familie, in dieser Reihenfolge und am Ende. Alles davor – Stil, Variante, Stärke – ist entbehrlich, und die Zeilenhöhe wird hinter der Größe mit einem Schrägstrich angehängt.
Der Punkt, an dem die meisten stolpern: Was nicht genannt ist, wird nicht etwa beibehalten, sondern auf den Ausgangswert zurückgesetzt. Eine vorher gesetzte Zeilenhöhe ist nach einer Kurzform ohne Zeilenhöhe verschwunden, und dasselbe gilt für Stärke und Variante. Die Kurzform ist eine vollständige Neudefinition, keine Ergänzung.
Zurückgesetzt werden inzwischen auch Eigenschaften, die in ihrer Schreibweise gar nicht vorkommen können – die Schriftbreite, die Größenanpassung und die Angaben zu den Schriftvarianten. Setzen lassen sie sich über die Kurzform nicht, verlieren aber tut man sie. Wer Kapitälchen, Ziffernvarianten oder eine angepasste Breite verwendet, notiert die Schriftangaben deshalb besser einzeln.
Leerraum, Wortabstand und Umbruch
Im Normalfall fasst der Browser jede Folge aus Leerzeichen, Tabulatoren und Zeilenumbrüchen zu einem einzigen Leerzeichen zusammen; Leerraum am Zeilenanfang und -ende fällt ganz weg. Der Zeilenumbruch im Quelltext ist also nur ein Leerzeichen, und zehn Leerzeichen hintereinander sind eines. Genau darum lässt sich Quelltext frei einrücken.
Die Eigenschaft für den Leerraum schaltet an drei unabhängigen Stellen: ob Folgen zusammengefasst werden, ob Umbrüche aus dem Quelltext erhalten bleiben und ob am Zeilenende automatisch umbrochen wird. Aus diesen drei Ja-Nein-Fragen ergeben sich ihre Werte – wer sie so liest, muss sich keine Tabelle merken.
Für den Abstand zwischen Wörtern gibt es zwei Eigenschaften: eine, die den Zwischenraum an den Wortgrenzen vergrößert, und eine, die den Abstand zwischen allen Zeichen ändert und damit auch die Wörter auseinanderzieht. Beide nehmen negative Werte an. Und für einzelne Stellen ist die Eigenschaft ohnehin zu grob – ein geschütztes Leerzeichen hält zwei Wörter zusammen, ein weiches Trennzeichen erlaubt einen Umbruch mit Bindestrich.
Das Attribut valign und die CSS-Eigenschaft
Beide heißen fast gleich und tun in einer Tabellenzelle dasselbe – die senkrechte Ausrichtung des Zelleninhalts. Der Unterschied liegt woanders: Das Attribut gibt es nur an Tabellenelementen, die Eigenschaft an jedem Inline-Element und an Tabellenzellen. Und dort bedeutet sie zwei verschiedene Dinge.
An einem Inline-Element bestimmt sie die Lage in der Zeilenbox: Grundlinie, hoch- und tiefgestellt, oben und unten in der Zeile, dazu Längen und Prozentwerte, die sich auf die Zeilenhöhe beziehen. An einer Tabellenzelle bestimmt sie die Lage des Inhalts in der Zelle, und dort haben die Werte für hoch- und tiefgestellt sowie alle Längenangaben keine Wirkung.
Vererbt wird die Eigenschaft nicht – anders als fast alle anderen dieses Kapitels. Der Grund liegt auf der Hand: Ein vererbter Wert würde jede verschachtelte Inline-Box gegenüber ihrer Zeile verschieben und die Zeile auseinanderziehen. Wer eine ganze Tabelle oben ausrichten will, muss die Eigenschaft also an den Zellen setzen, nicht an der Tabelle.
Auch hier lohnt der Blick in die Spalte der Schnellreferenz, die für jede Eigenschaft dieses Kapitels Ausgangswert, Vererbung und Bezugswert nebeneinanderstellt. Die meisten Überraschungen dieser Runde lassen sich dort in einer Zeile nachlesen – und wer die Tabelle einmal von oben nach unten liest, hat den Zusammenhang zwischen den zwölf Eigenschaften schneller als über zwölf Einzelseiten.