縦書きに関する実験と覚書

小説投稿サイトで縦書きを実現するために色々と実験したことのまとめの備忘録


・縦書き記法について、

縦書きにするCSSはそんなに難しくなくて、

    writing-mode: vertical-rl;

基本的にこれだけ指定すればよい。

キャプチャ

ただ、英数字に関する部分はJavascriptで縦中横にする部分をしていする。

縦書き記法については厳密ではなくて、いくつかルールがあるようなので以下のを参考にして決めるのがよさそう。

縦組みにおける 文字方向の理論とマークアップ


・横スクロール

縦書きにすると、要素内からあふれたものはすべて横スクロールになる。

色々な小説投稿サイトをみても、横スクロールさせているところが大半。

独自ビュワーで展開しているのは新都社や八雲文庫、また Epub出力できるようにしている星空文庫、パブ―といった電子書籍をターゲットにしているところ。縦書き文庫やハーメルンは独自JSでページ送りを実現している。

・段組みを利用したもの

独自ビューワーやJSを利用しなくてもページ送り風の設定方法としては、columnsを利用したものが挙げられる。

段組み幅を画面サイズにすると画面サイズいっぱいに文字が入るように自動的に段組みされる。わざわざ、文字数と画面幅をJavascriptで計算させなくてもいい感じにしてくれる。

あとはスクロールジャックでマウスホイール、スワイプ、タップでスクロールイベントを制御すれば独自ビュワーと同じような動作が可能となる。

メリットとしては、完全レスポンシブ対応となり、複雑なJavascriptを記述する必要がないこと。が挙げられる。

   columns: 100vh;
   column-gap: 0;
   column-rule: none;

このような記述で画面幅に合わせた段組みが行われる。

なお、scrollToを使って画面スクロールをするためにはoverflow: visible;を指定する。

autoやscrollにすると、正しく画面高さが取得できない。(あふれたものは見えていても要素の大きさは一定となる)visibleにするとあふれた分もきちんとカウントしてくれる。

・スクロールジャック

PC用に、←キーとマウスホイールで移動できるようにする。

スマホ用には指定範囲のタップによる移動とする(スワイプも検討したが、コピペのことも考えると)

function PageScrollUp() {
   scrollTo(0,scrollY-document.body.clientHeight);
}
function PageScrollDown() {
   scrollTo(0,scrollY+document.body.clientHeight);
}

clientHeightで画面高さ、scrollYが現在のスクロール位置

scrollToが指定位置へのスクロール。

動かないように e.preventDefault();をイベントに入れておく。



良ければサポートお願いします。サポート費用はサーバー維持などの開発費に使わせていただきます。