Свойство CSS `alignment-baseline`

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

В контексте форматирования строки фрагменты блоков строчного уровня и глифы используют общий контекст выравнивания, заданный родительским фрагментом строчного блока вдоль его строчной оси. При компоновке SVG-текста эти значения задают базовую линию, которая выравнивается с текущей позицией текста SVG.

Синтаксис

/* Initial value */
alignment-baseline: baseline;

/* Keyword values */
alignment-baseline: alphabetic;
alignment-baseline: central;
alignment-baseline: ideographic;
alignment-baseline: mathematical;
alignment-baseline: middle;
alignment-baseline: text-bottom;
alignment-baseline: text-top;

/* Mapped values */
alignment-baseline: text-before-edge; /* text-top */
alignment-baseline: text-after-edge; /* text-bottom */

/* Deprecated values  */
alignment-baseline: auto;
alignment-baseline: before-edge;
alignment-baseline: after-edge;
alignment-baseline: hanging;

/* Global values */
alignment-baseline: inherit;
alignment-baseline: initial;
alignment-baseline: revert;
alignment-baseline: revert-layer;
alignment-baseline: unset;

Значения

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

baseline

Используется значение dominant-baseline родительского элемента.

alphabetic

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

central

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

ideographic

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

mathematical

Выравнивает математическую базовую линию блока с базовой линией родительского элемента, соответствующей центральной базовой линии, вокруг которой проектируются математические символы.

middle

Выравнивает вертикальную середину блока с базовой линией родительского блока, смещённой на половину высоты строчной буквы родительского элемента. Используются средние базовые линии по оси x; однако при text-orientation: upright; (когда алфавитная базовая линия и базовая линия высоты строчной буквы практически не имеют смысла) вместо них используется базовая линия central.

text-bottom

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

text-top

Выравнивает верхний край блока с верхним краем области содержимого родительского элемента — верхним краем области содержимого строчного элемента.

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

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

alignment-baseline = 
  baseline |
  alphabetic |
  ideographic |
  middle |
  central |
  mathematical |
  text-before-edge |
  text-after-edge

Пример

<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">baseline</text>
  <text x="0" y="60" fill="red">baseline</text>
  <text x="0" y="100" fill="red">baseline</text>
  <text x="0" y="140" fill="red">baseline</text>
</svg>

text {
  font-size: 20px;
  alignment-baseline: baseline;
}
text:nth-of-type(1) {
  alignment-baseline: alphabetic;
}
text:nth-of-type(2) {
  alignment-baseline: central;
}
text:nth-of-type(3) {
  alignment-baseline: hanging;
}
text:nth-of-type(4) {
  alignment-baseline: ideographic;
}
text:nth-of-type(5) {
  alignment-baseline: mathematical;
}
text:nth-of-type(6) {
  alignment-baseline: middle;
}
text:nth-of-type(7) {
  alignment-baseline: text-bottom;
}
text:nth-of-type(8) {
  alignment-baseline: text-top;
}

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

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

См. также

• dominant-baseline
• Атрибут alignment-baseline SVG
• Модуль встроенной компоновки CSS
• Модуль выравнивания блоков CSS