Sets or retrieves the direction and flow of the content in the object.
Syntax
| HTML |
{ writing-mode : sFlow }
|
|---|
| Scripting | [ sFlow = ] object.style.writingMode [ = v ] |
|---|
Possible Values
| sFlow | String that
specifies or receives one of the following values.| lr-tb | Default. Content in the object 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 in the object 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 in the object 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-degrees clockwise. This layout is used in East Asian typography. | bt-rl | Content in the object 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-degrees clockwise. This layout is used for right to left script blocks used in vertical East Asian typography. |
|
The property is read/write
for all objects except the following, for which it is read-only:
currentStyle.
The property has a default value of
lr-tb. The Cascading Style Sheets (CSS) attribute is
inherited by
all
objects with the following exceptions: BUTTON, CAPTION, INPUT, INPUT type=button, INPUT type=file, INPUT type=password, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, OPTION, TEXTAREA.
Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see About Dynamic Properties.
Remarks
The property is read-only for the
currentStyle object.
The property does not accumulate. For example, if a parent element has the writingMode property set to tb-rl, setting a child element's writingMode property to tb-rl does not cause the child element to rotate.
An element has its own layout if the value for the writingMode 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 writingMode property, you can have greater control over the layout of those elements by specifying fixed dimensions for each one.
Windows Internet Explorer 7. The rl-tb, and bt-rl values are available to the writingMode.
Internet Explorer 7. The writingMode for the body element is limited to lr-tb and rl-tb.
Example
The following example shows how to use the writingMode property to nest horizontal text inside vertical text.
<html><head><style>
.clsHorizLR { writing-mode:lr-tb }
.clsHorizRL { writing-mode:rl-tb }
.clsVertTB { writing-mode:tb-rl }
.clsVertBT { writing-mode:bt-rl }
</style></head><body>
<h1>writing-mode Attribute</h1>
<p>This example shows how to use the <b>writing-mode</b> attribute to display horizontal text (<span>lr-tb</span>)
within vertical text (<span>tb-rl</span>).</p>
<p>The following <b>div</b> element has a <b>writing-mode</b> of tb-rl and contains text and <b>span</b> child elements.
The text flow alternates between vertical and horizontal. Note the effect of the <b>BR</b> element after the second
set of vertical text.</p>
<div style="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="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 <b>writing-mode</b> attribute to display horizontal text (<span>rl-tb</span>).<div class="clsHorizRL">Fourth Set of Horizontal Text</div><p>This example makes use of the new<b>writing-mode</b> attribute to display vertical text (<span>bt-rl</span>).<div class="clsVertBT">Fourth Set of
Vertical Text</div>
</div></body></html>
This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
Standards Information
This property is a Microsoft extension to
Cascading Style Sheets (CSS) 
.
Applies To
|
A,
ABBR,
ACRONYM,
ADDRESS,
B,
BIG,
BLOCKQUOTE,
BUTTON,
CAPTION,
CENTER,
CITE,
CODE,
currentStyle,
CUSTOM,
DD,
DEL,
DFN,
DIR,
DIV,
DL,
DT,
EM,
FIELDSET,
FONT,
FORM,
hn,
HR,
I,
INPUT,
INPUT type=button,
INPUT type=file,
INPUT type=password,
INPUT type=reset,
INPUT type=submit,
INPUT type=text,
INS,
ISINDEX,
KBD,
LABEL,
LEGEND,
LI,
MARQUEE,
MENU,
OL,
OPTION,
P,
PLAINTEXT,
popup,
PRE,
Q,
RT,
RUBY,
runtimeStyle,
S,
SAMP,
SMALL,
SPAN,
STRIKE,
STRONG,
style,
SUB,
SUP,
TD,
TEXTAREA,
TH,
TT,
U,
UL,
VAR |
