dominant-baseline

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

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

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

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

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

Примечание: Как атрибут отображения, dominant-baseline может использоваться как свойство CSS. См. dominant-baseline для получения дополнительной информации.

Этот атрибут можно использовать с следующими элементами SVG:

Пример

html

<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
  <path d="M20,20 L180,20 M20,50 L180,50 M20,80 L180,80" stroke="grey" />

  <text dominant-baseline="auto" x="30" y="20">Auto</text>
  <text dominant-baseline="middle" x="30" y="50">Middle</text>
  <text dominant-baseline="hanging" x="30" y="80">Hanging</text>
</svg>

Примечания по использованию

Значение	`auto` \| `text-bottom` \| `alphabetic` \| `ideographic` \| `middle` \| `central` \| `mathematical` \| `hanging` \| `text-top`
Значение по умолчанию	`auto`
Анимируемо	дискретно

auto

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

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

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

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

Если нет родительского элемента текстового содержимого, значение scaled-baseline-table строится, как указано выше, для элементов <text>.

use-script Устаревшее

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

no-change Устаревшее

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

reset-size Устаревшее

Доминирующая базовая линия и таблица базовых линий остаются такими же, но размер шрифта таблицы базовых линий изменяется на значение атрибута font-size в этом элементе. Это перемасштабирует таблицу базовых линий для текущего font-size.

ideographic

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

alphabetic

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

hanging

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

mathematical

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

central

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

middle

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

text-after-edge

Идентификатор базовой линии для доминирующей базовой линии устанавливается в text-after-edge. Выводимая таблица базовых линий строится из определённых базовых линий в таблице базовых линий шрифта. Выбор таблицы базовых линий шрифта зависит от браузера. Размер шрифта таблицы базовых линий изменяется на значение атрибута font-size в этом элементе.

text-before-edge

Идентификатор базовой линии для доминирующей базовой линии устанавливается в text-before-edge. Выводимая таблица базовых линий строится из определённых базовых линий в таблице базовых линий шрифта. Выбор таблицы базовых линий зависит от браузера. Размер шрифта таблицы базовых линий изменяется на значение атрибута font-size в этом элементе.

text-top

Это значение использует верхнюю часть блока em в качестве базовой линии.

SVG

html

<svg
  width="400"
  height="300"
  viewBox="0 0 300 300"
  xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization of anchors -->
  <path
    d="M60,20 L60,270
           M30,20 L400,20
           M30,70 L400,70
           M30,120 L400,120
           M30,170 L400,170
           M30,220 L400,220
           M30,270 L400,270"
    stroke="grey" />

  <!-- Anchors in action -->
  <text dominant-baseline="auto" x="70" y="20">auto</text>
  <text dominant-baseline="middle" x="70" y="70">middle</text>
  <text dominant-baseline="hanging" x="70" y="170">hanging</text>
  <text dominant-baseline="mathematical" x="70" y="220">mathematical</text>
  <text dominant-baseline="text-top" x="70" y="270">text-top</text>

  <!-- Materialization of anchors -->
  <circle cx="60" cy="20" r="3" fill="red" />
  <circle cx="60" cy="70" r="3" fill="red" />
  <circle cx="60" cy="120" r="3" fill="red" />
  <circle cx="60" cy="170" r="3" fill="red" />
  <circle cx="60" cy="220" r="3" fill="red" />
  <circle cx="60" cy="270" r="3" fill="red" />

  <style><![CDATA[
      text {
        font: bold 30px Verdana, Helvetica, Arial, sans-serif;
      }
      ]]></style>
</svg>

Результат

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

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

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`dominant-baseline`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

См. также

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

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