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 July 2020.
The dominant-baseline
CSS property specifies the specific baseline 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's dominant-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.
The dominant-baseline
property is used to determine or re-determine a scaled-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 of dominant-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:
The dominant-baseline
property only has an effect on the <text>
, <textPath>
, <tref>
, and <tspan>
SVG elements.
Syntax
/* 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 the
writing-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>
,<tref>
, 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 computed
baseline-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 be
alphabetic
, 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 be
central
. 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 be
hanging
, 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 be
ideographic
, 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 be
mathematical
, 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 be
middle
. 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
-
The line-under edge is used as the baseline, which is usually the bottom edge of the font's em box.
text-top
-
The line-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
Example
<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>
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;
}
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # DominantBaselineProperty |
CSS Inline Layout Module Level 3 # dominant-baseline-property |
Browser compatibility
BCD tables only load in the browser
See also
alignment-baseline
text-anchor
vertical-align
dominant-baseline
SVG attribute