`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 positioniert die dominante Grundlinie (dominant-baseline) eines Textelements relativ zur dominanten Grundlinie seines übergeordneten Textelementinhalts. Das verschobene Element könnte ein Tief- oder Hochgestelltzeichen 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 Grundlinie wird auf die Standardposition für Tiefgestelltzeichen verschoben.
super: Die dominante Grundlinie wird auf die Standardposition für Hochgestelltzeichen verschoben.
<length-percentage>: Hebt (wenn positiv) oder senkt (wenn negativ) die dominante Grundlinie des Textelementinhalts um die angegebene Länge oder den Prozentsatz an, wobei der Prozentsatz relativ zur dominanten Grundlinie des übergeordneten Textelementinhalts ist line-height.

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 gegenüber dem baseline-shift SVG-Attribut den Vorrang hat.

HTML

Wir definieren ein SVG mit zwei SVG <text> Elementen, von denen jedes ein <tspan>-Element mit dem SVG baseline-shift-Attribut enthält.

<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 zur Kürze gezeigt.

CSS

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

Wir setzen den Wert der Eigenschaft baseline-shift auf sub bei dem <tspan>-Element des zweiten SVGs und auf super bei dem <tspan>-Element des dritten SVGs. Das erste SVG hat keine zusätzliche 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;
    width: 100%;
    text-align: center;
    padding: 0.5em;
  }
}

Ergebnisse

Die SVG baseline-shift Attributwerte werden im ersten SVG verwendet. In den zweiten und dritten SVGs ü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
Darstellungseigenschaften: 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