dominant-baseline

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Thedominant-baselineCSS property specifies the specificbaseline used to align the box's text and inline-level contents. It also indicates the default alignment baseline of any boxes participating in baseline alignment in the box's alignment context. If present, it overrides the shape'sdominant-baseline attribute.

Baselines are selected from the font baseline table. If there is no baseline table in the nominal font, or if the baseline table lacks an entry for the desired baseline, then the browser may use heuristics to determine the position of the desired baseline.

Thedominant-baseline property is used to determine or re-determine ascaled-baseline-table. A scaled-baseline-table is a compound value with three components:

a baseline-identifier for the dominant-baseline,
a baseline-table, and
a baseline-table font-size.

Some values ofdominant-baseline re-determine all three values. Others only re-establish the baseline-table font-size. When the initial value,auto, would give an undesired result, this property can be used to explicitly set the desired scaled-baseline-table.

Note:Thedominant-baseline property only has an effect on the<text>,<textPath>, and<tspan> SVG elements.

Syntax

css

/* Initial value */dominant-baseline: auto;/* Keyword values */dominant-baseline: alphabetic;dominant-baseline: central;dominant-baseline: hanging;dominant-baseline: ideographic;dominant-baseline: mathematical;dominant-baseline: middle;dominant-baseline: text-bottom;dominant-baseline: text-top;/* Global values */dominant-baseline: inherit;dominant-baseline: initial;dominant-baseline: revert;dominant-baseline: revert-layer;dominant-baseline: unset;

Values

auto

If this property is applied to a<text> element, then the computed value depends on the value of thewriting-mode attribute.

If thewriting-mode is horizontal, then the value of the dominant-baseline component isalphabetic. Otherwise, if thewriting-mode is vertical, then the value of the dominant-baseline component iscentral.

If this property is applied to a<tspan>, or<textPath> element, then the dominant-baseline and the baseline-table components remain the same as those of the parent text content element.

If the computedbaseline-shift value actually shifts the baseline, then the baseline-table font-size component is set to the value of thefont-size attribute on the element on which thedominant-baseline attribute occurs, otherwise the baseline-table font-size remains the same as that of the element.

If there is no parent text content element, the scaled-baseline-table value is constructed as for<text> elements.

alphabetic

The baseline-identifier for the dominant-baseline is set to bealphabetic, the derived baseline-table is constructed using thealphabetic baseline-table in the font, and the baseline-table font-size is changed to the value of the element'sfont-size SVG attribute or the CSSfont-size, if set.

central

The baseline-identifier for the dominant-baseline is set to becentral. The derived baseline-table is constructed from the defined baselines in the font's baseline-table. That font baseline-table is chosen using the following priority order of baseline-table names:ideographic,alphabetic,hanging,mathematical. The baseline-table font-size is changed to the value of the element'sfont-size SVG attribute or the CSSfont-size, if set.

hanging

The baseline-identifier for the dominant-baseline is set to behanging, the derived baseline-table is constructed using thehanging baseline-table in the font, and the baseline-table font-size is changed to the value of thefont-size SVG attribute offont-size CSS property on this element.

ideographic

The baseline-identifier for the dominant-baseline is set to beideographic, the derived baseline-table is constructed using theideographic baseline-table in the font, and the baseline-table font-size is changed to the value of the value of the element'sfont-size SVG attribute or the CSSfont-size, if set.

mathematical

The baseline-identifier for the dominant-baseline is set to bemathematical, the derived baseline-table is constructed using themathematical baseline-table in the font, and the baseline-table font-size is changed to the value of the value of the element'sfont-size SVG attribute or the CSSfont-size, if set.

middle

The baseline-identifier for the dominant-baseline is set to bemiddle. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. That font baseline-table is chosen using the following priority order of baseline-table names:ideographic,alphabetic,hanging,mathematical. The baseline-table font-size is changed to the value of the element'sfont-size SVG attribute or the CSSfont-size, if set.

text-bottom

Theline-under edge is used as the baseline, which is usually the bottom edge of the font's em box.

text-top

Theline-over edge is used as the baseline, which is usually the top edge of the font's em box.

Formal definition

Initial value	`auto`
Applies to	Block-containers, flex containers, grid containers, inline boxes, table rows, and SVG text content elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

dominant-baseline =
auto|
text-bottom|
alphabetic|
ideographic|
middle|
central|
mathematical|
hanging|
text-top

Example

html

<svg viewBox="0 0 450 160" width="700" height="200">  <text x="50" y="20">alphabetic</text>  <text x="50" y="60">central</text>  <text x="50" y="100">hanging</text>  <text x="50" y="140">ideographic</text>  <text x="250" y="20">mathematical</text>  <text x="250" y="60">middle</text>  <text x="250" y="100">text-bottom</text>  <text x="250" y="140">text-top</text>  <path    d="M   0,20 l 400,0       m -400,40 l 400,0       m -400,40 l 400,0       m -400,40 l 400,0"    stroke="grey" />  <text x="0" y="20" fill="red">auto</text>  <text x="0" y="60" fill="red">auto</text>  <text x="0" y="100" fill="red">auto</text>  <text x="0" y="140" fill="red">auto</text></svg>

css

text {  font-size: 20px;}text:nth-of-type(1) {  dominant-baseline: alphabetic;}text:nth-of-type(2) {  dominant-baseline: central;}text:nth-of-type(3) {  dominant-baseline: hanging;}text:nth-of-type(4) {  dominant-baseline: ideographic;}text:nth-of-type(5) {  dominant-baseline: mathematical;}text:nth-of-type(6) {  dominant-baseline: middle;}text:nth-of-type(7) {  dominant-baseline: text-bottom;}text:nth-of-type(8) {  dominant-baseline: text-top;}