text-orientation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

text-orientationCSS のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト (writing-modehorizontal-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-verticalglyph-orientation-horizontal の値を使用します。

公式定義

初期値mixed
適用対象表の行グループ、列グループ、行、列を除くすべての要素
継承あり
計算値指定通り
アニメーションの種類アニメーション不可

形式文法

text-orientation = 
mixed |
upright |
sideways

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-orientation
mixed
sideways
upright

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報