mozilla

Revision 2580 of direction

  • Revision slug: SVG/Attribute/direction
  • Revision title: direction
  • Revision id: 2580
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment page created, 192 words added

Revision Content

« SVG Attribute reference home

The direction attribute specifies the base writing direction of text and the direction of embeddings and overrides (see {{ SVGAttr("unicode-bidi") }}) for the Unicode bidirectional algorithm. For the direction attribute to have any effect on an element that does not by itself establish a new text chunk (such as a {{ SVGElement("tspan") }} element without absolute position adjustments due to {{ SVGAttr("x") }} or {{ SVGAttr("y") }} attributes), the {{ SVGAttr("unicode-bidi") }} property's value must be embed or bidi-override.

The direction attribute  applies only to glyphs oriented perpendicular to the inline-progression-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-progression-direction.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("direction","CSS direction") }} for further information.

Usage context

Categories Presentation attribute
Value ltr | rtl | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

Example

Elements

The following elements can use the direction attribute

See also

  • {{ cssxref("direction","CSS direction") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>direction</code> attribute specifies the base writing direction of text and the direction of embeddings and overrides (see {{ SVGAttr("unicode-bidi") }}) for the Unicode bidirectional algorithm. For the <code>direction</code> attribute to have any effect on an element that does not by itself establish a new text chunk (such as a {{ SVGElement("tspan") }} element without absolute position adjustments due to {{ SVGAttr("x") }} or {{ SVGAttr("y") }} attributes), the {{ SVGAttr("unicode-bidi") }} property's value must be embed or bidi-override.</p>
<p>The direction attribute  applies only to glyphs oriented perpendicular to the inline-progression-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-progression-direction.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("direction","CSS direction") }} for further information.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Presentation attribute</td> </tr> <tr> <th scope="row">Value</th> <td><strong>ltr</strong> | rtl | inherit</td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#DirectionProperty" title="http://www.w3.org/TR/SVG11/text.html#DirectionProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>direction</code> attribute</p>
<ul> <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">Text content elements</a> »</li>
</ul>
<h2 id="See_also">See also</h2>
<ul> <li>{{ cssxref("direction","CSS direction") }}</li>
</ul>
Revert to this revision