This page is Not Ready

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

baseline-shift

Summary

Obsolete - spec retired, not implemented.

Overview table

Initial value
baseline
Applies to
inline-level elements
Inherited
No
Media
visual
Computed value
see text
Animatable
No

CSS Object Model Property
:

Syntax

  • baseline-shift: <length>
  • baseline-shift: <percentage>
  • baseline-shift: baseline
  • baseline-shift: sub
  • baseline-shift: super

Values

baseline
There is no baseline shift; the dominant baseline remains in its original position.
sub
The dominant baseline is shifted to the default position for subscripts. The offset for this position is determined by the font data for the parent nominal font as adjusted by the dominant baseline-table font-size of the parent element. If there is no applicable font data the User Agent may use heuristic to determine the offset.
super
The dominant baseline is shifted to the default position for superscripts. The offset for this position is determined by the font data for the parent nominal font as adjusted by the dominant baseline-table font-size of the parent element. If there is no applicable font data the User Agent may use heuristic to determine the offset.
<percentage>
The computed value of the property is this percentage multiplied by the computed ‘line-height’ of the parent element. The dominant-baseline is shifted in the shift-direction (positive value) or opposite to the shift-direction (negative value) of the parent area by the computed value. A value of ‘0%’ is equivalent to 'baseline’.
<length>
The dominant-baseline is shifted in the shift-direction (positive value) or opposite to the shift-direction (negative value) of the parent area by the <length> value. A value of ‘0cm’ is equivalent to 'baseline’.

Examples

This property works with HTML inline-level elements.

 I really love Webplatform.docs 

View live example

In this sample, baseline-shift has the value ‘baseline’ which is the initial value, keeping the baseline in its original position.

span {
    baseline-shift: baseline;
}

In this sample, the baseline-shift has the value 'sub’, putting the text in the subscript position.

span {
    baseline-shift: sub;
}

In this sample, the baseline-shift has the value 'super’, putting the text in the superscript position.

span {
    baseline-shift: super;
}

This sample show that it’s possible to use this property with percentage values.

/* Percentage values are composed by a number and the '%' symbol */
/* A value of '0%' is equivalent to 'baseline' */
span {
    baseline-shift: 10%;
}

Also, it’s possible to use length units as values for the ‘baseline-shift’ property, as shown the next sample.

/* Length values are composed by a number and the unit symbol (e. g., 'px', 'em', 'cm', etc) */
span {
    baseline-shift: 2em;
}

Notes

Although it may seem that ‘baseline-shift’ and ‘alignment-adjust’ properties are doing the same thing, there are important differences. For ‘alignment-adjust’ the percentage values refer to the ‘line-height’ of the element being aligned. For 'baseline-shift the percentage values refer to the ‘line-height’ of the parent element. Similarly, it is the ‘sub’ and ‘super’ offsets of the parent that are used to align the shifted baseline rather than the ‘sub’ and ‘super’ offsets of the element being positioned. To ensure a consistent sub- or superscript position, it makes more sense to use the parent as the reference rather than the subscript element which may have a changed “line-height” due to “font-size” changes in the sub- or superscript element. Using the “alignment-adjust” property is more suitable for positioning elements, such as graphics, that have no internal textual structure. Using the “baseline-shift” property is intended for sub- and superscripts where the positioned element may itself be textual. The baseline-shift provides a way to define a specific baseline offset other than the named offsets that are defined relative to the dominant-baseline. In addition, having “baseline-shift” makes it easier for a tool to generate the relevant properties; many formatting programs already have a notion of baseline shift.

Related specifications

CSS3 module: line
Obsoleted (Working Draft)