CSSで縦書きしてカーニングがおかしくなった時の修正方法

cssで縦書きするには

writing-mode: vertical-rl;

を指定してやればいいわけですが、
単純にこれだけだと、
日本語が左右にずれたり半角英数がおかしくなります。

解決方法

writing-mode: vertical-rl;
font-feature-settings: 'pkna';

pknaは、仮名や仮名関連の字形セットをプロポーショナル字形に置き換える指定だそうです。