alignment-baseline

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die alignment-baseline CSS-Eigenschaft legt die spezifische Baseline fest, die zur Ausrichtung des Textes und der Inhalte auf Inline-Ebene eines Rahmens verwendet wird. Baseline-Ausrichtung bezeichnet die Beziehung zwischen den Baselines mehrerer Ausrichtungsobjekte innerhalb eines Ausrichtungskontexts. Bei der Baseline-Ausrichtung gibt der alignment-baseline-Eigenschaftswert an, welche Baseline des Rahmens an die entsprechende Baseline seines Ausrichtungskontexts ausgerichtet wird.

Hinweis: Die alignment-baseline-Eigenschaft hat nur Auswirkungen auf Boxen auf Inline-Ebene, Flex-Elemente, Grid-Elemente, Tabellenzellen und die SVG-Elemente <text>, <textPath> und <tspan>. Falls vorhanden, setzt sie das alignment-baseline-Attribut der Form außer Kraft.

In einem Inline-Formatierungskontext teilen sich Fragmente von Boxen auf Inline-Ebene und Glyphen einen Ausrichtungskontext, der durch das übergeordnete Fragment der Inline-Box entlang ihrer Inline-Achse festgelegt wird. Im SVG-Textlayout geben diese Werte stattdessen die Baseline an, die an die aktuelle Textposition von SVG ausgerichtet wird.

Syntax

css

/* Initial value */ alignment-baseline: baseline; /* Keyword values */ alignment-baseline: alphabetic; alignment-baseline: central; alignment-baseline: ideographic; alignment-baseline: mathematical; alignment-baseline: middle; alignment-baseline: text-bottom; alignment-baseline: text-top; /* Mapped values */ alignment-baseline: text-before-edge; /* text-top */ alignment-baseline: text-after-edge; /* text-bottom */ /* Deprecated values */ alignment-baseline: auto; alignment-baseline: before-edge; alignment-baseline: after-edge; alignment-baseline: hanging; /* Global values */ alignment-baseline: inherit; alignment-baseline: initial; alignment-baseline: revert; alignment-baseline: revert-layer; alignment-baseline: unset;

Werte

baseline: Verwendet den dominant-baseline-Wert des übergeordneten Elements.
alphabetic: Wird beim Schreiben in Latein, Kyrillisch, Griechisch und vielen anderen Schriftsystemen verwendet; stimmt die alphabetische Baseline des Rahmens mit der des übergeordneten Elements überein, entsprechend dem unteren Rand der meisten, jedoch nicht aller Zeichen.
central: Stimmt die zentrale Baseline des Rahmens mit der zentralen Baseline seines übergeordneten Elements überein, entsprechend der ideografischen zentralen Baseline, die sich auf halbem Weg zwischen den ideografisch-unteren und ideografisch-obersten Baselines befindet.
ideographic: Stimmt die ideografische Zeichengesicht-Unterkante-Baseline des Rahmens mit der seines übergeordneten Elements überein, wobei die abgeleitete Baseline-Tabelle mit der ideografischen Baseline-Tabelle in der Schriftart konstruiert wird.
mathematical: Stimmt die mathematische Baseline des Rahmens mit der seines übergeordneten Elements überein, entsprechend der zentralen Baseline, um die mathematische Zeichen entworfen sind.
middle: Richtet die vertikale Mitte des Rahmens mit der Baseline des übergeordneten Rahmens plus der halben x-Höhe des übergeordneten Rahmens aus. Verwendet die x-Mittel-Baselines; außer unter text-orientation: upright; (wo die alphabetischen und x-Höhen-Baselines im Wesentlichen bedeutungslos sind), in welchem Fall es stattdessen die central-Baseline verwendet.
text-bottom: Stimmt den unteren Rand des Rahmens mit dem oberen Rand des Inhaltsbereichs des übergeordneten Elements überein, wobei die Unterkante der Linie eines Inline-Inhaltsrahmens verwendet wird.
text-top: Stimmt den oberen Rand des Rahmens mit dem oberen Rand des Inhaltsbereichs des übergeordneten Elements überein; die Überkante der Linie eines Inline-Inhaltsrahmens.

Hinweis: In SVG2 wurden auto, before-edge und after-edge als veraltet erklärt, und text-before-edge ist ein Alias für text-top, und text-after-edge ist ein Alias für text-bottom. Diese Schlüsselwörter sollten nicht als Teil der vertical-align-Shorthand-Eigenschaft verwendet werden. Browser unterstützen auto als Synonym für baseline und hanging, wobei der Ausrichtungspunkt des auszurichtenden Objekts mit der "hängenden" Baseline des übergeordneten Textelement-Inhalts ausgerichtet wird, aber keiner ist Teil der Spezifikation.

Formale Definition

Anfangswert	`baseline`
Anwendbar auf	inline-level boxes, flex items, grid items, table cells, and SVG text content elements
Vererbt	Nein
Berechneter Wert	the specified keyword
Animationstyp	diskret

Formale Syntax

alignment-baseline = 
 baseline |
 text-bottom |
 alphabetic |
 ideographic |
 middle |
 central |
 mathematical |
 text-top

Beispiel

html

<svg viewBox="0 0 450 160" width="700" height="200"> <text x="50" y="20">alphabetic</text> <text x="50" y="60">central</text> <text x="50" y="100">hanging</text> <text x="50" y="140">ideographic</text> <text x="250" y="20">mathematical</text> <text x="250" y="60">middle</text> <text x="250" y="100">text-bottom</text> <text x="250" y="140">text-top</text> <path d="M 0,20 l 400,0 m -400,40 l 400,0 m -400,40 l 400,0 m -400,40 l 400,0" stroke="grey" /> <text x="0" y="20" fill="red">baseline</text> <text x="0" y="60" fill="red">baseline</text> <text x="0" y="100" fill="red">baseline</text> <text x="0" y="140" fill="red">baseline</text> </svg>

css

text { font-size: 20px; alignment-baseline: baseline; } text:nth-of-type(1) { alignment-baseline: alphabetic; } text:nth-of-type(2) { alignment-baseline: central; } text:nth-of-type(3) { alignment-baseline: hanging; } text:nth-of-type(4) { alignment-baseline: ideographic; } text:nth-of-type(5) { alignment-baseline: mathematical; } text:nth-of-type(6) { alignment-baseline: middle; } text:nth-of-type(7) { alignment-baseline: text-bottom; } text:nth-of-type(8) { alignment-baseline: text-top; }

Spezifikationen

Specification
CSS Inline Layout Module Level 3 # alignment-baseline-property
Scalable Vector Graphics (SVG) 2 # AlignmentBaselineProperty