【CSS覚書】テキストの縦書きと縦書き時のアルファベットも縦にする方法

毎度でございます、えばさん(@Ebba_oBL)です。

いつまで経っても覚えないので書き留めておきます。

cssで縦書きにするには writing-modeを使い、vertical-rlで右から左へ文章が進み、vertical-lrで左から右へ同様の効果が得られます。

この時アルファベットが含まれる場合はどうなるかというと上から下へけて横書きを行う(ややこしい)ので必然的にアルファベットは右に90度回った状態で縦書きされてしまう。これを text-orientation: upright;とすればアルファベットも縦向きになります。

.tategaki {
	writing-mode: vertical-rl;
	text-orientation: upright;
}

ちみみに縦書きテキストで text-align: center; としてやると縦要素の中央揃えになり、leftで上揃え、rightで下揃えになります。

この記事が気に入ったら
いいね または フォローしてね!

是非シェアしていってください

コメント

コメントする

目次