writing-mode

  • Revision slug: SVG/Attribute/writing-mode
  • Revision title: writing-mode
  • Revision id: 2581
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment page created, 281 words added

Revision Content

« SVG Attribute reference home

The writing-mode attribute specifies whether the initial inline-progression-direction for a {{ SVGElement("text") }} element shall be left-to-right, right-to-left, or top-to-bottom. The writing-mode attribute applies only to {{ SVGElement("text") }} elements; the attribute is ignored for {{ SVGElement("tspan") }}, {{ SVGElement("tref") }}, {{ SVGElement("altGlyph") }} and {{ SVGElement("textPath") }} sub-elements. (Note that the inline-progression-direction can change within a {{ SVGElement("text") }} element due to the Unicode bidirectional algorithm and properties {{ SVGAttr("direction") }} and {{ SVGAttr("unicode-bidi") }}.

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

Usage context

Categories Presentation attribute
Value lr-tb | rl-tb | tb-rl | lr | rl | tb | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
lr-tb | lr
Sets the initial inline-progression-direction to left-to-right, as is common in most Latin-based documents. For most characters, the current text position is advanced from left to right after each glyph is rendered.
rl-tb | rl
Sets the initial inline-progression-direction to right-to-left, as is common in Arabic or Hebrew scripts.
tb-rl | tb
Sets the initial inline-progression-direction to top-to-bottom, as is common in some Asian scripts, such as Chinese and Japanese. Though hardly as frequent as horizontal, this type of vertical layout also occurs in Latin based documents, particularly in table column or row labels. In most cases, the vertical baselines running through the middle of each glyph are aligned.

Example

Elements

The following elements can use the writing-mode attribute

  • {{ SVGElement("text") }}

See also

  • {{ cssxref("writing-mode","CSS writing-mode") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>writing-mode</code> attribute specifies whether the initial inline-progression-direction for a {{ SVGElement("text") }} element shall be left-to-right, right-to-left, or top-to-bottom. The <code>writing-mode</code> attribute applies only to {{ SVGElement("text") }} elements; the attribute is ignored for {{ SVGElement("tspan") }}, {{ SVGElement("tref") }}, {{ SVGElement("altGlyph") }} and {{ SVGElement("textPath") }} sub-elements. (Note that the inline-progression-direction can change within a {{ SVGElement("text") }} element due to the Unicode bidirectional algorithm and properties {{ SVGAttr("direction") }} and {{ SVGAttr("unicode-bidi") }}.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("writing-mode","CSS writing-mode") }} for further information</p>
<h2>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 title="this is the default value">lr-tb</strong> | rl-tb | tb-rl | lr | rl | tb | 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#WritingModeProperty" title="http://www.w3.org/TR/SVG11/text.html#WritingModeProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<dl> <dt>lr-tb | lr</dt> <dd>Sets the initial inline-progression-direction to left-to-right, as is common in most Latin-based documents. For most characters, the current text position is advanced from left to right after each glyph is rendered.</dd>
</dl>
<dl> <dt>rl-tb | rl</dt>
</dl>
<dl> <dd>Sets the initial inline-progression-direction to right-to-left, as is common in Arabic or Hebrew scripts.</dd>
</dl>
<dl> <dt>tb-rl | tb</dt>
</dl>
<dl> <dd>Sets the initial inline-progression-direction to top-to-bottom, as is common in some Asian scripts, such as Chinese and Japanese. Though hardly as frequent as horizontal, this type of vertical layout also occurs in Latin based documents, particularly in table column or row labels. In most cases, the vertical baselines running through the middle of each glyph are aligned.</dd>
</dl>
<h2>Example</h2>
<h2>Elements</h2>
<p>The following elements can use the <code>writing-mode</code> attribute</p>
<ul> <li>{{ SVGElement("text") }}</li>
</ul>
<h2>See also</h2>
<ul> <li>{{ cssxref("writing-mode","CSS writing-mode") }}</li>
</ul>
Revert to this revision