CSS-свойство `dominant-baseline`

Свойство dominant-baseline CSS задаёт конкретную базовую линию, используемую для выравнивания текста и встроенного содержимого блока. Оно также указывает базовую линию выравнивания по умолчанию для любых блоков, участвующих в выравнивании по базовой линии в контексте выравнивания блока. Если задано, оно переопределяет атрибут dominant-baseline фигуры.

Базовые линии выбираются из таблицы базовых линий шрифта. Если в номинальном шрифте нет таблицы базовых линий или в ней отсутствует запись для требуемой базовой линии, браузер может использовать эвристики, чтобы определить положение требуемой базовой линии.

Свойство dominant-baseline используется для определения или повторного определения таблицы масштабированных базовых линий. Таблица масштабированных базовых линий — это составное значение из трёх компонентов:

1. идентификатора базовой линии для dominant-baseline,
2. таблицы базовых линий и
3. размера шрифта таблицы базовых линий.

Некоторые значения dominant-baseline повторно определяют все три значения. Другие восстанавливают только размер шрифта таблицы базовых линий. Если начальное значение, auto, даёт нежелательный результат, это свойство можно использовать, чтобы явно задать требуемую таблицу масштабированных базовых линий.

Синтаксис

/* 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;

Значения

Это свойство задаётся одним из следующих ключевых слов:

auto

Если это свойство применяется к элементу <text>, вычисленное значение зависит от значения атрибута writing-mode.

Если атрибут writing-mode задаёт горизонтальное направление, значение компонента dominant-baseline равно alphabetic. В противном случае, если атрибут writing-mode задаёт вертикальное направление, значение компонента dominant-baseline равно central.

Если это свойство применяется к элементу <tspan> или <textPath>, компоненты dominant-baseline и baseline-table остаются такими же, как у родительского элемента текстового содержимого.

Если вычисленное значение baseline-shift фактически сдвигает базовую линию, компонент размера шрифта таблицы базовых линий устанавливается в значение атрибута font-size элемента, на котором задан атрибут dominant-baseline; в противном случае размер шрифта таблицы базовых линий остаётся таким же, как у элемента.

Если родительского элемента текстового содержимого нет, значение таблицы масштабированных базовых линий формируется так же, как для элементов <text>.

alphabetic

Идентификатор базовой линии для dominant-baseline устанавливается в alphabetic, производная таблица базовых линий строится с использованием таблицы базовых линий alphabetic в шрифте, а размер шрифта таблицы базовых линий изменяется на значение SVG-атрибута элемента font-size или CSS-свойства font-size, если оно задано.

central

Идентификатор базовой линии для dominant-baseline устанавливается в central. Производная таблица базовых линий строится на основе определённых базовых линий в таблице базовых линий шрифта. Эта таблица базовых линий шрифта выбирается в следующем порядке приоритета имён таблиц базовых линий: ideographic, alphabetic, hanging, mathematical. Размер шрифта таблицы базовых линий изменяется на значение SVG-атрибута элемента font-size или CSS-свойства font-size, если оно задано.

hanging

Идентификатор базовой линии для dominant-baseline устанавливается в hanging, производная таблица базовых линий строится с использованием таблицы базовых линий hanging в шрифте, а размер шрифта таблицы базовых линий изменяется на значение SVG-атрибута элемента font-size или CSS-свойства font-size.

ideographic

Идентификатор базовой линии для dominant-baseline устанавливается в ideographic, производная таблица базовых линий строится с использованием таблицы базовых линий ideographic в шрифте, а размер шрифта таблицы базовых линий изменяется на значение SVG-атрибута элемента font-size или CSS-свойства font-size, если оно задано.

mathematical

Идентификатор базовой линии для dominant-baseline устанавливается в mathematical, производная таблица базовых линий строится с использованием таблицы базовых линий mathematical в шрифте, а размер шрифта таблицы базовых линий изменяется на значение SVG-атрибута элемента font-size или CSS-свойства font-size, если оно задано.

middle

Идентификатор базовой линии для dominant-baseline устанавливается в middle. Производная таблица базовых линий строится на основе определённых базовых линий в таблице базовых линий шрифта. Таблица базовых линий шрифта выбирается в следующем порядке приоритета имён таблиц базовых линий: ideographic, alphabetic, hanging, mathematical. Размер шрифта таблицы базовых линий изменяется на значение SVG-атрибута элемента font-size или CSS-свойства font-size, если оно задано.

text-bottom

В качестве базовой линии используется край line-under, обычно совпадающий с нижним краем em-блока шрифта.

text-top

В качестве базовой линии используется край line-over, обычно совпадающий с верхним краем em-блока шрифта.

Формальное определение

Формальный синтаксис

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

Пример

<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;
}

Спецификации

Совместимость с браузерами

См. также

• alignment-baseline
• text-anchor
• vertical-align
• Атрибут SVG dominant-baseline