CSSで縦書きレイアウト

1.CSSを使った縦書きについて

いきなりですが日本語の文章には縦書きと横書きがあり、我々日本人はどちらでも特に違和感無く読むことができます。

しかし英語圏やヨーロッパでは縦書きの文化に馴染みが無いため、日本の小説や新聞などでは当たり前ですが世界中と繋がるWeb上のサイトや広告・記事などではあまり目にする事が無いかと思います。

だからといってHTML/CSSで縦書きが不可能ということではありません。

今回は日本らしさを感じられる縦書きレイアウトについてまとめてみました。

2.CSSによる縦書きレイアウトの使い方

実はテキストを縦書きにレイアウトすること自体は凄く簡単です。

縦書きにしたい要素に対して"writing-mode: vertical-rl;"を指定するだけです。

昔はこちらのプロパティが存在せず、縦書きにしたい場合にはJavaScriptを使用して無理矢理調整する方法しかありませんでした。

しかしCSS3ではこの"writing-mode: vertical-rl;"が実装され、とても簡単に縦書きを再現できるようになりました。
vertical=縦書き
rl(Right to Left)=右から左へ

という意味です。

ご察しの通り、"writing-mode: vertical-lr;"とすれば縦書きで左から右へテキストを配置させることができます。
（日本語では右上から左下へのレイアウトが基本的なのであまり使用することは無いかもですね）

<p class="tategaki">
   この文章を縦書きにします
</p>

<style>
   .tategaki{
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
   }
</style>

※IEの対応にはベンダープレフィックスが必要になり、少し記述が変わります。

"-ms-writing-mode: tb-rl;"

それぞれ tb=Top to Bottom,rl=Right to Left の略称で、上から下へ、右から左へという意味ですね。

この文章を縦書きにします

このように、簡単に縦書きを使用する事ができます。

また縦書きにしたテキストを要素の右端に寄せたい場合はいくつかやり方がありますがpositionを使用するのが最もベターでしょう。

<p class="tategaki">
   この文章を縦書きにします
</p>

<style>
   .tategaki{
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      position: absolute;
      right: 0;
   }
</style>

3.CSSによる縦書きレイアウトの調整

Hi I am Sudie
Web&Art Director in Kobe

"writing-mode: vertical-lr;"で単純に縦書きにすると、英数字は横向きのまま無理矢理縦書きになっています。

（小説とかだとこう言う形もたまにありますよね）

<p class="tategaki">
   Hi I am Sudie<br>
   Web&Art Director in Kobe
</p>

<style>
   .tategaki{
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      text-orientation: upright;
   }
</style>

こちらが気になる場合は"text-orientation: upright;"で英数字も正しく縦書きに修正することができます。

Hi I am Sudie
Web&Art Director in Kobe

"text-orientation"は初期値がmixedと設定されており、この状態だと日本語は縦に英語は横に設定されています。

逆に日本語も横書きの状態にしたい場合は"text-orientation: sideways;"を指定します。

縦中横

DTPではお馴染みの縦中横も実装できます。

"13日の金曜日"←こういった2桁以上の数字を横にまとめる表示ですね。

この場合まとめたい部分に"text-combine-upright: all;"を指定します。

<p class="tategaki">
   <span class="tatechu">13</span>日の金曜日
</p>

<style>
   .tategaki{
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      text-orientation: upright;
   }
　　.tatechu{
      text-combine-upright: all;
   }
</style>

今回は13に縦中横を設定します。

13日の金曜日

このように表示させる事ができます。

text-align

また縦書きの状態で"text-align: right;"を指定すると要素が下部に寄せられます。

逆に"text-align: left;"を指定すると要素が上部に寄せられますので、首を右方向に傾けて見ていただくとわかりやすいかもしれません。

"line-height"なども同様に横幅の指定となります。

しかしpositionやmargin,paddingを設定する際は傾けた首を元に戻してください。

これらのプロパティは横書きの状態と同様の動きをします。

ルビの配置

縦書きに限った話ではありませんが、小説のようなデザインにする際にはルビも設定したいところだと思います。

こちらはHTMLのrubyタグで設定できますが、縦書きでも正しく右側に表示してくれます。

<p class="tategaki">
   <ruby>SUDIE<rt>スーディー</rt></ruby>
</p>

<style>
   .tategaki{
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      text-orientation: upright;
   }
</style>

SUDIEスーディー

これでHTMLで小説を作る事もできますね！

4.CSSで縦書きレイアウトまとめ

右上から左下へテキストが流れていく縦書きの組版はアジアの一部でしか馴染みの無いレイアウトですが、我々日本人にとってはとても親しみやすく、特に本が好きな方にはとても愛着のあるレイアウトでしょう。

実はそんな縦書きWebコンテンツを広めたいと言う方は多く、縦書きWeb普及委員会という会まであります。
https://tategaki.github.io/

縦書きレイアウトは和風なデザインを制作する際には必須になるかと思われますし、それ以外の場合でも文字組でデザインの差別化を行うには便利かと思います！

横書きの文字組が当たり前のWeb上では少し扱いが難しい部分もあるかと思いますが、是非一度縦書きレイアウトを使用したデザインにチャレンジしてみてください！