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 ⁨Juli 2020⁩.

Das dominant-baseline Attribut legt die dominante Grundlinie fest, welche die Grundlinie ist, die verwendet wird, um den Text und den Inline-Inhalt der Box auszurichten. Es gibt auch die Standard-Ausgleichsgrundlinie aller Boxen an, die an der Ausgleichsausrichtung im Ausrichtungskontext der Box teilnehmen.

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

einem Grundlinien-Identifikator für die dominante Grundlinie,
einer Grundlinien-Tabelle und
einer Schriftgröße der Grundlinien-Tabelle.

Einige Werte der Eigenschaft bestimmen alle drei Werte neu; andere stellen nur die Schriftgröße der Grundlinien-Tabelle neu ein. Wenn der Anfangswert, auto, ein unerwünschtes Ergebnis liefert, kann diese Eigenschaft verwendet werden, um die gewünschte skalierte Grundlinien-Tabelle explizit festzulegen.

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

Hinweis: Als Präsentationsattribut hat dominant-baseline auch ein entsprechendes CSS-Attribut: dominant-baseline. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

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

text {
  font:
    bold 14px "Helvetica",
    "Verdana",
    "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>

Verwendungsnotizen

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 dominant-baseline-Komponente alphabetic. Andernfalls, wenn writing-mode vertikal ist, ist der Wert der dominant-baseline-Komponente central.

Wenn diese Eigenschaft auf einem <tspan> oder <textPath>-Element auftritt, bleiben die dominant-baseline und die Grundlinien-Tabelle Komponenten dieselben wie die des übergeordneten Textinhalts-Elements.

Wenn der berechnete baseline-shift-Wert die Grundlinie tatsächlich verschiebt, wird die Schriftgrößen-Komponente der Grundlinien-Tabelle auf den Wert des font-size-Attributs auf dem Element, auf dem das dominant-baseline Attribut vorkommt, gesetzt, andernfalls bleibt die Schriftgrößen-Komponente der Grundlinien-Tabelle dieselbe wie die des Elements.

Wenn es kein übergeordnetes Textinhalts-Element gibt, wird der skalierte Grundlinien-Tabelle-Wert wie oben für <text>-Elemente konstruiert.

use-script Veraltet

Die dominant-baseline und die Grundlinien-Tabelle Komponenten werden festgelegt, indem das vorherrschende Skript des Zeichendatensatzes bestimmt wird. Der writing-mode, ob horizontal oder vertikal, wird verwendet, um die geeignete Menge an Grundlinien-Tabellen auszuwählen und die dominante Grundlinie wird verwendet, um die Grundlinien-Tabelle auszuwählen, die dieser Grundlinie entspricht. Die Schriftgrößen-Komponente der Grundlinien-Tabelle wird auf den Wert des font-size-Attributs auf dem Element, auf dem das dominant-baseline Attribut vorkommt, gesetzt.

no-change Veraltet

Die dominant-baseline, die Grundlinien-Tabelle und die Schriftgrößen-Komponente der Grundlinien-Tabelle bleiben dieselben wie die des übergeordneten Textinhalts-Elements.

reset-size Veraltet

Die dominant-baseline und die Grundlinien-Tabelle bleiben dieselben, aber die Schriftgrößen-Komponente der Grundlinien-Tabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert. Dies skaliert die Grundlinien-Tabelle für die aktuelle font-size neu.

ideographic

Der Grundlinien-Identifikator für die dominant-baseline ist ideographic, die abgeleitete Grundlinien-Tabelle wird mit der ideographic Grundlinien-Tabelle in der Schriftart konstruiert und die Schriftgrößen-Komponente der Grundlinien-Tabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

alphabetic

Der Grundlinien-Identifikator für die dominant-baseline ist alphabetic, die abgeleitete Grundlinien-Tabelle wird mit der alphabetic Grundlinien-Tabelle in der Schriftart konstruiert und die Schriftgrößen-Komponente der Grundlinien-Tabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

hanging

Der Grundlinien-Identifikator für die dominant-baseline ist hanging, die abgeleitete Grundlinien-Tabelle wird mit der hanging Grundlinien-Tabelle in der Schriftart konstruiert und die Schriftgrößen-Komponente der Grundlinien-Tabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

mathematical

Der Grundlinien-Identifikator für die dominant-baseline ist mathematical, die abgeleitete Grundlinien-Tabelle wird mit der mathematical Grundlinien-Tabelle in der Schriftart konstruiert und die Schriftgrößen-Komponente der Grundlinien-Tabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

central

Der Grundlinien-Identifikator für die dominant-baseline ist central. Die abgeleitete Grundlinien-Tabelle wird aus den definierten Grundlinien in einer Grundlinien-Tabelle in der Schriftart konstruiert. Diese Schriftart-Grundlinien-Tabelle wird nach der folgenden Prioritätenreihenfolge der Grundlinien-Tabelen-Namen ausgewählt: ideographic, alphabetic, hanging, mathematical. Die Schriftgrößen-Komponente der Grundlinien-Tabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

middle

Der Grundlinien-Identifikator für die dominant-baseline ist middle. Die abgeleitete Grundlinien-Tabelle wird aus den definierten Grundlinien in einer Grundlinien-Tabelle in der Schriftart konstruiert. Diese Schriftart-Grundlinien-Tabelle wird nach der folgenden Prioritätenreihenfolge der Grundlinien-Tabelen-Namen ausgewählt: alphabetic, ideographic, hanging, mathematical. Die Schriftgrößen-Komponente der Grundlinien-Tabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

text-after-edge

Der Grundlinien-Identifikator für die dominant-baseline ist text-after-edge. Die abgeleitete Grundlinien-Tabelle wird aus den definierten Grundlinien in einer Grundlinien-Tabelle in der Schriftart konstruiert. Die Wahl, welche Schriftart-Grundlinien-Tabelle aus den Grundlinien-Tabellen in der Schriftart verwendet wird, ist browserabhängig. Die Schriftgrößen-Komponente der Grundlinien-Tabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

text-before-edge

Der Grundlinien-Identifikator für die dominant-baseline ist text-before-edge. Die abgeleitete Grundlinien-Tabelle wird aus den definierten Grundlinien in einer Grundlinien-Tabelle in der Schriftart konstruiert. Die Wahl, welche Grundlinien-Tabelle aus den Grundlinien-Tabellen in der Schriftart verwendet wird, ist browserabhängig. Die Schriftgrößen-Komponente der Grundlinien-Tabelle wird auf den Wert des font-size-Attributs auf diesem Element geändert.

text-top

Dieser Wert verwendet den oberen Rand 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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden