縦書きに関するHTML、CSS設定の備忘録

小説投稿サイトで縦書き表示にしているところは少ない。そもそも難易度が高いのだろうか、

ということで、気になったので調査してみた。この記事はその備忘録。

まず、小説投稿サイトは100以上あるが、縦書き表示にできるところは10程度しかない。1割程度である。

文芸系の作品を扱っているところもほぼ非対応。

対応しているところを挙げていくと、

・小説家になろう（PDF）
・ハーメルン（CSSスマホのみ、PDF/EPUB）
・暁（PDF）
・星空文庫(EPUB）
・pixiv(CSS)
・GALLERIA（CSS）
・カクヨム（CSS）
・NOVEL DAYS(CSS)
・八雲文庫(CSS)
・創作空間nanamarche(CSS)
・新都社（CSS）
・縦書きnoco（CSS）

大体がCSSで縦書き対応している。PDFやEPUBで対応しているところもちらほら。ハーメルンは全部対応で流石です。

昔は縦書き用のCSS設定が難しかったけど最近だと前より楽になった感じ。といっても取り入れているところは少ないね。まぁあんまり需要がないのかもしれないけど。

ではどういう設定が必要なのか、調べていきます。

その前に参考資料

縦書きWeb普及委員会

カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて - Hatena Developer Blog

CSS3で縦書きにする方法と挙動 - Qiita

htmlとcssで縦書き｜自動で段組みし横スクロールを発生させないレイアウト – メモロッチ

テキストを縦書きで表示する方法と、いろいろなパターン | ホームページ作成や運用支援する｜ホームページTips｜静岡県浜松市を拠点にホームページ制作を行うアドレック事業部

日本語の縦書きサイトで使うCSSプロパティと注意点 | HPcode

表現の幅が広がる！CSSで縦書きレイアウトを導入してみた | ノマクリ

調べてみると色々とありますね。カクヨムさんの生の声もなかなか面白いです。

実装方法

writing-mode: vertical-xx;

writing-modeをvertical-xxに設定する。これで縦書きになる。

writing-mode: vertical-lr; //左から右
writing-mode: vertical-rl; //右から左

writing-mode

通常は右から左なのでvertical-rlを指定すればよい。

これだけで一応縦書きになる。簡単。

とはいえ、このままだと英単語や数字の表示がいまいちということで向きの調整も必要。

今のままだと数字や英単語が横向きになる。

text-orientation: xx;

text-orientation: を指定することで向きを調整できる。

text-orientation

text-orientation: mixed;　//数値や英単語を90度回転　右向き　
text-orientation: upright; //すべて上向き
text-orientation: sideways; //すべて右向き

大体uprightを使うといいのかも。

日付とかで一文字分の空間に収めたい場合はtext-combine-uprightを利用する。

text-combine-upright

桁を指定したい場合はdigits, 全部を収める場合はall

text-combine-upright: digits 2;
text-combine-upright: all

この辺りはどう判断させるかって感じかな？

実際の運用例

カクヨムさんがちょうど記事を出しているのでそれをみてみる。出版社なのでそのあたりこだわっているのかな？

小説の中身だけ縦にしているのではなく、ページ全体を縦にしている。

writing-mode: vertical-rl;

全体指定はこれ。定番。

数字など縦にしたいところにはspanを挿入して縦にしている。

text-combine-upright: all;

規則として

4文字以下なら1文字ずつ縦に積む
5文字以上ならそのまま（横に寝る
3文字以下の数字の並びは縦中横
3文字以下の「!」「?」の並びは縦中横

うーん、表示形式はだいたいJavaScriptで制御しているのかな。

あんまり多くは指定してない感じ。

縦書き普及委員会でのTips

・高さを明示的に指定する。

マークアップ

.exp {
 writing-mode: vertical-rl;
 column-count: 数値;
 column-gap: 数値;
 display: inline-block;
 height: 数値;
 text-align: left;
}

段組みにする場合。

縦方向の文字数は20～40文字程度が限界＿

最低限の指定

なんとなく。

writing-mode: vertical-rl;
width: xx;
height: xx;
overflow: scroll;

とりあえずスクロール付ならこれだけ指定か。

あとは、数値のuprightは別途CSSとJavaScriptでなんとかする。感じ。

また……の方向ぞろえはcenterかなにかでそろえる感じだろう。

マウススクロールはJavaScriptで実装。

もし電子書籍みたいにタップなんかで進める場合はスクロール禁止で一タップで画面を動かす感じにすればOK。多分ハーメルンさんはそうしている。スクロールバーを見せないで一ページ進めるのが正義。はみ出る部分があるかもしれないので一ページのPaddingとかMargin指定に気を付ければいいかも。

スクロールにしてもタップにしても一画面幅をきちんと決めて数値の扱いを決めることが大事。

そんなところ。

とりあえず以上。