Fandom

HTML & CSS Wiki

-ms-writing-mode

649pages on
this wiki
Add New Page
Comments0 Share

The CSS -ms-writing-mode Microsoft extension property controls the intrinsic writing direction rendering for a block of content. The default is left-to-right, top-to-bottom common in western languages.

Values

Value Description
lr-tb Default. 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 Windows Internet Explorer 8. 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 Internet Explorer 8. Content flows vertically from bottom to top, left to right.
lr-bt Internet Explorer 8. Content flows horizontally from bottom to top, left to right. The next horizontal line is positioned above the previous line.
rl-bt Internet Explorer 8. Content flows horizontally from bottom to top, right to left.
lr Internet Explorer 9. For use on Scalable SVG and HTML elements. Equivalent to lr-tb.
rl Internet Explorer 9. For use on SVG and HTML elements. Equivalent to rl-tb.
tb Internet Explorer 9. For use on SVG and HTML elements. Equivalent to tb-rl.


HTML example:

<p style="-ms-writing-mode:rl-tb;">TEXT</p>


CSS example:

p {
   -ms-writing-mode:rl-tb;
}


Image example:

-ms-writing-mode

This diagram shows how the values will render the text.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.