Übung 10: Verschachtelte Listen ohne wachsende Schrift

Hinweise

Lösung

li { font-size: 1.25rem; }

Warum em sich multipliziert

Bei der Schriftgröße bezieht sich em auf die Schriftgröße des Elternelements. In einer flachen Struktur ist das unauffällig; in einer verschachtelten Liste multipliziert es sich mit jeder Ebene. Aus 1,25 auf drei Ebenen werden nicht 1,25, sondern das Produkt – aus 16 Pixeln Grundgröße also 20, dann 25, dann rund 31.

Bemerkenswert ist, dass die Regel für Listen besonders oft zuschlägt, weil eine Liste in einer Liste die übliche Struktur ist und der Selektor für den Listenpunkt auf jeder Ebene greift. Dieselbe Falle stellt jede Verschachtelung mit einem allgemeinen Selektor – bei einer Kommentarhierarchie oder einem Menü mit Untermenüs.

Der Bezug auf das Elternelement gilt nur für die Schriftgröße selbst. Bei allen anderen Eigenschaften bezieht sich em auf die Schriftgröße desselben Elements – ein Innenabstand von einem em ist also so groß wie die eigene Schrift, nicht wie die des Elternteils.

Was rem anders macht

rem misst immer an der Schriftgröße des Wurzelelements, unabhängig davon, wie tief das Element steht. Damit ergibt derselbe Wert auf jeder Ebene dieselbe Größe, und das Multiplizieren entfällt. Genau das verlangt die Aufgabe.

Der Bezug auf die Wurzel hat einen zweiten Vorteil: Ohne eigene Angabe ist die Wurzelgröße der Vorgabewert des Browsers, in aller Regel sechzehn Pixel – und dieser Wert lässt sich in den Einstellungen ändern. Wer in rem arbeitet, respektiert diese Einstellung automatisch. Eine absolute Größe am Wurzelelement hebelt sie aus und ist deshalb zu vermeiden.

Aufgehoben ist em damit nicht. Für Maße innerhalb eines Bausteins – Innenabstand eines Knopfes, Rundung, Mindestbreite – ist der Bezug auf die eigene Schriftgröße gerade das Gewünschte: Der Baustein skaliert dann als Ganzes, wenn seine Schrift wechselt. Eine brauchbare Aufteilung lautet: Schriftgrößen in rem, Innenmaße in em.

Der dritte Weg: nur einmal setzen

Es gibt eine Lösung, die ohne beide Einheiten auskommt: die Schriftgröße gar nicht am Listenpunkt setzen, sondern einmal weiter oben. Weil die Größe vererbt wird, erreicht sie jede Ebene, und weil sie nur an einer Stelle steht, kann sie sich nicht aufsummieren.

Das ist in echten Stylesheets oft die bessere Antwort. Die Aufgabe verlangt sie nicht, weil sie den Mechanismus zeigen soll – aber die dahinterliegende Regel ist die eigentliche Lehre: Wer eine vererbende Eigenschaft an einem Selektor setzt, der auf mehreren Ebenen zugleich greift, baut sich das Problem selbst.

Wo eine Verschachtelung tatsächlich kleiner werden soll – bei Fußnoten oder in einem Kommentarbaum –, ist der relative Bezug richtig, dann aber mit einer Begrenzung nach unten. Ohne sie wird die vierte Ebene unlesbar, und niemand sieht sie beim Entwurf, weil die Beispieldaten selten so tief gehen.

Schriftgrößen, die mit dem Platz wachsen

Zwischen einer festen Größe und einer Größe, die vom Anzeigebereich abhängt, gibt es einen Mittelweg: eine Angabe mit unterer Grenze, bevorzugtem Wert und oberer Grenze. Der bevorzugte Wert enthält üblicherweise einen Anteil am Anzeigebereich, sodass die Schrift stufenlos mitwächst, und die beiden Grenzen verhindern, dass sie auf dem Telefon zu klein und auf einem breiten Bildschirm zu groß wird.

Damit entfallen die meisten Umschaltstellen für Schriftgrößen. Wichtig ist nur eine Bedingung: Der bevorzugte Wert muss einen Anteil in einer relativen Einheit enthalten, sonst lässt sich der Text im Browser nicht mehr vergrößern – eine reine Anteilsangabe am Anzeigebereich reagiert auf die Einstellung des Nutzers nicht. Die übliche Form kombiniert deshalb einen festen Sockel in rem mit einem Anteil.

Für die Zeilenhöhe gilt derselbe Gedanke in einfacherer Form: Eine Zahl ohne Einheit vererbt den Faktor und passt sich damit jeder Schriftgröße an, während eine Länge oder ein Prozentwert das ausgerechnete Ergebnis vererbt und in einer größeren Schrift zu eng wird. Das ist der einzige Fall in CSS, in dem eine Zahl ohne Einheit anders vererbt wird als ein Prozentwert mit demselben Ergebnis.

Gemessen wird in dieser Aufgabe die berechnete Schriftgröße auf jeder Verschachtelungsebene. Damit besteht jede Lösung, die auf allen Ebenen denselben Wert ergibt – die Einheit mit Bezug auf die Wurzel, eine absolute Angabe oder das Setzen an einer einzigen Stelle weiter oben. Was durchfällt, ist der relative Bezug auf das Elternelement, und das ist der Punkt der Übung.

Fragen zur Übung