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 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 dominant-baseline wird auf die Standardposition für Tiefstellungen verschoben.
super: Die dominant-baseline wird auf die Standardposition für Hochstellungen verschoben.
<length-percentage>: Erhöht (wenn positiv) oder verringert (wenn negativ) die dominant-baseline des Textelementinhalts um die angegebene Länge oder Prozentsatz, wobei der Prozentsatz relativ zur dominant-baseline der Line-Höhe des übergeordneten Textelementinhalts 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 zeigt die grundlegende Verwendung der sub- und super-Schlüsselwortwerte der baseline-shift-Eigenschaft sowie wie die baseline-shift-CSS-Eigenschaft Vorrang vor dem baseline-shift-SVG-Attribut hat.

HTML

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

<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 aus Gründen der Kürze nur eine Kopie 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 baseline-shift-Eigenschaftswert auf sub auf dem <tspan>-Element des zweiten SVG und super auf dem <tspan>-Element des dritten SVG. 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. Im zweiten und dritten SVG ü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