CSStext-orientation プロパティは、行内のテキストの向きを定義します。このプロパティは、 writing-modehorizontal-tb ではない、縦書きモードでのみ効果があります。これは、縦書きを使う言語で書いた文字の表示を制御するのに役立つだけでなく、縦書きのテーブルヘッダーにも使えます。

構文

/* キーワード値 */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* グローバル値 */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

text-orientation プロパティは、以下のリストから単一のキーワードとして指定されます。

mixed
このキーワードは、横書きのみの文字を右に 90°回転させ、縦書き文字のグリフは自然にレイアウトされます。
upright
このキーワードは、横書きのみの文字を、縦書き文字と同様に自然にレイアウト (正立) させます。このキーワードは、すべての文字が ltr (左から右へ) で書かれているものとみなすので注意してください。これは、ユーザ側でどのように設定されていても、対象のテキストの directionltr が指定されているものとします。
sideways
このキーワードは、全行を横書きで書いて 90°回転したようにレイアウトします。writing-modevertical-rl の場合は右へ回転、vertical-lr の場合は左へ回転します。
sideways-right
これは、互換性を維持するためのキーワードであり、sideways の別名です。
use-glyph-orientation
SVG 要素上で、このキーワードは、非推奨の SVG プロパティ glyph-orientation-verticalglyph-orientation-horizontal の値を使用します。

正式の構文

mixed | upright | sideways

HTML

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

CSS

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

結果

仕様書

仕様書 状態 備考
CSS Writing Modes Module Level 3
text-orientation の定義
勧告候補 初回定義

初期値mixed
適用対象表の行グループ、列グループ、行、列を除くすべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 48
完全対応 48
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge ? Firefox 完全対応 41
完全対応 41
未対応 38 — 51
無効
無効 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 未対応 なしOpera 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 未対応 なしWebView Android 完全対応 48
完全対応 48
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 48
完全対応 48
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile ? Firefox Android 完全対応 41
完全対応 41
未対応 38 — 51
無効
無効 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 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
完全対応 5.0
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
sidewaysChrome 未対応 なしEdge ? Firefox 完全対応 44
補足
完全対応 44
補足
補足 sideways-right has become an alias of sideways.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 完全対応 44
補足
完全対応 44
補足
補足 sideways-right has become an alias of sideways.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, momdo, Marsf
最終更新者: mfuji09,