text-orientation

text-orientation は CSS のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト (writing-mode が horizontal-tb 以外の場合) でのみ効果があります。これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

構文

/* キーワード値 */
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 (左から右へ) で書かれているものとみなすので注意してください。これは、ユーザ側でどのように設定されていても、対象のテキストの direction に ltr が指定されているものとします。

sideways

このキーワードは、全行を横書きで書いて 90°回転したようにレイアウトします。writing-mode が vertical-rl の場合は右へ回転、vertical-lr の場合は左へ回転します。

sideways-right

これは、互換性を維持するためのキーワードであり、sideways の別名です。

use-glyph-orientation

SVG 要素上で、このキーワードは、非推奨の SVG プロパティ glyph-orientation-vertical と glyph-orientation-horizontal の値を使用します。

形式文法

mixed | upright | sideways

例

HTML

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

CSS

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

結果

仕様書

ブラウザーの互換性

関連情報

• 他の縦書きに関連する CSS プロパティ: writing-mode, text-combine-upright, unicode-bidi
• CSS 論理的プロパティ
• 縦書きテキストのスタイル付け (中国語、日本語、韓国語、モンゴル語)
• 広範なブラウザーの対応状況テキスト結果: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation