dominant-baseline

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

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

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

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

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

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

• <text>
• <textPath>
• <tspan>

Пример

<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>, вычисленное значение зависит от значения атрибута writing-mode.

Если writing-mode — горизонтальный, значение компонента доминирующей базовой линии равно alphabetic. Если же writing-mode — вертикальный, значение компонента доминирующей базовой линии равно central.

Если это свойство задано для элемента <tspan> или <textPath>, компоненты доминирующей базовой линии и таблицы базовых линий остаются такими же, как у родительского элемента текстового содержимого.

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

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

use-script Устарело

Компоненты доминирующей базовой линии и таблицы базовых линий задаются на основе определения преобладающей письменности в символьных данных содержимого. Атрибут 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

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

Результат

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

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

См. также

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