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 January 2020.

Das Attribut dominant-baseline gibt die dominierende Grundlinie an, die verwendet wird, um den Text und den Inline-Inhalt eines Rahmens auszurichten. Es zeigt auch die Standardausrichtungsgrundlinie aller Boxen an, die an der Grundlinienausrichtung im Ausrichtungskontext des Rahmens teilnehmen.

Es wird verwendet, um eine skalierte Grundlinientabelle zu bestimmen oder neu zu bestimmen. Eine skalierte Grundlinientabelle ist ein zusammengesetzter Wert mit drei Komponenten:

einem Grundlinien-Identifier für die dominierende Grundlinie,
einer Grundlinientabelle und
einer Grundlinientabellenschriftgröße.

Einige Werte dieser Eigenschaft bestimmen alle drei Werte neu. Andere stellen nur die Schriftgröße der Grundlinientabelle neu ein. Wenn der anfängliche Wert auto ein unerwünschtes Ergebnis liefert, kann diese Eigenschaft verwendet werden, um die gewünschte skalierte Grundlinientabelle explizit festzulegen.

Wenn es keine Grundlinientabelle in der nominalen Schriftart gibt oder wenn die Grundlinientabelle keinen Eintrag für die gewünschte Grundlinie hat, kann der Browser Heuristiken verwenden, um die Position der gewünschten Grundlinie zu bestimmen.

Hinweis: Als Präsentationsattribut hat dominant-baseline auch ein CSS-Eigenschafts-Gegenstück: dominant-baseline. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Beispiel

html,
body,
svg {
  height: 100%;
}

text {
  font:
    bold 14px Verdana,
    Helvetica,
    Arial,
    sans-serif;
}

html

<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
  <path d="M20,20 L180,20 M20,50 L180,50 M20,80 L180,80" stroke="grey" />

  <text dominant-baseline="auto" x="30" y="20">Auto</text>
  <text dominant-baseline="middle" x="30" y="50">Middle</text>
  <text dominant-baseline="hanging" x="30" y="80">Hanging</text>
</svg>

Nutzungshinweise

Wert	`auto` \| `text-bottom` \| `alphabetic` \| `ideographic` \| `middle` \| `central` \| `mathematical` \| `hanging` \| `text-top`
Standardwert	`auto`
Animierbar	diskret

auto

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

Wenn der writing-mode horizontal ist, dann ist der Wert der dominierenden Grundlinienkomponente alphabetic. Andernfalls, wenn der writing-mode vertikal ist, ist der Wert der dominierenden Grundlinienkomponente central.

Wenn diese Eigenschaft auf einem <tspan>, <tref>, oder <textPath>-Element auftritt, bleiben die dominierende Grundlinie und die Grundlinientabellenkomponenten gleich wie die des übergeordneten Textelementinhalts.

Wenn der berechnete baseline-shift-Wert tatsächlich die Grundlinie verschiebt, wird die Schriftgröße der Grundlinientabelle auf den Wert des font-size-Attributs auf dem Element gesetzt, auf dem das dominant-baseline-Attribut auftritt, andernfalls bleibt die Schriftgröße der Grundlinientabelle gleich der des Elements.

Wenn es kein übergeordnetes Textelement gibt, wird der skalierte Grundlinientabellenwert wie oben für <text>-Elemente konstruiert.

use-script Veraltet

Die dominierende Grundlinie und die Grundlinientabellenkomponenten werden bestimmt, indem das vorherrschende Skript des Zeichendateninhalts bestimmt wird. Der writing-mode, ob horizontal oder vertikal, wird verwendet, um den entsprechenden Satz von Grundlinientabellen auszuwählen, und die dominierende Grundlinie wird verwendet, um die Grundlinientabelle auszuwählen, die dieser Grundlinie entspricht. Die Schriftgröße der Grundlinientabelle wird auf den Wert des font-size-Attributs auf dem Element gesetzt, auf dem das dominant-baseline-Attribut auftritt.

no-change Veraltet

Die dominierende Grundlinie, die Grundlinientabelle und die Schriftgröße der Grundlinientabelle bleiben wie die des übergeordneten Textelementinhalts.

reset-size Veraltet

Die dominierende Grundlinie und die Grundlinientabelle bleiben gleich, aber die Schriftgröße der Grundlinientabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert. Dies skaliert die Grundlinientabelle für die aktuelle font-size neu.

ideographic

