Gunnar Bittersmann: Vertikale Ausrichtung

Beitrag lesen

@@Sigrid

die horizontalen Linien im Beispiel sollten (im Extremfall) von oben/unten an die Schrift anstoßen. Anders ausgedrückt, wie kann ich die Höhe des rot umrandeten Bereichs verringern, wobei dies nicht durch eine exakte Höhenangabe erfolgen soll sondern in Abhängigkeit des Inhalts in dem Bereich.

Mit text-box (text-box-edge und text-box-trim). Interaktiver Vergleich der Werte.

Deine Box auf Versalhöhe und Grundlinie getrimmt sieht dann so aus:

Codepen

Wenn die Unterlängen (wie beim p) mit rein sollen, musst du alphabetic in text ändern. Wenn auch evtl. auftretende diaktitische Zeichen über Größbuchstaben (wie die Umlautpunkte beim Ä) mit rein sollen, musst du cap in text ändern. Aber dann kann man das auch gleich sein lassen.

Das funktioniert bislang in Safari und Chromia. In Firefox ist die Box dann halt größer, auch nicht schlimm (progressive enhancement).

🖖 Live long and prosper

--
“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
— Bruce Springsteen, Manchester 2025-05-14