備忘録的プログラミングリファレンス

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;

関連するプロパティ

 以下のような関連するプロパティがあります。

directionテキストの右寄せ、左寄せ
unicode-bidi
writing-modeテキストの記述方向

構文(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-orientationSVG専用の設定値
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)mixed
継承(Inherited)Yes
CSS AnimationNo

Example

 text-orientationの例です。エレメント内は右から縦書きに設定しています。英数字は値をupright、縦書き用に指定してあります。 ベンダープリフィックスを付加しています

 上側にtext-orientationの指定あり。下側に指定なしを表示しています。