Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

text-orientation

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

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

初期値mixed
適用対象テーブル行グループ、テーブル列グループ、テーブル行、テーブル列を除く全要素
継承継承する
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

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

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

.myText {
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
}  

仕様

仕様書 状況 コメント
CSS Writing Modes Module Level 3
text-orientation の定義
勧告候補 Initial definition

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有) -webkit
48.0 (unprefixed)
41 (41) 未サポート (有) -webkit 未サポート
sideways 未サポート 44 (44)[1] 未サポート 未サポート 未サポート
機能 Android Android Webview Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 未サポート 48.0 (unprefixed) 48.0 (unprefixed) 41.0 (41) 未サポート 未サポート 未サポート
sideways 未サポート 未サポート 未サポート 44.0 (44)[1] 未サポート 未サポート 未サポート

[1] sideways-right は、sideways の別名として使用できます。

関連情報

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

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