baseline-shift

Limited availability

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

Die baseline-shift CSS Eigenschaft positioniert die Dominant-Baseline eines Textelements relativ zur Dominant-Baseline des übergeordneten Textelementinhalts neu. Das verschobene Element kann ein Sub- oder Superskript sein. Ist die Eigenschaft vorhanden, ü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 Dominant-Baseline wird auf die Standardposition für tiefgestellte Zeichen verschoben.
super: Die Dominant-Baseline wird auf die Standardposition für hochgestellte Zeichen verschoben.
<length-percentage>: Hebt (wenn positiv) oder senkt (wenn negativ) die Dominant-Baseline des Textelementinhalts um die angegebene Länge oder den Prozentsatz, wobei der Prozentsatz relativ zur Dominant-Baseline des übergeordneten Textelementinhalts 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

Nutzung von Schlüsselwortwerten

Dieses Beispiel zeigt die grundlegende Verwendung der Schlüsselwortwerte sub und super der baseline-shift Eigenschaft sowie wie die baseline-shift CSS-Eigenschaft die baseline-shift SVG-Attributwerte überschreibt.

HTML

Wir definieren ein SVG mit zwei SVG <text> Elementen, die jeweils ein <tspan> Element enthalten, auf 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; aus Gründen der Übersichtlichkeit haben wir nur eine Kopie gezeigt.

CSS

Wir gestalten 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 baseline-shift Eigenschaftswert auf sub auf dem <tspan> Element des zweiten SVGs und super auf dem <tspan> Element des dritten SVGs. 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;
    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

Specification
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

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

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