いつの間にか、CSSだけで縦書きができるようになっていた
2016/11/30

いつの間にか、ウェブサイトの縦書きが実用レベルになっていたようです。
しかもCSSのみで実現できるということで、早速試してみました。
デモと合わせてご覧くださいませ。
以下に縦書きの実装方法を記載しておきますので、参考にしてみてください。
文字の進行方向を縦に指定する
まずはCSSで、文字の進行方向を縦にします。
その方法は、該当要素に下記のCSSを追加するだけ
writing-mode: vertical-rl;
ブラウザごとに若干仕様が異なるようで、
ベンダープレフィックス付きで指定する必要があります。
-webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;
スクリーンショット。こんな感じになります。
英語や数字も、縦に回転させる
文字の進行方向を縦にしただけだと、
英語や数字が90度横に回転してしまい、見にくい場合があります。
英数字を回転させて、縦表示にするには
下記のCSSを追記します。
text-orientation: upright;
スクリーンショットはこんな感じ
数字を縦中横にする
二番目の例では英語も数字も縦並びになっています。
英語の縦書きは少し読みにくいので、横書きに
数字はやっぱり縦中横が良いですよね
縦中横にするには、HTMLの該当箇所にも手を加えないといけません
縦中横にする箇所をspanなどで括り、
<span class="tcy">62</span>年<span class="tcy">4</span>月のロンドンで
CSSを指定します。
.tcy { text-combine-upright: all; }
ブラウザごとに若干指定が異なるので、
ベンダープレフィックス付きで。
.tcy { -webkit-text-combine: horizontal; -ms-text-combine-horizontal: all; text-combine-upright: all; }
スクリーンショット。縦中横になってますね
まとめ
CSSだけで、ここまでできるとは驚きでした。
少し前までjavascriptのライブラリなどで、
無理矢理実装する必要があったのですが、非常に手軽で使くなりましたね。
とはいえ、まだブラウザによって差異があるようなので
テストしてから使用するのが良いかな、と思います。
縦書きCSSについては、下記サイトが参考になりました。
是非ご覧ください。
縦書きWeb普及委員会
http://tategaki.github.io/
ブラウザにおける縦書き最新事情 第1回 縦書き実装の今
https://app.codegrid.net/entry/vertical-script-1