`baseline-shift` CSS property

Baseline 2026

Neu verfügbar

Seit March 2026 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die baseline-shift CSS-Eigenschaft verschiebt die dominante Basislinie eines Textelements relativ zur dominanten Basislinie seines übergeordneten Textinhalts-Elements. Das verschobene Element könnte ein Tief- oder Hochgestellt sein. Wenn die Eigenschaft vorhanden ist, überschreibt der Wert das baseline-shift-Attribut des Elements.

Hinweis: Die baseline-shift-Eigenschaft gilt nur für <textPath>- und <tspan>-Elemente, die in einem <svg> verschachtelt sind. Sie gilt nicht für andere SVG-, HTML- oder Pseudo-Elemente.

Syntax

css

/* <length-percentage> values */
baseline-shift: -0.5px;
baseline-shift: 4%;

/* keyword values */
baseline-shift: sub;
baseline-shift: super;

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

Werte

sub: Die dominante Basislinie wird auf die Standardposition für Tiefgestellte verschoben.
super: Die dominante Basislinie wird auf die Standardposition für Hochgestellte verschoben.
<length-percentage>: Hebt (wenn positiv) oder senkt (wenn negativ) die dominante Basislinie des Textinhalts-Elements um die angegebene Länge oder den Prozentsatz an, wobei der Prozentsatz relativ zur dominanten Basislinie des übergeordneten Textinhalts-Elements line-height ist.

Formale Definition

Anfangswert	`0`
Anwendbar auf	inline-level boxes and SVG text content elements
Vererbt	Nein
Prozentwerte	refer to the used value of `line-height`
Berechneter Wert	the specified keyword or a computed value
Animationstyp	by computed value type

Formale Syntax

baseline-shift = 
  <length-percentage>  |
  sub                  |
  super                |
  top                  |
  center               |
  bottom               

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Verwendung von Schlüsselwortwerten

Dieses Beispiel demonstriert die grundlegende Verwendung der sub- und super-Schlüsselwortwerte der baseline-shift-Eigenschaft sowie, wie die baseline-shift-CSS-Eigenschaft den Vorrang vor dem baseline-shift-SVG-Attribut hat.

HTML

Wir definieren ein SVG mit zwei SVG-<text>-Elementen, die jeweils ein <tspan>-Element enthalten, bei dem das SVG-baseline-shift-Attribut gesetzt ist.

<p>Original SVG</p>

html

<svg viewBox="0 0 500 120" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="50">
    Ceci
    <tspan baseline-shift="super">n'est pas</tspan>
    une pipe super!
  </text>
  <text x="10" y="90">
    Ceci
    <tspan baseline-shift="sub">n'est pas</tspan>
    une pipe sub!
  </text>
</svg>

<p><code>baseline-shift: sub;</code></p>
<svg viewBox="0 0 500 120" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="50">
    Ceci
    <tspan baseline-shift="super">n'est pas</tspan>
    une pipe super!
  </text>
  <text x="10" y="90">
    Ceci
    <tspan baseline-shift="sub">n'est pas</tspan>
    une pipe sub!
  </text>
</svg>
<p><code>baseline-shift: super;</code></p>
<svg viewBox="0 0 500 120" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="50">
    Ceci
    <tspan baseline-shift="super">n'est pas</tspan>
    une pipe super!
  </text>
  <text x="10" y="90">
    Ceci
    <tspan baseline-shift="sub">n'est pas</tspan>
    une pipe sub!
  </text>
</svg>

Das SVG wird dreimal wiederholt; wir haben nur eine Kopie der Kürze halber gezeigt.

CSS

Wir machen den Text in allen drei SVG-Bildern groß und kursiv und fügen etwas Farbe hinzu, um den Inhalt innerhalb der <tspan>-Elemente zu unterscheiden.

Wir setzen den Wert der baseline-shift-Eigenschaft auf sub im zweiten SVG-<tspan>-Element und super im dritten SVG-<tspan>-Element. Auf das erste SVG wird kein zusätzliches CSS angewendet.

css

text {
  font-family: cursive;
  font-size: 2rem;
}
[baseline-shift="sub"] {
  fill: deeppink;
}
[baseline-shift="super"] {
  fill: rebeccapurple;
}

svg:nth-of-type(2) tspan {
  baseline-shift: sub;
}
svg:nth-of-type(3) tspan {
  baseline-shift: super;
}

svg {
  border: 1px solid;
  width: 15em;
  margin-bottom: 10px;
}
@supports not (baseline-shift: sub) {
  body::before {
    content: "Your browser doesn't support the `baseline-shift` property.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Ergebnisse

Die baseline-shift-SVG-Attributwerte werden im ersten SVG verwendet. Im zweiten und dritten SVG überschreiben die CSS-baseline-shift-Werte die Attributwerte.

Spezifikationen

Spezifikation
CSS Inline Layout Module Level 3 # baseline-shift-property
Scalable Vector Graphics (SVG) 2 # BaselineShiftProperty

Browser-Kompatibilität

Siehe auch

SVG-baseline-shift-Attribut
Präsentationseigenschaften: baseline-shift, clip-rule, color-interpolation-filters, fill-opacity, fill-rule, fill, marker-end, marker-mid, marker-start, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, und vector-effect

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

baseline-shift CSS property

HTML

CSS

Ergebnisse

Help improve MDN

`baseline-shift` CSS property