writing-mode

  • Revision slug: CSS/writing-mode
  • Revision title: writing-mode
  • Revision id: 307139
  • Created:
  • Creator: dgash
  • Is current revision? No
  • Comment

Revision Content

Introduction

CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.

A writing mode in CSS is determined by the writing-mode, direction, and text-orientation properties. It applies only to the <text> element, and is ignored by <tspan>, <tref>, <altGlyph>, and <textPath> sub-elements. (Note that the inline-progression-direction can change within a <text> element due to the Unicode bidirectional algorithm and the direction and unicode-bidi properties.) A writing mode is defined primarily in terms of its inline base direction and block flow direction.

The inline base direction is the primary direction in which inline-level content is ordered, and defines which sides of a line are considered to be the "start" and "end". The direction property specifies the inline base direction of an element, and (together with the unicode-bidi property and the inherent directionality of the text content) determines the ordering of inline-level content.

The block flow direction is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. Thus the writing-mode property also determines the ordering of block-level content.

In general, a horizontal writing mode is one with horizontal lines of text and either a downward or upward block flow; a vertical writing mode is one with vertical lines of text and either a leftward or rightward block flow.

Values

The writing-modes property can take the following values.

Value Effect Example
horizontal-tb Default value. Content flows horizontally from left to right, vertically from top to bottom. The next horizontal line is positioned below the previous line. horizontal-tb is the default value, as this layout is used by most writing systems. For SVG1 documents only, use the deprecated value lr, rl, or lr-tb. <div style="horizontal-tb">...</div>
rl-tb Content flows horizontally from right to left, vertically from top to bottom. The next horizontal line is positioned below the previous line. <div style="rl-tb">...</div>
vertical-lr Content flows vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line. For SVG1 documents only, use the deprecated value tb-lr. <div style="vertical-lr">...</div>
vertical-rl Content flows vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line. For SVG1 documents only, use the deprecated value tb or tb-rl. <div style="vertical-rl">...</div>
bt-rl Content flows vertically from bottom to top, horizontally right to left. The next vertical line is positioned to the left of the previous line. <div style="bt-rl">...</div>
bt-lr Content flows vertically from bottom to top, horizontally left to right. The next vertical line is positioned to the right of the previous line. <div style="bt-lr">...</div>
lr-bt Content flows horizontally from left to right, vertically from bottom to top. The next horizontal line is positioned above the previous line. <div style="lr-bt">...</div>
rl-bt Content flows horizontally from right to left, vertically from bottom to top. The next horizontal line is positioned above the previous line. <div style="rl-bt">...</div>
lr Deprecated except for SVG1 documents. For CSS, use horizontal-tb (default value).  <div style="horizontal-tb">...</div>
lr-tb Deprecated except for SVG1 documents. For CSS, use horizontal-tb (default value). <div style="horizontal-tb">...</div>
rl Deprecated except for SVG1 documents. For CSS, use horizontal-tb (default value).  <div style="horizontal-tb">...</div>
tb Deprecated except for SVG1 documents. For CSS, use vertical-rl <div style="vertical-rl">...</div>
tb-lr Deprecated except for SVG1 documents. For CSS, use vertical-lr. <div style="vertical-lr">...</div>
tb-rl Deprecated except for SVG1 documents. For CSS, use vertical-rl. <div style="vertical-rl">...</div>

See also

As a presentation attribute, writing-mode can be used as a property in a CSS stylesheet. See the MDN article writing-mode and the W3C Writing Modes specification for more information.

Revision Source

