Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

-ms-writing-mode property

Specifies the direction and flow of the content in the object.

CSS Text Level 3, Section 3.1

Syntax

-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb

Property values

One of the following values:

lr-tb

Initial value. Content flows horizontally from left to right, top to bottom. The next horizontal line is positioned underneath the previous line. All glyphs are positioned upright. This layout is used by most writing systems.

rl-tb

Content flows horizontally from right to left, top to bottom. The next horizontal line is positioned underneath the previous line. All glyphs are positioned upright. This layout is used with right-to-left scripts like Arabic, Hebrew, Thaana, and Syriac.

tb-rl

Content flows vertically from top to bottom, right to left. The next vertical line is positioned to the left of the previous line. Wide-cell glyphs are positioned upright; nonwide-cell glyphs (also known as narrow Latin or narrow Kana glyphs) are rotated 90° clockwise. This layout is used in East Asian typography.

bt-rl

Content flows vertically from bottom to top, right to left. The next vertical line is positioned to the left of the previous line. Wide-cell glyphs are positioned upright; nonwide-cell glyphs (also known as narrow Latin or narrow Kana glyphs) are rotated 90° clockwise. This layout is used for right-to-left script blocks used in vertical East Asian typography.

tb-lr

Content flows vertically from top to bottom, left to right. The next vertical line is positioned to the right of the previous line.

bt-lr

Content flows vertically from bottom to top, left to right.

lr-bt

Content flows horizontally from bottom to top, left to right. The next horizontal line is positioned above the previous line.

rl-bt

Content flows horizontally from bottom to top, right to left.

lr

For use on SVG and HTML elements. Equivalent to lr-tb.

rl

For use on SVG and HTML elements. Equivalent to rl-tb.

tb

For use on SVG and HTML elements. Equivalent to tb-rl.

CSS information

Applies ToAll elements
Mediavisual
Inheritedtrue
Initial Valuelr-tb

Standards information

Remarks

The following diagram shows how the different values for the property appear on the screen.

Visual comparison of writing modes

The property does not accumulate. That is, even if the -ms-writing-mode property, set to the same value, is applied to an object multiple times, the -ms-writing-mode property is effectively applied to the object only one time. For example, if a parent element has the -ms-writing-mode property set to "tb-rl", setting a child element's -ms-writing-mode property to "tb-rl" does not cause the child element to double the effect of the -ms-writing-mode property, or "rotate."

An element has its own layout if the value for the -ms-writing-mode property is different than its parent. When a change in layout flow is specified for a child element, the maximum logical height requirement (height in this element's coordinate system) is determined by the available space (width measurement) in the parent's coordinate system. Based on this information, a logical width (width in the child's coordinate system) is computed to meet the maximum logical height requirement. Depending on the amount of space needed by the child element, the actual logical height of the element can be less than the maximum logical height requirement.

When you use elements that have different values for the -ms-writing-mode property, you can have greater control over the layout of those elements by specifying fixed dimensions for each element.

Examples

The following example shows how to use the -ms-writing-mode property to nest horizontal text inside vertical text.


<html>

<head>
<style>
.clsHorizLR {
  -ms-writing-mode: lr-tb;
}
.clsHorizRL {
  -ms-writing-mode: rl-tb;
}
.clsVertTB {
  -ms-writing-mode: tb-rl;
}
.clsVertBT {
  -ms-writing-mode: bt-rl;
}
</style>
</head>

<body>

<h1>writing-mode Property</h1>
<p>This example shows how to use the <strong>writing-mode</strong> property to display 
horizontal text (<span>lr-tb</span>) within vertical text (<span>tb-rl</span>).</p>
<p>The following <strong>div</strong> element has a <strong>writing-mode</strong> 
of tb-rl and contains text and <strong>span</strong> child elements. The text flow 
alternates between vertical and horizontal. Be aware of the effect of the
<strong>BR</strong> element after the second set of vertical text.</p>
<div style="-ms-writing-mode: tb-rl">
  First Set of Vertical Text<span class="clsHorizLR">First Set of Horizontal Text</span> 
  Second Set of Vertical Text plus a line break<br>
  <span style="-ms-writing-mode: lr-tb">Second Set of Horizontal Text</span> Third 
  Set of Vertical Text<span class="clsHorizLR">Third Set of Horizontal Text</span>
</div>
<p>This example shows how to use the new <strong>writing-mode</strong> attribute 
to display horizontal text (<span>rl-tb</span>).</p>
<div class="clsHorizRL">
  Fourth Set of Horizontal Text</div>
<p>This example makes use of the new<strong>writing-mode</strong> attribute to display 
vertical text (<span>bt-rl</span>).</p>
<div class="clsVertBT">
  Fourth Set of Vertical Text</div>

</body>

</html>


See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style

 

 

Show:
© 2014 Microsoft. All rights reserved.