Der Grundlinien-Identifier für die dominierende Grundlinie wird auf ideographic gesetzt, die abgeleitete Grundlinientabelle wird unter Verwendung der ideographic-Grundlinientabelle in der Schriftart konstruiert, und die Schriftgröße der Grundlinientabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

alphabetic

Der Grundlinien-Identifier für die dominierende Grundlinie wird auf alphabetic gesetzt, die abgeleitete Grundlinientabelle wird unter Verwendung der alphabetic-Grundlinientabelle in der Schriftart konstruiert, und die Schriftgröße der Grundlinientabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

hanging

Der Grundlinien-Identifier für die dominierende Grundlinie wird auf hanging gesetzt, die abgeleitete Grundlinientabelle wird unter Verwendung der hanging-Grundlinientabelle in der Schriftart konstruiert, und die Schriftgröße der Grundlinientabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

mathematical

Der Grundlinien-Identifier für die dominierende Grundlinie wird auf mathematical gesetzt, die abgeleitete Grundlinientabelle wird unter Verwendung der mathematical-Grundlinientabelle in der Schriftart konstruiert, und die Schriftgröße der Grundlinientabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

central

Der Grundlinien-Identifier für die dominierende Grundlinie wird auf central gesetzt. Die abgeleitete Grundlinientabelle wird aus den definierten Grundlinien in einer Grundlinientabelle in der Schriftart konstruiert. Diese Grundlinientabelle wird unter Verwendung der folgenden Prioritätsreihenfolge von Grundlinientabellennamen ausgewählt: ideographic, alphabetic, hanging, mathematical. Die Schriftgröße der Grundlinientabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

middle

Der Grundlinien-Identifier für die dominierende Grundlinie wird auf middle gesetzt. Die abgeleitete Grundlinientabelle wird aus den definierten Grundlinien in einer Grundlinientabelle in der Schriftart konstruiert. Diese Schriftart-Grundlinientabelle wird unter Verwendung der folgenden Prioritätsreihenfolge von Grundlinientabellennamen ausgewählt: alphabetic, ideographic, hanging, mathematical. Die Schriftgröße der Grundlinientabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

text-after-edge

Der Grundlinien-Identifier für die dominierende Grundlinie wird auf text-after-edge gesetzt. Die abgeleitete Grundlinientabelle wird aus den definierten Grundlinien in einer Grundlinientabelle in der Schriftart konstruiert. Die Auswahl, welche Schriftart-Grundlinientabelle aus den Grundlinientabellen in der Schriftart verwendet wird, hängt vom Browser ab. Die Schriftgröße der Grundlinientabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

text-before-edge

Der Grundlinien-Identifier für die dominierende Grundlinie wird auf text-before-edge gesetzt. Die abgeleitete Grundlinientabelle wird aus den definierten Grundlinien in einer Grundlinientabelle in der Schriftart konstruiert. Die Auswahl, welche Grundlinientabelle aus den Grundlinientabellen in der Schriftart verwendet wird, hängt vom Browser ab. Die Schriftgröße der Grundlinientabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

text-top

Dieser Wert verwendet die Oberseite der Em-Box als Grundlinie.

SVG

html

<svg
  width="400"
  height="300"
  viewBox="0 0 300 300"
  xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization of anchors -->
  <path
    d="M60,20 L60,270
           M30,20 L400,20
           M30,70 L400,70
           M30,120 L400,120
           M30,170 L400,170
           M30,220 L400,220
           M30,270 L400,270"
    stroke="grey" />

  <!-- Anchors in action -->
  <text dominant-baseline="auto" x="70" y="20">auto</text>
  <text dominant-baseline="middle" x="70" y="70">middle</text>
  <text dominant-baseline="hanging" x="70" y="170">hanging</text>
  <text dominant-baseline="mathematical" x="70" y="220">mathematical</text>
  <text dominant-baseline="text-top" x="70" y="270">text-top</text>

  <!-- Materialization of anchors -->
  <circle cx="60" cy="20" r="3" fill="red" />
  <circle cx="60" cy="70" r="3" fill="red" />
  <circle cx="60" cy="120" r="3" fill="red" />
  <circle cx="60" cy="170" r="3" fill="red" />
  <circle cx="60" cy="220" r="3" fill="red" />
  <circle cx="60" cy="270" r="3" fill="red" />

  <style>
    <![CDATA[
      text {
        font: bold 30px Verdana, Helvetica, Arial, sans-serif;
      }
      ]]>
  </style>
</svg>

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

CSS dominant-baseline Eigenschaft