dominant-baseline

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

Die dominant-baseline CSS Eigenschaft gibt die spezifische Baseline an, die verwendet wird, um den Text und den Inhalt auf Inline-Ebene der Box auszurichten. Sie gibt auch die Standardausrichtungsbaseline von allen Boxen an, die an der Baseline-Ausrichtung im Ausrichtungskontext der Box teilnehmen. Falls vorhanden, überschreibt sie das dominant-baseline-Attribut der Form.

Baselines werden aus der Schrift-Baseline-Tabelle ausgewählt. Wenn es in der nominalen Schrift keine Baseline-Tabelle gibt oder wenn die Baseline-Tabelle keinen Eintrag für die gewünschte Baseline hat, kann der Browser Heuristiken verwenden, um die Position der gewünschten Baseline zu bestimmen.

Die dominant-baseline-Eigenschaft wird verwendet, um eine scaled-baseline-table zu bestimmen oder neu zu bestimmen. Eine scaled-baseline-table ist ein kombinierter Wert mit drei Komponenten:

ein Baseline-Identifikator für die dominante Baseline,
eine Baseline-Tabelle, und
eine Baseline-Tabellenschriftgröße.

Einige Werte von dominant-baseline bestimmen alle drei Werte neu. Andere stellen nur die Schriftgröße der Baseline-Tabelle wieder her. Wenn der Initialwert auto ein unerwünschtes Ergebnis liefert, kann diese Eigenschaft verwendet werden, um die gewünschte scaled-baseline-table explizit festzulegen.

Hinweis: Die dominant-baseline-Eigenschaft hat nur eine Wirkung auf die <text>, <textPath>, <tref> und <tspan> SVG-Elemente.

Syntax

css

/* Initial value */
dominant-baseline: auto;

/* Keyword values */
dominant-baseline: alphabetic;
dominant-baseline: central;
dominant-baseline: hanging;
dominant-baseline: ideographic;
dominant-baseline: mathematical;
dominant-baseline: middle;
dominant-baseline: text-bottom;
dominant-baseline: text-top;

/* Global values */
dominant-baseline: inherit;
dominant-baseline: initial;
dominant-baseline: revert;
dominant-baseline: revert-layer;
dominant-baseline: unset;

Werte

auto

Wenn diese Eigenschaft auf ein <text>-Element angewendet wird, hängt der berechnete Wert vom Wert des writing-mode-Attributs ab.

Wenn der writing-mode horizontal ist, dann ist der Wert der dominanten Baseline-Komponente alphabetic. Andernfalls, wenn der writing-mode vertikal ist, ist der Wert der dominanten Baseline-Komponente central.

Wenn diese Eigenschaft auf ein <tspan>, <tref> oder <textPath>-Element angewendet wird, bleiben die dominante Baseline- und die Baseline-Tabellenkomponenten gleich wie die des übergeordneten Textinhalts-Elements.

Wenn der berechnete baseline-shift-Wert tatsächlich die Baseline verschiebt, wird die Schriftgröße der Baseline-Tabelle auf den Wert des font-size-Attributs des Elements, auf dem das dominant-baseline-Attribut vorkommt, eingestellt, andernfalls bleibt die Schriftgröße der Baseline-Tabelle gleich wie die des Elements.

Wenn kein übergeordnetes Textinhalts-Element vorhanden ist, wird der Wert der scaled-baseline-table wie für <text>-Elemente konstruiert.

alphabetic

Der Baseline-Identifikator für die dominante Baseline wird auf alphabetic gesetzt, die abgeleitete Baseline-Tabelle wird unter Verwendung der alphabetic Baseline-Tabelle in der Schrift konstruiert, und die Schriftgröße der Baseline-Tabelle wird auf den Wert des font-size SVG-Attributs des Elements oder der CSS font-size, falls gesetzt, geändert.

central

Der Baseline-Identifikator für die dominante Baseline wird auf central gesetzt. Die abgeleitete Baseline-Tabelle wird aus den definierten Baselines in der Baseline-Tabelle der Schrift konstruiert. Diese Schrift-Baseline-Tabelle wird mit der folgenden Prioritätenreihenfolge von Baseline-Tabellennamen gewählt: ideographic, alphabetic, hanging, mathematical. Die Schriftgröße der Baseline-Tabelle wird auf den Wert des font-size SVG-Attributs des Elements oder der CSS font-size, falls gesetzt, geändert.

hanging

Der Baseline-Identifikator für die dominante Baseline wird auf hanging gesetzt, die abgeleitete Baseline-Tabelle wird unter Verwendung der hanging Baseline-Tabelle in der Schrift konstruiert, und die Schriftgröße der Baseline-Tabelle wird auf den Wert des font-size SVG-Attributs oder der font-size CSS-Eigenschaft auf diesem Element geändert.

ideographic

Der Baseline-Identifikator für die dominante Baseline wird auf ideographic gesetzt, die abgeleitete Baseline-Tabelle wird unter Verwendung der ideographic Baseline-Tabelle in der Schrift konstruiert, und die Schriftgröße der Baseline-Tabelle wird auf den Wert des font-size SVG-Attributs des Elements oder der CSS font-size, falls gesetzt, geändert.

mathematical

Der Baseline-Identifikator für die dominante Baseline wird auf mathematical gesetzt, die abgeleitete Baseline-Tabelle wird unter Verwendung der mathematical Baseline-Tabelle in der Schrift konstruiert, und die Schriftgröße der Baseline-Tabelle wird auf den Wert des font-size SVG-Attributs des Elements oder der CSS font-size, falls gesetzt, geändert.

middle

Der Baseline-Identifikator für die dominante Baseline wird auf middle gesetzt. Die abgeleitete Baseline-Tabelle wird aus den definierten Baselines in einer Baseline-Tabelle in der Schrift konstruiert. Diese Schrift-Baseline-Tabelle wird mit der folgenden Prioritätenreihenfolge von Baseline-Tabellennamen gewählt: ideographic, alphabetic, hanging, mathematical. Die Schriftgröße der Baseline-Tabelle wird auf den Wert des font-size SVG-Attributs des Elements oder der CSS font-size, falls gesetzt, geändert.

text-bottom

Die line-under-Kante wird als Baseline verwendet, was normalerweise die untere Kante der Em-Box der Schrift ist.

text-top

Die line-over-Kante wird als Baseline verwendet, was normalerweise die obere Kante der Em-Box der Schrift ist.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	Block-containers, flex containers, grid containers, inline boxes, table rows, and SVG text content elements
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

dominant-baseline = 
  auto          |
  text-bottom   |
  alphabetic    |
  ideographic   |
  middle        |
  central       |
  mathematical  |
  hanging       |
  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">auto</text>
  <text x="0" y="60" fill="red">auto</text>
  <text x="0" y="100" fill="red">auto</text>
  <text x="0" y="140" fill="red">auto</text>
</svg>

css

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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser