テキスト

writing-mode

writing-mode は、文字を横に並べるか縦に並べるか、行をどちらへ進めるかを指定します。日本語の縦書きは vertical-rl です。

構文

horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  writing-mode: vertical-rl;
}

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

horizontal-tb：横書きで、行は上から下へ進みます。初期値です。
vertical-rl：縦書きで、行は右から左へ進みます。日本語の縦書きはこれです。
vertical-lr：縦書きで、行は左から右へ進みます（モンゴル文字など）。
sideways-rl / sideways-lr：横書きの文章を、そのまま右や左に 90 度倒した形にします。日本語の文字も横倒しになります。sideways-lr は下から上へ読みます。

sideways-rl と sideways-lr は後から足された値で、Chrome は 132、Safari は 18.4 から対応しています（Firefox は以前から対応）。それより古いブラウザでは宣言ごと無視されます。

vertical-rl では、仮名や漢字は立ったまま、英字や数字は横倒しになります。英字も立てたいときは text-orientation: upright、2 桁の数字などを 1 文字分に収めたいときは text-combine-upright（縦中横）を使います。

縦書きでは、1 行の長さが高さ、行が積み重なる向きが幅になります。inline-size や margin-block のような論理プロパティは書く向きに合わせて読み替えられますが、width や margin-top は画面の向きのままです。

writing-mode は子の要素に引き継がれます。縦書きの中に横書きの部分を作るときは、その要素に horizontal-tb を指定し直します。