css writing-mode 明朝 縦書きテキストのずれ

Question

writing-mode: vertical-rl; で明朝体を縦書きにしたところ文字によって左よってしまうのですが、解決方法があれば教えてください。

windows7
chrome
firefox

font-family: 'Yu Mincho',YuMincho,serif;
-ms-writing-mode: tb-rl;
-webkit-writing-mode:vertical-rl;
-moz-writing-mode:vertical-rl;
writing-mode: vertical-rl;

「参考」

Answer 1

Arch LinuxのChromeとMacのChromeで確認しましたが、 ずれてはいませんでした。

writing-modeはまだ不安定な仕様で、 ブラウザなどの実行環境によってけっこう違う表示になります。
確実に縦書きをしたい場合は、 1文字ずつdivで囲み、 transformでひっくり返したりすることです。

1文字ずつは文字数が多くなると苦労しますので、 外部のライブラリを検討してみるのも良いと思います。
[HTMLで縦書きを実現するJavaScriptライブラリまとめ](url: http://nemousucom.hatenablog.com/entry/2012/11/12/084310)

Comments

[sud55s]

ありがとうございます。

Answer 2

「ヒラギノ明朝」「A1明朝」は、ずれないみたいです。