<h2 id="Introduction">Introduction</h2>
<p style="margin-top: 1em; margin-bottom: 1em; color: rgb(0, 0, 0); font-family: sans-serif; font-size: medium; line-height: 24px; ">CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS <code>writing-mode</code> property.</p>
<p style="margin-top: 1em; margin-bottom: 1em; color: rgb(0, 0, 0); font-family: sans-serif; font-size: medium; line-height: 24px; ">A <em>writing mode</em> in CSS is determined by the <code>writing-mode</code>, <code>direction</code>, and <code>text-orientation</code> properties. It applies only to the&nbsp;<a href="https://developer.mozilla.org/en-US/docs/SVG/Element/text" title="https://developer.mozilla.org/en-US/docs/SVG/Element/text"><code>&lt;text&gt;</code></a> element, and is ignored by&nbsp;<code>&lt;tspan&gt;</code>, <code>&lt;tref&gt;</code>, <code>&lt;altGlyph&gt;</code>, and <code>&lt;textPath&gt;</code> sub-elements. (Note that the inline-progression-direction can change within a <code>&lt;text&gt;</code> element due to the Unicode bidirectional algorithm and the <code>direction</code> and <code>unicode-bidi</code> properties.) A writing mode is defined primarily in terms of its <em>inline base direction</em> and <em>block flow direction</em>.</p>
<p style="margin-top: 1em; margin-bottom: 1em; color: rgb(0, 0, 0); font-family: sans-serif; font-size: medium; line-height: 24px; margin-left: 40px; ">The <em>inline base direction</em> is the primary direction in which inline-level content is ordered, and defines which sides of a line are considered to be the "start" and "end". The <code>direction</code> property specifies the inline base direction of an element, and (together with the <code>unicode-bidi</code> property and the inherent directionality of the text content) determines the ordering of inline-level content.</p>
<p style="margin-top: 1em; margin-bottom: 1em; color: rgb(0, 0, 0); font-family: sans-serif; font-size: medium; line-height: 24px; margin-left: 40px; ">The <em>block flow direction</em> is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. Thus the <code>writing-mode</code> property also determines the ordering of block-level content.</p>
<p style="margin-top: 1em; margin-bottom: 1em; color: rgb(0, 0, 0); font-family: sans-serif; font-size: medium; line-height: 24px; ">In general, a&nbsp;horizontal writing mode is one with horizontal lines of text and either a downward or upward block flow; a vertical writing mode is one with vertical lines of text and either a leftward or rightward block flow.</p>
<h2 id="Values">Values</h2>
<p style="margin-top: 1em; margin-bottom: 1em; color: rgb(0, 0, 0); font-family: sans-serif; font-size: medium; line-height: 24px; ">The <code>writing-modes</code> property can take the following values.</p>
<table align="left">
  <thead>
    <tr>
      <th scope="col" style="text-align: left; ">Value</th>
      <th scope="col" style="text-align: left; ">Effect</th>
      <th scope="col" style="text-align: left; ">Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><nobr><code>horizontal-tb</code></nobr></th>
      <td>Default value.&nbsp;Content flows horizontally from left to right, vertically from top to bottom. The next horizontal line is positioned below the previous line. <code>horizontal-tb</code> is the default value, as this layout is used by most writing systems.&nbsp;For SVG1 documents only, use the deprecated value <code>lr</code>, <code>rl</code>, or&nbsp;<code style="font-size: 14px; color: rgb(51, 51, 51); ">lr-tb</code>.</td>
      <td><nobr><code>&lt;div style="horizontal-tb"&gt;...&lt;/div&gt;</code></nobr></td>
    </tr>
    <tr>
      <th scope="row"><code>rl-tb</code></th>
      <td>Content flows horizontally from right to left, vertically from top to bottom. The next horizontal line is positioned below the previous line.</td>
      <td><nobr><code>&lt;div style="rl-tb"&gt;...&lt;/div&gt;</code></nobr></td>
    </tr>
    <tr>
      <th scope="row"><code>vertical-lr</code></th>
      <td>Content flows vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line. For SVG1 documents only, use the deprecated value <code>tb-lr</code>.</td>
      <td><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal; white-space: nowrap; ">&lt;div style="vertical-lr"&gt;...&lt;/div&gt;</span></td>
    </tr>
    <tr>
      <th scope="row"><code>vertical-rl</code></th>
      <td>Content flows vertically from top to bottom, horizontally from right to left.&nbsp;The next vertical line is positioned to the left of the previous line. For SVG1 documents only, use the deprecated value <code>tb</code> or&nbsp;<code style="font-size: 14px; color: rgb(51, 51, 51); ">tb-rl</code>.</td>
      <td><nobr><code>&lt;div style="vertical-rl"&gt;...&lt;/div&gt;</code></nobr></td>
    </tr>
    <tr>
      <th scope="row"><code>bt-rl</code></th>
      <td>Content flows vertically from bottom to top, horizontally right to left. The next vertical line is positioned to the left of the previous line.</td>
      <td><nobr><code>&lt;div style="bt-rl"&gt;...&lt;/div&gt;</code></nobr></td>
    </tr>
    <tr>
      <th scope="row"><code>bt-lr</code></th>
      <td>Content flows vertically from bottom to top, horizontally left to right. The next vertical line is positioned to the right of the previous line.</td>
      <td><nobr><code>&lt;div style="bt-lr"&gt;...&lt;/div&gt;</code></nobr></td>
    </tr>
    <tr>
      <th scope="row"><code>lr-bt</code></th>
      <td>Content flows horizontally from left to right, vertically from&nbsp;bottom to top. The next horizontal line is positioned above the previous line.</td>
      <td><nobr><code>&lt;div style="lr-bt"&gt;...&lt;/div&gt;</code></nobr></td>
    </tr>
    <tr>
      <th scope="row"><code>rl-bt</code></th>
      <td>Content flows horizontally from right to left, vertically from bottom to top. The next horizontal line is positioned above the previous line.</td>
      <td><nobr><code>&lt;div style="rl-bt"&gt;...&lt;/div&gt;</code></nobr></td>
    </tr>
    <tr>
      <th scope="row"><code>lr</code></th>
      <td>Deprecated except for SVG1 documents. For CSS, use&nbsp;<code style="font-size: 14px; color: rgb(51, 51, 51); ">horizontal-tb</code>&nbsp;(default value).&nbsp;</td>
      <td><nobr><code>&lt;div style="horizontal-tb"&gt;...&lt;/div&gt;</code></nobr></td>
    </tr>
    <tr>
      <th scope="row"><code>lr-tb</code></th>
      <td>Deprecated except for SVG1 documents. For CSS, use <code>horizontal-tb</code> (default value).</td>
      <td><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal; white-space: nowrap; ">&lt;div style="horizontal-tb"&gt;...&lt;/div&gt;</span></td>
    </tr>
    <tr>
      <th scope="row"><code>rl</code></th>
      <td>Deprecated except for SVG1 documents. For CSS, use&nbsp;<code style="font-size: 14px; color: rgb(51, 51, 51); ">horizontal-tb</code>&nbsp;(default value).&nbsp;</td>
      <td><nobr><code>&lt;div style="horizontal-tb"&gt;...&lt;/div&gt;</code></nobr></td>
    </tr>
    <tr>
      <th scope="row"><code>tb</code></th>
      <td>Deprecated except for SVG1 documents. For CSS, use&nbsp;<code style="font-size: 14px; color: rgb(51, 51, 51); ">vertical-rl</code>.&nbsp;</td>
      <td><nobr><code>&lt;div style="vertical-rl"&gt;...&lt;/div&gt;</code></nobr></td>
    </tr>
    <tr>
      <th scope="row"><code>tb-lr</code></th>
      <td>Deprecated except for SVG1 documents. For CSS, use <code>vertical-lr</code>.</td>
      <td><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal; white-space: nowrap; ">&lt;div style="vertical-lr"&gt;...&lt;/div&gt;</span></td>
    </tr>
    <tr>
      <th scope="row"><code>tb-rl</code></th>
      <td>Deprecated except for SVG1 documents. For CSS, use <code>vertical-rl</code>.</td>
      <td><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal; white-space: nowrap; ">&lt;div style="vertical-rl"&gt;...&lt;/div&gt;</span></td>
    </tr>
  </tbody>
</table>
<h2 id="See_also">See also</h2>
<p style="margin-top: 1em; margin-bottom: 1em; color: rgb(0, 0, 0); font-family: sans-serif; font-size: medium; line-height: 24px; ">As a presentation attribute,&nbsp;<code style="font-size: 16px; ">writing-mode</code>&nbsp;can be used as a property in a CSS stylesheet. See the MDN&nbsp;article&nbsp;<a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute/writing-mode" title="https://developer.mozilla.org/en-US/docs/SVG/Attribute/writing-mode">writing-mode</a>&nbsp;and the W3C&nbsp;<a href="http://dev.w3.org/csswg/css3-writing-modes/" title="http://dev.w3.org/csswg/css3-writing-modes/">Writing Modes specification</a>&nbsp;for more information.</p>
<table align="left" style="font-size: 14px; ">
  <thead>
    <tr>
    </tr>
  </thead>
</table>
Revert to this revision