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

いつの間にか、ウェブサイトの縦書きが実用レベルになっていたようです。

しかも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

 - ウェブデザイン CSS