direction

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.

Das direction-Attribut legt die inline-basierte Richtung eines <text>- oder <tspan>-Elements fest. Es definiert die Start- und Endpunkte einer Textzeile, wie sie von den Eigenschaften text-anchor und inline-size verwendet werden. Es kann auch die Richtung beeinflussen, in der Zeichen positioniert werden, wenn der Wert der unicode-bidi-Eigenschaft entweder embed oder bidi-override ist.

Es gilt nur für Glyphen, die senkrecht zur inline-basierten Richtung ausgerichtet sind, was den üblichen Fall von horizontal ausgerichtetem lateinischen oder arabischen Text sowie den Fall von schmalen lateinischen oder arabischen Zeichen umfasst, die um 90 Grad im Uhrzeigersinn relativ zu einer von oben nach unten verlaufenden inline-basierten Richtung gedreht sind.

In vielen Fällen liefert der bidirektionale Unicode-Algorithmus automatisch das gewünschte Ergebnis, sodass dieses Attribut in solchen Fällen nicht angegeben werden muss. Für andere Fälle, wie z. B. bei der Verwendung von Recht-zu-Links-Sprachen, kann es ausreichen, das direction-Attribut zum äußersten <svg>-Element hinzuzufügen, sodass diese Richtung an alle Textelemente vererbt wird:

Hinweis: Als Präsentationsattribut hat direction auch ein entsprechendes CSS-Eigenschafts-Pendant: direction. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Beispiel

html
<svg
  viewBox="0 0 600 72"
  xmlns="http://www.w3.org/2000/svg"
  direction="rtl"
  lang="fa">
  <text x="300" y="50" text-anchor="middle" font-size="36">
    داستان SVG 1.1 SE طولا ني است.
  </text>
</svg>

Hinweise zur Verwendung

Wert ltr | rtl
Standardwert ltr
Animierbar Ja

Spezifikationen

Specification
CSS Writing Modes Level 4
# direction
Scalable Vector Graphics (SVG) 2
# DirectionProperty

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
direction

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch