text-anchor

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

Каждый фрагмент текста в элементе выравнивается независимо; таким образом, многострочный элемент <text> будет иметь каждую строку текста выровненную в соответствии со значением text-anchor. Значения text-anchor влияют только на элементы SVG <text>, <textPath>, <tref> и <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: Выравнивает текст таким образом, что конец строки текста выравнивается с точкой привязки. Это выравнивание относительно направления записи текста; таким образом, например, при написании справа налево сверху вниз текст будет размещён справа от точки привязки. Если направление текста вертикальное, как во многих азиатских языках, нижний край текста выравнивается с точкой привязки.

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

Начальное значение	`start`
Применимо к	`<text>`, `<textpath>` и `<tspan>` элементы в `svg`
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

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:nth-of-type(1) {
  text-anchor: start;
}
text:nth-of-type(2) {
  text-anchor: middle;
}
text:nth-of-type(3) {
  text-anchor: end;
}

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

Спецификация
Scalable Vector Graphics (SVG) 2 # TextAnchoringProperties

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`text-anchor`	≤80	≤80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

См. также

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

© 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/text-anchor