CSS ›

CSSで縦書きを表現する

CSSのみで縦書きを表現するための覚え書きです。もともと、ウェブページで日本語の文字組をしっかり行うのは困難で、縦書きが必要なケースも少ないですが、以前に比べるとブラウザのCSS3対応も進んでいると思うので一応メモしておきます。

ところで、横書き文章を縦スクロールして読み進めていく習慣のあるウェブページ上では縦書きの文章を読みづらく感じることがあります。横スクロールしたり、もっかい行頭に戻ったり、など普段と違う操作によるユーザビリティの低下が起きる可能性が高いです。手にとって全体を見渡せるチラシや雑誌などの紙媒体に比べて一覧性の低いモニターならではの話ですが、そもそもブラウザの対応状況もバラバラです。

ただ、今では電子書籍で縦書きの文章も読むし、横へスワイプしてページ移動もするし、でCSSによる縦書きが使える場面も多くなるのではないかなと思っています。

writing-mode

CSS3writing-modeプロパティを使います。まだ正式に採用されていないのでブラウザの対応もまちまちなようですが、ベンダープレフィックスを使うことによって、大半の新しいブラウザをカバーできるようです。 

.tate {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

とりあえず、設定できる値の一覧はMDNが見やすいです。vertical-rlが通常の右から左へ進行する縦書きになりますが、IE用の接頭辞が付いた-ms-writing-modeだけはtb-rlにて対応できるようです。

参考： CSS Writing Modes Level 3
　　　 writing-mode - CSS | MDN

欧文回転（横向きの英数文字を正立する）

欧文回転にはtext-orientationプロパティを使います。writing-modeにて縦書きに設定されている場合のみ有効です。こちらも値の一覧はMDNで確認ですが、実際設定する場合はupright（正立）の一択になると思います。 

.tate {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;

  /* 欧文回転 */
  -webkit-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;
}

参考： text-orientation - CSS | MDN

縦中横

縦中横はtext-combine-uprightプロパティを使いますが、全体的にブラウザのサポート状況はまだ良くないです。値の一覧は見やすいMDNで。

例のようにdigits 2（2桁まで）といった具体的な値も用意されているようですが、サポート状況が悪いため、MDNでも縦書き内の該当テキストにマークアップしてallを設定する方法が紹介されています。 

.tate {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;

  /* 欧文回転 */
  -webkit-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;

  /* 縦中横（ほとんどサポートされていない） */
  -webkit-text-combine-upright: digits 2;
  -ms-text-combine-upright: digits 2;
  text-combine-upright: digits 2;
}

/* 縦書き内の該当するテキストをマークアップして縦中横に設定する方法 */
.tate .yoko {
  -webkit-text-combine-upright: all;
  -ms-text-combine-upright: all;
  text-combine-upright: all;
}

参考： text-combine-upright - CSS | MDN

関連する記事