writing-mode

Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!

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-mode 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="writing-mode: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="writing-mode: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="writing-mode: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="writing-mode: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="writing-mode: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="writing-mode: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="writing-mode: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="writing-mode:rl-bt">...</div>
lr Deprecated except for SVG1 documents. For CSS, use horizontal-tb (default value). <div style="writing-mode:horizontal-tb">...</div>
lr-tb Deprecated except for SVG1 documents. For CSS, use horizontal-tb (default value). <div style="writing-mode:horizontal-tb">...</div>
rl Deprecated except for SVG1 documents. For CSS, use horizontal-tb (default value). <div style="writing-mode:horizontal-tb">...</div>
tb Deprecated except for SVG1 documents. For CSS, use vertical-rl. <div style="writing-mode:vertical-rl">...</div>
tb-lr Deprecated except for SVG1 documents. For CSS, use vertical-lr. <div style="writing-mode:vertical-lr">...</div>
tb-rl Deprecated except for SVG1 documents. For CSS, use vertical-rl. <div style="writing-mode:vertical-rl">...</div>

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support Not supported ? 8.0 (See notes) ? ?
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support Not supported ? ? ? ?

Internet Explorer notes

Only supported in IE8

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.

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Sheppy, Zcorpan, Jez9999, hawkrives, fracmak, ethertank, kscarfone, dgash, teoli
Zuletzt aktualisiert von: fracmak,