alignment-baseline

Limited availability

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

Das alignment-baseline-Attribut bestimmt, wie ein Objekt in Bezug auf sein übergeordnetes Element ausgerichtet wird. Diese Eigenschaft legt fest, welche Grundlinie dieses Elements mit der entsprechenden Grundlinie des übergeordneten Elements ausgerichtet werden soll. Beispielsweise ermöglicht dies, dass alphabetische Grundlinien in römischem Text über Schriftgrößenänderungen hinweg ausgerichtet bleiben. Standardmäßig wird die Grundlinie mit demselben Namen wie der berechnete Wert der alignment-baseline-Eigenschaft verwendet.

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

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

Verwendungshinweise

Wert	`auto` \| `baseline` \| `before-edge` \| `text-before-edge` \| `middle` \| `central` \| `after-edge` \| `text-after-edge` \| `ideographic` \| `alphabetic` \| `hanging` \| `mathematical` \| `top` \| `center` \| `bottom`
Standardwert	`auto`
Animierbar	Ja

auto Veraltet: Der Wert ist die "dominant-baseline" des Skripts, zu dem das Zeichen gehört - d.h. verwenden Sie die "dominant-baseline" des Elternteils.
baseline: Verwendet die dominant-baseline-Auswahl des Elternteils. Passt die entsprechende Grundlinie des Rahmens an die seines Elternteils an.
before-edge Veraltet: Der Ausrichtungspunkt des ausgerichteten Objekts wird mit der "before-edge"-Grundlinie des übergeordneten Textelementinhalts ausgerichtet.
text-bottom: Passt den unteren Teil des Rahmens an den oberen Teil des Inhaltsbereichs des Elternteils an.
text-before-edge: Der Ausrichtungspunkt des ausgerichteten Objekts wird mit der "text-before-edge"-Grundlinie des übergeordneten Textelementinhalts ausgerichtet.

Hinweis: Dieses Schlüsselwort kann auf text-top abgebildet werden.
middle: Richtet den vertikalen Mittelpunkt des Rahmens mit der Grundlinie des übergeordneten Rahmens plus der Hälfte der x-Höhe des Elternteils aus.
central: Passt die zentrale Grundlinie des Rahmens an die zentrale Grundlinie seines Elternteils an.
after-edge Veraltet: Der Ausrichtungspunkt des ausgerichteten Objekts wird mit der "after-edge"-Grundlinie des übergeordneten Textelementinhalts ausgerichtet.
text-top: Passt den oberen Teil des Rahmens an den oberen Teil des Inhaltsbereichs des Elternteils an.
text-after-edge: Der Ausrichtungspunkt des ausgerichteten Objekts wird mit der "text-after-edge"-Grundlinie des übergeordneten Textelementinhalts ausgerichtet.

Hinweis: Dieses Schlüsselwort kann auf text-bottom abgebildet werden.
ideographic: Passt die ideografische Zeichen-Gesichtsgrundlinie des Rahmens an die seines Elternteils an.
alphabetic: Passt die alphabetische Grundlinie des Rahmens an die seines Elternteils an.
hanging: Der Ausrichtungspunkt des ausgerichteten Objekts wird mit der "hängenden" Grundlinie des übergeordneten Textelementinhalts ausgerichtet.
mathematical: Passt die mathematische Grundlinie des Rahmens an die seines Elternteils an.
top: Richtet den oberen Teil des ausgerichteten Teilbaums mit dem oberen Teil des Linienrahmens aus.
center: Richtet den Mittelpunkt des ausgerichteten Teilbaums mit dem Mittelpunkt des Linienrahmens aus.
bottom: Richtet den unteren Teil des ausgerichteten Teilbaums mit dem unteren Teil des Linienrahmens aus.

SVG 2 führt einige Änderungen in der Definition dieser Eigenschaft ein. Insbesondere wurden die Werte auto, before-edge und after-edge entfernt. Aus Gründen der Rückwärtskompatibilität kann text-before-edge auf text-top und text-after-edge auf text-bottom abgebildet werden. Weder text-before-edge noch text-after-edge sollten mit der vertical-align-Eigenschaft verwendet werden.

Beispiel

html

<svg
  width="300"
  height="120"
  viewBox="0 0 300 120"
  xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization of anchors -->
  <path
    d="M60,10 L60,110
              M30,10 L300,10
              M30,65 L300,65
              M30,110 L300,110
              "
    stroke="grey" />

  <!-- Anchors in action -->
  <text alignment-baseline="hanging" x="60" y="10">A hanging</text>

  <text alignment-baseline="middle" x="60" y="65">A middle</text>

  <text alignment-baseline="baseline" x="60" y="110">A baseline</text>

  <!-- Materialization of anchors -->
  <circle cx="60" cy="10" r="3" fill="red" />
  <circle cx="60" cy="65" r="3" fill="red" />
  <circle cx="60" cy="110" r="3" fill="red" />

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

Für die Objektausrichtung in anderen Elementen (wie <text>) siehe dominant-baseline.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

CSS alignment-baseline-Eigenschaft
CSS Grundlinienaussrichtung

Help improve MDN

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

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