`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.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

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