CSS Writing Modesで縦書きWeb元年の今年こそ縦書きはじめよ！

こんにちは！ご存知酒井です😈
最近もっぱらインターネッツ界隈ではあのwriting-modeが話題となっているようなので、乗るしかないこのビッグウェーブに乗らせていただくことにしました。

writing-modeのおさらい

2017年1月現在で96%のブラウザでサポートされてるということで、ほぼすべての環境で使えるといってよいCSSプロパティですね😇

具体的には、

writing-mode プロパティは、テキストの行のレイアウトを水平または垂直に、ブロックの流れる方向を左向きまたは右向きに定義します。

まったくこの通りなんですが、もっとシンプルに、語弊を恐れずいうと「縦書き用CSSプロパティ」です！！！！！！
紙媒体などではずっと昔から採用され続けている縦書きレイアウトですが、このインターネッツ界隈にも遂にその流れが来ているというわけなのです。
そうなのです、乗るしかない、このビッグウェーブに！！！！

まずは使い方を見てみよう

まずは実際どんな具合に動いてくれるのか、サンプルとともに見ていきましょう☝️

ケース(1) シンプルな縦書き

Sample of writing-mode #1 on jsbin.com

まずはシンプルに、通常の横書きレイアウトから縦書きレイアウトにしてみます。
その場合には、writing-mode: vertical-rlを縦書きにしたいブロック等に指定することでかんたんに実現できます！

とっている値については、

vertical-rl
コンテンツは上から下へ垂直に、右から左へ水平方向に流れます。次の垂直な行は、前の行の左に配置されます。

この仕様の通りなのですが、もっと噛み砕いて言うと、verticalが垂直、rlがR→Lつまり右から左、という意味ですので、とどのつまり、「右から左に、上から下に文章が流れる」ことを意味しているわけですね！ そうです！ 日本語の文章を縦書きで書いたときの文章の流れそのままですね！！

これで話が終われば本当に素敵なんですが、WebKit系のベンダープレフィックス（-webkit-writing-mode: vertical-rl）はまあよいとして、例のごとくIE先生だけがあさっての方向を向いているため、IE先生のためだけのベンダープレフィックスを追加しなければなりません。しかしそれが…

-ms-writing-mode: tb-rl

そもそも値がちゃうやんけ！！！！！！！😂

これについては本当に説明がややこしいので、何も考えずそのまま使ってください。ちなみにEdgeでは既にベンダープレフィックス無しで動きます。

ケース(2) 文章中に半角数字などが含まれる場合

次はこちらをご覧ください。

Sample of writing-mode #2 on jsbin.com

先ほどのケース(1)とまったく同じCSSをあてた別の文章ですが、何か違和感を感じた方はとてもセンスが良い！😮
そう、数字も縦書きの文章にならって横に倒れているのが少し不自然ですね？
そんな場合に便利なのがtext-combine-uprightプロパティです！

text-combine-upright CSS プロパティは、一文字分の空間に挿入する複数文字の組み合わせを指定します。

これも説明文が回りくどいのですが、textをcombine(つなげて)して、upright(直立)させる、とみればわかりやすいですね！
このプロパティを指定する場合は常に値はallをとると考えて問題ないです。
それではこのプロパティを、先ほどの例で横に倒れさせたくない部分に指定してみると…

Sample of writing-mode #3 on jsbin.com

できていますね！✌️
そうですね！ 今度はIEはもちろんWebKit系もあさっての方向を向いていますね！
説明は不要です、このまま覚えてください。

あるいは、直立させたい文字が1文字である場合には、単純に漢数字や全角英数を使うという手段もアリです🐜

よくある縦書きレイアウトの組み方

「使い方はわかった、でもいろいろと普段の横書きとは勝手がちがうんでしょう？」と、思われている方も少なくないでしょう。
ということで、次はかんたんなサンプルとともに実際に縦書きレイアウトを使ってみましょう！

小説風

JS Bin on jsbin.com

縦書きといえば小説ですね！
overflowを適宜あてることで、描画領域内で縦スクロール同様に横スクロールになりますし、
text-align: rightをあてることで、通常右寄せになるものが下寄せになるのです。
試しに上のサンプルのwriting-modeを外してみるとすぐにわかるのですが、通常の横書きのレイアウトにかんたんに戻せるというのも大きなメリットのひとつですね😇

お品書き風

JS Bin on jsbin.com

メニュー表のような、同じ行に横並び（縦並び）でテキストが入っているようなレイアウトには、
これも通常の横書きレイアウトと同じく、display: flexで対応できます！
見た感じでいうと一見、flex-direction: columnなかんじに見えますが、その点はwriting-modeがうまいこと解決してくれるので、慣れるまですこし変な感じですが徐々に慣れていきましょう！
この例でもwriting-modeを外すだけで横書きレイアウトにかんたんに戻すことができます！

一方で、すこし気をつけなければいけないのが、まだwidthやheightについてはイマイチ対応しきれていないので、これらのプロパティは見た通りに指定をしなければなりません。（上の例ではheightですが、横書きにするならwidthにしなければいけない）

アニメタイトル風

Sample of writing-mode #6 on jsbin.com

ちょっと工夫するだけで、アニメのタイトル風のレイアウトなんかもCSSだけで表現できたりします！！

※崩れてみえる方用

ほんとにwriting-modeって素晴らしいですね！

まとめ

今回は何かと話題のwriting-modeについてサンプルを交えながらさわりの部分だけふんわりと紹介させていただきましたが、いかがでしたでしょうか？🙈

今回の記事を書くにあたったきっかけが、縦書きWeb普及委員会さんのたてよこWebアワードなる企画でして、
今年2017年2月末まで縦書きを使用したWebサイトを募集しているようなので、みなさんもぜひ参加してみてはいかがでしょう〜
ぼくはまだまだ修行の身なので応募なんておこがましいのですが…

ではでは
今年もよろしくお願いいたします🙇