direction

The direction attribute specifies the inline-base direction of a <text> or <tspan> element. It defines the start and end points of a line of text as used by the text-anchor and inline-size properties. It also may affect the direction in which characters are positioned if the unicode-bidi property's value is either embed or bidi-override.

It applies only to glyphs oriented perpendicular to the inline-base direction, which includes the usual case of horizontally-oriented Latin or Arabic text and the case of narrow-cell Latin or Arabic characters rotated 90 degrees clockwise relative to a top-to-bottom inline-base direction.

In many cases, the bidirectional Unicode algorithm produces the desired result automatically, so this attribute doesn't need to be specified in those cases. For other cases, such as when using right-to-left languages, it may be sufficient to add the direction attribute to the outermost <svg> element, and allow that direction to inherit to all text elements:

Note: As a presentation attribute, direction can be used as a CSS property. See css direction for further information.

As a presentation attribute, it can be applied to any element but it only has effect on shapes and text context elements, including: <altGlyph>, <textPath>, <text>, <tref>, and <tspan>.

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

Usage notes

Value ltr | rtl
Default value ltr
Animatable Yes

Specifications

Specification Status Comment
CSS Writing Modes Module Level 3
The definition of 'direction' in that specification.
Candidate Recommendation Definition in CSS
Scalable Vector Graphics (SVG) 2
The definition of 'direction' in that specification.
Candidate Recommendation Refers to the CSS Writing Modes specification of the direction property.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'direction' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
directionChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Compatibility unknown  
Compatibility unknown

See also

Document Tags and Contributors

Tags: 
Contributors to this page: Sebastianz, mdnwebdocs-bot, connorshea, Jeremie
Last updated by: Sebastianz,