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 umschließende Bereich durch die inline-size Eigenschaft bestimmt wird. Der Text wird dann relativ zum Ankerpunkt des Elements platziert, der über die x und y (oder dx und dy) Attribute 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; daher wird bei einem mehrzeiligen <text>-Element jede Textzeile entsprechend dem Wert von text-anchor ausgerichtet. text-anchor-Werte haben nur eine Wirkung auf die <text>, <textPath>, <tref> und <tspan> SVG-Elemente. text-anchor gilt nicht für automatisch umbrochenen Text; hierzu 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-Start der Textzeichenfolge mit dem Ankerpunkt übereinstimmt. Diese Ausrichtung ist relativ zur Schreibrichtung des Textes; so wird bei einer Schreibrichtung von rechts nach links, von oben nach unten, 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 das Zentrum (Mitte) des Inline-Kastens 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; so wird bei einer Schreibrichtung von rechts nach links, von oben nach unten, 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 ist enthalten, um die x-Achsenposition aller drei Ankerpunkte zu markieren.

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch