text-anchor

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die text-anchor CSS Eigenschaft richtet eine Box aus, die eine Textzeichenfolge enthält, wobei der Umbruchbereich durch die inline-size Eigenschaft bestimmt wird. Der Text wird dann relativ zum Ankerpunkt des Elements platziert, der durch die Attribute x und y (oder dx und dy) definiert wird. Wenn vorhanden, überschreibt der Wert der CSS-Eigenschaft jeden Wert des text-anchor Attributs des Elements.

Jedes einzelne Textfragment innerhalb eines Elements wird unabhängig ausgerichtet; ein mehrzeiliges <text> Element wird daher so ausgerichtet, dass jede Textzeile dem Wert der text-anchor Eigenschaft entspricht. text-anchor Werte wirken sich nur auf die <text>, <textPath> und <tspan> SVG-Elemente aus. text-anchor gilt nicht für automatisch umbrochenen Text; dafür siehe text-align.

Syntax

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

Werte

start

Richtet den Text so aus, dass der Inline-Anfang der Textzeichenfolge mit dem Ankerpunkt übereinstimmt. Diese Ausrichtung ist relativ zur Schreibrichtung des Textes; beispielsweise bei rechts-nach-links und oben-nach-unten Schreibweise wird der Text links vom Ankerpunkt platziert. Wenn die Inline-Richtung des Textes vertikal ist, wie bei vielen asiatischen Sprachen, wird die obere Kante des Textes mit dem Ankerpunkt ausgerichtet.

middle

Richtet den Text so aus, dass die Mitte des Inline-Box der Textzeichenfolge mit dem Ankerpunkt übereinstimmt.

end

Richtet den Text so aus, dass das Inline-Ende der Textzeichenfolge mit dem Ankerpunkt übereinstimmt. Diese Ausrichtung ist relativ zur Schreibrichtung des Textes; beispielsweise bei rechts-nach-links und oben-nach-unten Schreibweise wird der Text rechts vom Ankerpunkt platziert. Wenn die Inline-Richtung des Textes vertikal ist, wie bei vielen asiatischen Sprachen, wird die untere Kante des Textes mit dem Ankerpunkt ausgerichtet.

Formale Definition

Anfangswertstart
Anwendbar auf<text>, <textPath>, and <tspan> elements in <svg>
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

text-anchor = 
  start   |
  middle  |
  end

Beispiel

Drei <text> Elemente haben die gleiche x Position, aber unterschiedliche Werte für text-anchor. Eine gestrichelte rote Linie markiert die x-Achsenposition aller drei Ankerpunkte.

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# TextAnchorProperty

Browser-Kompatibilität

Siehe auch