baseline-shift CSS property

The baseline-shift CSS property repositions the dominant-baseline of a text element relative to the dominant-baseline of its parent text content element. The shifted element might be a sub- or superscript. If the property is present, the value overrides the element's baseline-shift attribute.

Note: The baseline-shift property only applies to <textPath> and <tspan> elements nested in an <svg>. It doesn't apply to other SVG, HTML, or pseudo-elements.

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;

Values

sub

The dominant-baseline is shifted to the default position for subscripts.

super

The dominant-baseline is shifted to the default position for superscripts.

<length-percentage>

Raises (if positive) or lowers (if negative) the dominant-baseline of the text content element by the specified length or percentage, with the percentage being relative to the dominant-baseline of the parent text content element's line-height.

Formal definition

Initial value0
Applies toinline-level boxes and SVG text content elements
Inheritedno
Percentagesrefer to the used value of line-height
Computed valuethe specified keyword or a computedvalue
Animation typeby computed value type

Formal syntax

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

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

Examples

undefined

Using keyword values

This example demonstrates the basic usage of the sub and super keyword values of the baseline-shift property, as well as how the baseline-shift CSS property takes precedence over the baseline-shift SVG attribute.

HTML

We define an SVG with two SVG <text> elements, each containing a <tspan> element with the SVG baseline-shift attribute set on it.

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>

The SVG is repeated three times; we've only shown one copy for the sake of brevity.

CSS

We make the text in all three SVG images large and cursive, adding some color to differentiate the content within the <tspan> elements.

We set the baseline-shift property value to sub on the second SVG's <tspan> element and super on the third SVG's <tspan> element. The first SVG has no additional CSS applied to it.

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;
}

Results

The SVG baseline-shift attribute values are used in the first SVG. In the second and third SVGs, the CSS baseline-shift values override the attribute values.

Specifications

See also