We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

/* キーワード値 */
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
適用対象テーブル行グループ、テーブル列グループ、テーブル行、テーブル列を除く全要素
継承継承する
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

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>
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

結果

仕様

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

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

48

あり -webkit-

?

41

38 — 511

なし あり -webkit- なし
sideways なし ?442 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

48

あり -webkit-

48

あり -webkit-

?

41

38 — 511

なし なし

5.0

あり -webkit-

sideways なし なし ?442 なし なし なし

1. 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.

2. sideways-right has become an alias of sideways.

関連情報

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

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