baseline-shift
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 79 | 149 | 4 | 18 | 3.2 | |
baseline | 1 | 79 | | 4 | 18 | 3.2 |
sub | 1 | 79 | 149 | 4 | 18 | 3.2 |
super | 1 | 79 | 149 | 4 | 18 | 3.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.superscript {
baseline-shift: super;
}
.custom-shift {
baseline-shift: 5px;
}Live demo
Use cases
-
Refine text rhythm
Use baseline-shift to make long-form reading or dense interface copy easier to scan and understand.
-
Support language nuances
Apply baseline-shift when different writing systems or typographic conventions need more deliberate control.
Cautions
- Test baseline-shift in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Check readability with zoom, narrow screens, and mixed-language content so text remains understandable.