【CSS】text-orientation - 文字の向き
CSSのtext-orientationプロパティについてご紹介します。
text-orientation
text-orientationは文字の向きを表すプロパティです。
writing-modeがhorizontal-tb以外の場合のみ適用されます。
基本構文
text-orientation: 値;値
代表的な値は次の通りです。
| 値 | 意味 |
|---|---|
| mixed | 横書き文字は横向きに、縦書き文字はそのままに表示 |
| upright | 横書き文字を縦書き文字と同様に表示 |
サンプル
自然な向き
次のサンプルはテキストを言語に合わせて自然な向きで表示します。
<style>
p {
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
<p>スタイルの英語表記はStyleです。</p>文字向きの統一
次のサンプルはテキストの向きを統一して表示します。
<style>
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
</style>
<p>スタイルの英語表記はStyleです。</p>
