이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 참여해서 번역을 마치도록 도와 주세요!
English (US)의 문서도 읽어보세요.

The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.

Syntax

/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

The text-orientation property is specified as a single keyword from the list below.

Values

mixed
Rotates the characters of horizontal scripts 90° clockwise. Lays out the characters of vertical scripts naturally. Default value.
upright
Lays out the characters of horizontal scripts naturally (upright), as well as the glyphs for vertical scripts. Note that this keyword causes all characters to be considered as left-to-right: the used value of direction is forced to be ltr.
sideways
Causes characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise.
sideways-right
An alias to sideways that is kept for compatibility purposes.
use-glyph-orientation
On SVG elements, this keyword leads to use the value of the deprecated SVG properties glyph-orientation-vertical and glyph-orientation-horizontal.

Formal syntax

mixed | upright | sideways

Examples

HTML

<p>Lorem ipsum dolet semper quisquam.</p>

CSS

p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Result

Specification

Specification Status Comment
CSS Writing Modes Module Level 3
The definition of 'text-orientation' in that specification.
Candidate Recommendation Initial definition.
Initial valuemixed
Applies toall elements, except table row groups, rows, column groups, and columns
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-orientationChrome Full support 48
Full support 48
Full support 11
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge No support NoFirefox Full support 41
Full support 41
No support 38 — 51
Disabled
Disabled From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 5.1
Prefixed
Full support 5.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 48
Full support 48
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 48
Full support 48
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 41
Full support 41
No support 38 — 51
Disabled
Disabled From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 14
Prefixed
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 5
Prefixed
Full support 5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 5.0
Full support 5.0
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
sidewaysChrome No support NoEdge No support NoFirefox Full support 44
Notes
Full support 44
Notes
Notes sideways-right has become an alias of sideways.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 44
Notes
Full support 44
Notes
Notes sideways-right has become an alias of sideways.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

문서 태그 및 공헌자

최종 변경자: langdon-holly,