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:

  1. ein Baseline-Identifikator für die dominante Baseline,
  2. eine Baseline-Tabelle, und
  3. 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

Anfangswertauto
Anwendbar aufBlock-containers, flex containers, grid containers, inline boxes, table rows, and SVG text content elements
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
dominant-baseline
alphabetic
auto
central
hanging
ideographic
mathematical
middle

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch