2018.8.4

CSSで縦書きを導入しよう

どうも、kuroro0319です。

たてよこWebアワード等があってから、ちょっとづづ普及してきた印象がありますが、
最近は案件でも少しずつ縦書きを導入することが増えてきました。
というわけで、今回はCSSで縦書きを導入する方法をメモがてら書いていきます。

何故、Webサイトで縦書きができなかったのか？

基本的にWebサイトの考え方自体が横書きの英語圏で生まれたものなので、
必然的に横書きの左から右に読む形式が主流となりました。
しかも、縦書きの文化はかなり世界的に見ても少ないようで、
みんな大好きWikipediaさんにも、日本語、中国語、モンゴル語などの
限られた地域でしか使われていないことが書いてあります。
そういう背景もあり、日本人の親しんできた縦書きという形式は
Webサイトではほとんど見られることはありませんでした。
そもそも仕様を作る側としては縦書きの必要性を感じてなかったんでしょうね。

どうやったら縦書きが達成できるか？

ちなみに、これまでは縦書きをWebサイトで使用したい場合は画像を使うか、
Javascriptで無理やりやる、ちょっと前ならFlashを使うなどが一般的で、
非常に手間がかかり使いづらいものでした。
しかし、最近のブラウザでは「writing-mode」というCSSプロパティを使うことで、
比較的簡単に実装できるようになりました。
以下のように使います。

-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;

これは縦書きのテキスト確認用のサンプルです。これは縦書きのテキスト確認用のサンプルです。これは縦書きのテキスト確認用のサンプルです。これは縦書きのテキスト確認用のサンプルです。これは縦書きのテキスト確認用のサンプルです。これは縦書きのテキスト確認用のサンプルです。これは縦書きのテキスト確認用のサンプルです。これは縦書きのテキスト確認用のサンプルです。これは縦書きのテキスト確認用のサンプルです。これは縦書きのテキスト確認用のサンプルです。これは縦書きのテキスト確認用のサンプルです。これは縦書きのテキスト確認用のサンプルです。これは縦書きのテキスト確認用のサンプルです。これは縦書きのテキスト確認用のサンプルです。これは縦書きのテキスト確認用のサンプルです。

writing-modeとは？

元々は忌まわしきIEだけの独自拡張機能だったようですが、
CSS3から正式に追加されたプロパティになります。
今はほとんどのブラウザで使えますが、ベンダープレフィックスをつけないと
動作しないブラウザもあるので、ベンダープレフィックスはつけておきましょう。
右から左への縦書きだけでなく、左から右への縦書きにも対応しています。
あまり使用しないと思いますが、横書きのプロパティもあります。

-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;

これは縦書きの左から右へのテキスト確認用のサンプルです。これは縦書きの左から右へのテキスト確認用のサンプルです。これは縦書きの左から右へのテキスト確認用のサンプルです。これは縦書きの左から右へのテキスト確認用のサンプルです。これは縦書きの左から右へのテキスト確認用のサンプルです。

-webkit-writing-mode: horizon-tb;
-ms-writing-mode: tb-lr;
writing-mode: horizon-tb;

これは横書きのテキスト確認用のサンプルです。これは横書きのテキスト確認用のサンプルです。これは横書きのテキスト確認用のサンプルです。これは横書きのテキスト確認用のサンプルです。これは横書きのテキスト確認用のサンプルです。

文字中の英数字記号の扱い

縦書きが実装できるのはわかりましたが、
ここで心配になるのは文中の英数字記号の扱いです。
PhotoshopやIllustratorなどのデザインソフトには便利な「縦中横」機能がありますが、
実はCSSにも同様の機能を持ったプロパティが存在しています。
それはtext-orientationとtext-combine-uprightです。

text-orientation: upright;

これは縦書きのテキスト確認用のサンプルです。ABCDEFGHIKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzです。012345678910です。@<about>-=?.ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺａｂｃｄｅｆｇｈｉｊｋｌｍｎｐｐｑｒｓｔｕｖｗｘｙｚです。０１２３４５６７８９１０です。＠＜ＡＢＯＵＴ＞ー＝？。

まずはtext-orientationから見ていきましょう。
これは全部の英数字記号を正立させるというものです。
記号は一部正立してないですね。
「＜」などの記号や全角の英数字はデフォルトで正立してるみたいです。
upright以外にもプロパティはありますが、現状はほぼ使わないので割愛します。
IE11やEdgeには効きません。さらにバグがある可能性があるので、使わない方がいいでしょう。
また、Chrome、Safari、Firefoxでも実装状況が違い、見え方が変わります。

-ms-text-combine-horizontal: all;
text-combine-upright: all;

これは縦書きのテキスト確認用のサンプルです。ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzです。012345678910です。@< about >-=?.ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺａｂｃｄｅｆｇｈｉｊｋｌｍｎｐｐｑｒｓｔｕｖｗｘｙｚです。０１２３４５６７８９１０です。＠＜ＡＢＯＵＴ＞ー＝？。

次にtext-combine-uprightを見ていきましょう。
こちらは全ての指定した要素を縦中横にするというものです。
無理やり1文字分に収めようとしてくれます。
IE11はプレフィックスをつけた独自拡張で対応できます。
ただ、IE11とEdgeでは半角の英数字記号が2倍の幅に拡大されてしまうので、
使うのは半角の2桁〜3桁の数字のみにしておいた方がいいかもしれません。