CSS column-count:2 + 高さ制限による横スクロール + スペースキーで横スクロール

font-size
--line-of-chars
innerWidth
column-count
clientHeigh

読みやすくするために画面分割した

　日本語は横書きだと35〜38字くらいが読みやすいとされている。それに近づけるとアス比16:9の主流なディスプレイではフォントサイズが非常に大きくなってしまう。そこで文庫本のように画面分割することにした。

　横幅の表示領域が1280px以上なら画面を縦中央で２分割する。

　分割できたのはいいが、分割の仕方に問題がある。期待していたのは左から右に続くこと。でも実際は全体の前半が左、後半が右になってしまった。このせいで文章を読むために必要なスクロール数が一気に増える。

　解決案としてスクロール方向を横にする方法が考えられる。その実装方法はCSSでbodyのheightサイズを画面サイズ値で固定すること。こうすれば、あとは横方向にスクロールするしかなくなる。

　新たな問題としてスクロール操作ができなくなる問題がある。縦スクロールならキーボードのスペースやマウスホイールで操作できた。けれど横スクロールはキーボードの矢印キー←や→でしかできなかった。マウスではチルトでも不可能だった。スクロールをドラッグするしかない。スマホは未調査。スライドすればいいのかな？

スクロール

　キーイベントでスクロールを実装した。Spaceキーを押すと右へスクロールする。Shift+Spaceキーで左へスクロールする。

　スクロールをsmoothにしたとき、スクロール中に何度もスペースキーを押しまくると移動位置が狂ってしまうことに気づいた。これを解決するにはイベントの開始、途中、完了判定が必要。だが、そんなものはない。すごく泥臭い対処しかできなさそう。面倒なのでsmoothをやめてアニメを消した。

　最終ページからShift+Spaceキーで左へスクロールするとき、ページ数が微妙にズレてゆくことに気づいた。原因はおそらく最後のページだけcolumn-gapがないからか？　でも１ページごとにズレが大きくなっていくような？　となると1pxのcolumn-rule-widthか？　1px未満ずつズレている。スクロール位置をセットするときはwindow.scrollBy()で実行しているせいだと思われる。キー操作するたびに誤差が生じてしまうのだろう。

ページ表示

　ページ数表示がほしい。画面中央にある線のところに現在ページ数と全ページ数を分数表示したい。問題はその書字方向が縦になるかもしれないということ。

　画面中央の最前面にページ数を表示した。

　画面分割しないときは非表示にするようにした。

ページメディア指定した

　CSSのbreak-before:column;で指定した要素の開始位置から新しいページとして表示するようにした。

　現在の表示領域サイズに応じてページの切れ目になる要素を探し出し、それにこのCSSをセットすればページ設定できたことになる。

　あとはJavaScriptのscrollIntoView()でその要素を指定すれば、座標の誤差なくきっちり綺麗に移動できるはず。

　ただ、本当にそんな面倒くさすぎる処理を実装せねばならないのか疑問。

　そもそも今回の場合は画面を左右別々に分け、それぞれ縦スクロールするような作りが相応しいような気がする。たぶんそれはHTMLのiframe要素で実装する。そう考えると、画面分割の方法は色々あることに気づいた。

水増し

１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０

あ