text-orientation
text-orientation
は CSS のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト (writing-mode
が horizontal-tb
以外の場合) でのみ効果があります。これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。
試してみましょう
構文
css
/* キーワード値 */
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: initial;
text-orientation: unset;
text-orientation
プロパティは、以下のリストから単一のキーワードとして指定されます。
値
mixed
-
横書き用の文字を右に 90° 回転させ、縦書き用の文字は自然に配置します。既定値です。
upright
-
横書き用の文字を、縦書き用の字形と同様に自然に (正立で) 配置します。なお、このキーワードはすべての文字を左書きと見なします。
direction
の使用値はltr
に強制されます。 sideways
-
全行を横書きで書いて 90° 回転したように配置します。
sideways-right
-
sideways
の別名です。これは互換性のために維持されています。 use-glyph-orientation
-
SVG 要素上で、非推奨の SVG プロパティ
glyph-orientation-vertical
とglyph-orientation-horizontal
の値を使用します。
公式定義
初期値 | mixed |
---|---|
適用対象 | 表の行グループ、列グループ、行、列を除くすべての要素 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | アニメーション不可 |
形式文法
例
HTML
html
<p>Lorem ipsum dolet semper quisquam.</p>
CSS
css
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
結果
仕様書
Specification |
---|
CSS Writing Modes Level 4 # text-orientation |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 他の縦書きに関連する CSS プロパティ:
writing-mode
,text-combine-upright
,unicode-bidi
- CSS 論理的プロパティ
- 縦書きテキストのスタイル付け (中国語、日本語、韓国語、モンゴル語)
- 広範なブラウザーの対応状況のテスト結果: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation