【簡単】CSSで数字を縦向き・縦書きにする方法【text-orientation: upright;】
CSSで数字を縦向き・縦書きにしたい。
writing-mode: vertical-rl;プロパティを記述したら縦書きにはなるが、数字は横向きで縦書き表示されてしまう。縦書きで且つ縦向きにしたい。
本記事ではこのような悩みを解決します。
実装サンプル
See the Pen
ＣSS縦書き数字 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
左の数字が縦書きで横向き表示、右側が縦書きで縦向き表示になってます。
右側の縦書き縦向き数字の実装方法について次章より解説します。
縦書き縦向き数字にするCSS
.txt {
writing-mode: vertical-rl;
text-orientation: upright;
}
上記CSSをあてることで縦書き縦向き数字になります。
writing-modeプロパティを指定し、値にvertical-rlを入れる事で縦書きになります。
上記プロパティだけだと縦書き横向き数字になるのでtext-orientationプロパティを追記します。
値にuprightを入れる事で数字を縦向きに変更する事ができます。
以上の方法で縦向き縦書き数字が実装できます。
まとめ
サイトに載せる電話番号をPCでは縦書き表示にするご依頼があり、忘備録として実装方法を本記事に残してます。
ぜひ参考にしてみてください。
以上で解説を終わります。
目次
