dominant-baseline

Линия базового выравнивания Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2020 года.

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

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

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

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

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

Примечание: Свойство dominant-baseline оказывает влияние только на элементы SVG <text>, <textPath>, <tref> и <tspan>.

Синтаксис

/* 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>, <tref> или <textPath>, значения dominant-baseline и baseline-table остаются такими же, как у родительского элемента текстового содержимого.

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

Если родительского элемента текстового содержимого нет, значение scaled-baseline-table строится так же, как для элементов <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, обычно нижний край рамки шрифта.

text-top

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

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

Начальное значение	`auto`
Применяется к	Блок-контейнеры, гибкие контейнеры, контейнеры сетки, строчные блоки, строки таблиц и элементы SVG текстового содержимого
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

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

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

Спецификация
Scalable Vector Graphics (SVG) 2 # DominantBaselineProperty
CSS Inline Layout Module Level 3 # dominant-baseline-property

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`dominant-baseline`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`alphabetic`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`auto`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`central`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`hanging`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`ideographic`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`mathematical`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`middle`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/dominant-baseline