text-orientation プロパティ
text-orientation プロパティは、縦書きテキストwriting-mode:vertical-rl;においてのフォントの向き(回転)を指定するプロパティです。
主に英数字の向きを設定します。
SafariとOperaブラウザはベンダープリフィックスが必要です。
-webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-text-orientation: upright; -o-text-orientation: upright; text-orientation: upright;
ページ内 Index
構文(Syntax)
CSS
text-orientation: mixed | upright | sideways-right | sideways | use-glyph-orientation | initial | inherit;
DOM ( JavaScript )
String = object.style.textOrientation;
object.style.textOrientation="mixed | upright | sideways-right | sideways | use-glyph-orientation | initial | inherit";
値(Values)
Value | 摘要 |
---|---|
mixed | 初期値(default値)、縦書きに対応した言語は縦書きに、横書きの言語は行ごと右に90°回転 |
upright | 文字を縦書きの向きに |
sideways-right | 行ごと右に90°回転、sidewaysの別名 |
sideways | 行ごと右に90°回転 |
use-glyph-orientation | SVG専用の設定値 |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | mixed |
継承(Inherited) | Yes |
CSS Animation | No |
Example
text-orientationの例です。エレメント内は右から縦書きに設定しています。英数字は値をupright、縦書き用に指定してあります。 ベンダープリフィックスを付加しています
上側にtext-orientationの指定あり。下側に指定なしを表示しています。
関連する CSS プロパティ
以下のような direction に関連する CSS プロパティがあります。
プロパティ名 | 概要 |
---|---|
border-block | 横書きでは上下、縦書きでは左右の border (枠線) |
border-inline | 横書きでは左右、縦書きでは上下の border (枠線) |
block-size | 横書きでは高さ、縦書きでは幅に設定される |
inline-size | 横書きでは幅、縦書きでは高さに設定される |
direction | テキストの右寄せ、左寄せ |
unicode-bidi | |
writing-mode | テキストの記述方向 |