direction

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Das direction-Attribut gibt die Inline-Basisrichtung eines <text>- oder <tspan>-Elements an. 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-Basisrichtung ausgerichtet sind, was den üblichen Fall von horizontal ausgerichtetem lateinischem oder arabischem Text und den Fall von schmalen lateinischen oder arabischen Zeichen umfasst, die im Uhrzeigersinn um 90 Grad relativ zu einer von oben nach unten verlaufenden Inline-Basisrichtung gedreht sind.

In vielen Fällen liefert der bidirektionale Unicode-Algorithmus automatisch das gewünschte Ergebnis, sodass dieses Attribut in diesen Fällen nicht angegeben werden muss. Für andere Fälle, wie zum Beispiel bei der Verwendung von Sprachen, die von rechts nach links gelesen werden, kann es ausreichend sein, das direction-Attribut zum äußeren <svg>-Element hinzuzufügen, und diese Richtung allen Textelementen vererben zu lassen:

Hinweis: Als Präsentationsattribut hat direction auch ein entsprechendes CSS-Property: direction. Wenn beides angegeben ist, hat das CSS-Property Vorrang.

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

Beispiel

html,
body,
svg {
  height: 100%;
}

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>

Verwendungshinweise

Wert	`ltr` \| `rtl`
Standardwert	`ltr`
Animierbar	Ja

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

CSS direction-Eigenschaft

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden