CSS dominant-baseline Property

Description

The dominant-baseline property is used to determine or re-determine a scaled-baseline-table.

Initial value
auto
Applies to
Inline level elements
Inherited
No
Media
Visual
Computed value
Specified value
Animatable
No
CSS Version
CSS3
JavaScript syntax
object.style.dominantBaseline

Syntax

Formal syntax: auto | use-script | no-change | reset-size | alphabetic | hanging | ideographic | mathematical | central | middle | text-after-edge | text-before-edge

dominant-baseline: [value];

Values

  • autoIf this property occurs on a block or inline-block element, then the user agent behavior depends on the value of the 'script' property. If the value of the script property is 'auto', the 'auto' value is equivalent to 'alphabetic' for horizontal 'writing-mode' values and 'central' for vertical 'writing-mode' values. If the value of the script property is other than 'auto', the 'auto' value is equivalent to 'use-script'
  • use-scriptThe dominant baseline-identifier is set using the computed value of the 'script' property. The 'writing-mode' value, whether horizontal or vertical is used to select the baseline-table that correspond to that baseline-identifier.
  • no-changeThe dominant baseline-identifier, the baseline-table and the baseline-table font-size remain the same as that of the parent.
  • reset-sizeThe dominant baseline-identifier and the baseline table remain the same, but the baseline-table font-size is changed to the value of the 'font-size' property on this element. This re-scales the baseline table for the current 'font-size'.
  • alphabeticThe dominant baseline-identifier is set to the 'alphabetic' baseline.
  • hangingThe dominant baseline-identifier is set to the 'hanging' baseline.
  • ideographicThe dominant baseline-identifier is set to the 'ideographic' baseline.
  • mathematicalThe dominant baseline-identifier is set to the 'mathematical' baseline.
  • centralThe dominant baseline-identifier is set to be 'central'. The derived baseline-table is constructed from the defined baselines in a baseline-table in the nominal font.
  • middleThe dominant baseline-identifier is set to be 'middle'. The derived baseline-table is constructed from the defined baselines in a baseline-table in the nominal font.
  • text-after-edgeThe dominant baseline-identifier is set to be 'text-after-edge'. The derived baseline-table is constructed from the defined baselines in a baseline-table in the nominal font.
  • text-before-edgeThe dominant baseline-identifier is set to be 'text-before-edge'. The derived baseline-table is constructed from the defined baselines in a baseline-table in the nominal font.

That font baseline-table is chosen using the following priority order of baseline-table names: 'alphabetic', 'ideographic', 'hanging' and 'mathematical'. The baseline-table is changed to the value of the 'font-size' property on this element.

Example

.class {
   dominant-baseline: central; 
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????