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）
値（Values）
備考（Remarks）
Example

構文(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	テキストの記述方向