CSS＞縦書きのテキストを左右中央揃えにする方法

投稿日:2024/10/25　最終更新日:2024/10/25

Table of Contents

概要

CSSでテキストを縦書きにする方法は大体これですよね。

writing-mode: vertical-rl;

writing-mode: vertical-lr;

ただ、たまに一部の文字が左右どちらかに寄ってしまって、ガタガタな状態になる時があります。

この場合、text-align:centerなど中央寄せでよく使う方法も効かず、、色々調べて解決したので備忘録とします。

結論、下記で直ります。

font-feature-settings: initial;

縦書きにした時にガタガタな場合はfont-feature-settingsて何らかの文字詰めをしていることがほとんどです。

横書きであれば綺麗に詰まって見えますが、縦書きだと逆に文字詰めのせいで汚くなってしまうわけです。

なので、縦書きの時はfont-feature-settings: initial;もセットで使用しましょう。