vertical-line: warauf bezieht sich text-top ?

[wilmaed]

MDN: "text-top Aligns the top of the element with the top of the parent element's font."

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Da dachte ich mir: "text-top positioniert am oberen Rand innerhalb der Zeilenhöhe". Diese Wirkung hat aber text-bottom (genau umgekehrt) … also falsch verstanden.

Beispiel: (siehe codepen)

line-heigt: 80px. Der Buchstabe A ist auf der Baseline ~73px top, T hat seine "Baseline" bei ~45px top, X ~101px top.

Wie ergeben sich diese 45px? T ist bottom von was?

[Rolf B]

Hallo wilmaed,

hier kommen ein paar Effekte zusammen. Die Vermischung von line-height und vertical-align: text-* ist ungesund bzw. anti-intuitiv. Oder extuitiv :D

Erstens: line-height:80px macht die Zeile höher. Der Text wird mittig darin angeordnet. Ohne vertical-aligns würde dein ATX also vertikal in der Mitte des DIV ausgerichtet sein. Hintergrundfarben und Ränder beachten diese Erhöhung NICHT, d.h. es ist schwierig, die Grenzen der line-height Vergrößerung sichtbar zu machen.

vertical-align: text-top verschiebt sein Element (den span) so, dass seine Oberkante am Text-Top der Zeile im Eltern-Element ausgerichtet ist, in der das Element steht. Die Oberkante des X-span ist ein ganzes Stück über dem X - wo genau, siehst Du nicht. Der Bezug für die Ausrichtung ist die Oberkante der Font-Box um das A herum, also knapp oberhalb des A. Deswegen wandert das X nach unten.

Analog text-bottom: Die Unterkante des X-Span wird an der Unterkante der Font-Box des A ausgerichtet (also ein paar Pixel unter dem A, da könnten ja noch Buchstaben mit Unterlänge sein). Deswegen wandert das X nach oben.

vertical-align ist ein schönes Beispiel für die alte Weisheit, dass Computer nie tun, was sie sollen. Immer nur das, was wir ihnen sagen. Und oft geht es uns dabei wie dem deutschen Gast im britischen Restaurant: "Misterr waiterr, wenn I become my steak?!" - "Oh, I hope never, Sir!".

Rolf

[Rolf B]

Hallo wilmaed,

hier noch ein Nachtrag. Betrachte folgendes Bild. Eventuell etwas zoomen.

Das HTML für jeden der vier Blöcke sieht prinzipiell so aus:

<section>
<span>Afg</span>
<span class="oben">Bfg</span>
<span class="unten">Cfg</span>
</section>

Per CSS habe ich für die rechte Seite den Rand blau gemacht und für .oben/.unten ein vertical-align:top/bottom aktiviert. Die jeweils linken Bilder haben dem roten Rand und kein vertical-align. Die font-size beträgt in allen 4 Bildern 40px. Die grünen Linien sind per CSS hinzugefügt. (jsFiddle)

In der oberen Reihe ist keine line-height gesetzt, da wird eigentlich nur um ein Pixel verschoben.

In der unteren Reihe habe ich line-height auf 60px gesetzt. Per Grafikprogramm habe ich im Kasten unten rechts jeweils die linke Hälfte der Großbuchstaben des linken unteren Kastens überlagert, und jeweils die rechte Hälfte der "g" aus dem linken oberen Kasten. Dadurch erkennt man die ursprüngliche Höhe für die Version ohne Verschiebung, mit und ohne line-height.

Die schwarzen Striche zeigen an, wie sich das line-height behaftetete Bfg an der Oberkante des line-height freien Afg ausrichtet und das Cfg entsprechend an dessen Unterkante.

Rolf