Свойство CSS `text-anchor`

Свойство text-anchor CSS выравнивает блок, содержащий строку текста, область переноса которой определяется свойством inline-size, а затем размещает текст относительно опорной точки элемента, определённой с помощью атрибутов x и y (или dx и dy). Если свойство CSS задано, его значение переопределяет любое значение атрибута элемента text-anchor.

Каждый отдельный фрагмент текста внутри элемента выравнивается независимо; поэтому для многострочного элемента <text> каждая строка текста будет выровнена в соответствии со значением text-anchor. Значения text-anchor влияют только на элементы SVG <text>, <textPath> и <tspan>. Свойство text-anchor не применяется к автоматически перенесённому тексту; для этого используйте свойство text-align.

Синтаксис

text-anchor: start;
text-anchor: middle;
text-anchor: end;

/* Global values */
text-anchor: inherit;
text-anchor: initial;
text-anchor: revert;
text-anchor: revert-layer;
text-anchor: unset;

Значения

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

start

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

middle

Выравнивает текст так, чтобы центр (середина) строчного блока текстовой строки совпадал с опорной точкой.

end

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

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

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

text-anchor = 
  start |
  middle |
  end

Пример

Три элемента <text> имеют одинаковое положение x, но разные значения text-anchor. Пунктирная красная линия отмечает положение оси x для всех трёх опорных точек.

<svg
  viewBox="0 0 200 150"
  height="150"
  width="200"
  xmlns="http://www.w3.org/2000/svg">
  <line
    x1="100"
    y1="0"
    x2="100"
    y2="150"
    stroke="red"
    stroke-dasharray="10,5" />
  <text x="100" y="40">Anchored</text>
  <text x="100" y="80">Anchored</text>
  <text x="100" y="120">Anchored</text>
</svg>

text {
  font-size: 24px;
}

text:nth-of-type(1) {
  text-anchor: start;
}
text:nth-of-type(2) {
  text-anchor: middle;
}
text:nth-of-type(3) {
  text-anchor: end;
}

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

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

См. также

• dominant-baseline
• Элемент SVG <text>
• Атрибут SVG text-anchor