【CSS】text-orientation - 文字の向き

CSSのtext-orientationプロパティについて解説します。

検証環境

CSS

macOS

14.1

text-orientation

text-orientationは“文字の向き”のプロパティです。

writing-modeプロパティがhorizontal-tb以外の場合のみ適用されます。

text-orientation: 値;

代表的な値は次の通りです。

値	説明
mixed	従来の書き方向（横書き文字は横向き、縦書き文字は縦向き）
upright	縦向き

文字の従来の書き方向に従うサンプルです。

sample.html

<style>
p {
    writing-mode: vertical-rl;
    ___ih_hl_start
    text-orientation: mixed;
    ___ih_hl_end
}
</style>

<p>スタイルの英語表記はStyleです。</p>

プレビュー

横書き文字を縦向きに表示するサンプルです。

sample.html

<style>
p {
    writing-mode: vertical-rl;
    ___ih_hl_start
    text-orientation: upright;
    ___ih_hl_end
}
</style>

<p>スタイルの英語表記はStyleです。</p>

プレビュー