bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。
http://bookreader.cognitom.com/
もご覧下さい。
ダウンロードについて
最新版のダウンロードは、Downloads からどうぞ。すぐ落としたい場合は、画面右の「Featured Downloads」から。
0.4.1から0.4.5へアップデートする際の注意点
テーマファイルが一部変更になっています。旧バージョンでテーマを自作されている場合など、調整が必要かもしれません。
- ページ移動ボタンのデザイン変更 (それぞれのボタンに画像を用意する形式に)
- 付属のデフォルトテーマで、左マージンが50→25pxに変更
bookreader.jsのメリット
一般的なWEBページの画面構成は縦スクロールが基本です。しかし、スクロールと視線の同期が頻繁に発生し、長文(数十〜数百ページ)を読むには適しません。bookreader.jsでは、テキストを予め複数の「ページ」に分けておき、「ページめくり」のような横スクロールに置き換えることで、視線移動を減らしています。また、bookreader.jsを使うと、HTMLでありながら、テキストを簡単に段組みにすることが可能です。ライブラリを読み込むだけで良いので、既存のページに導入するにも簡便です。
サンプル
評論・物語などの長い文章を表示したサンプルを用意しました。
- 太宰治「走れメロス」
- 森鴎外「高瀬舟」
- 同「高瀬舟縁起」ミニ表示 - 3列表示 - 2列縦長表示
- コナン・ドイル「自転車嬢の危難」(三上於莵吉訳)
以上、青空文庫から。
以上、「川野里子の短歌とエッセイ」から。
組込みサイト例
テキスト中心のサイトでの、bookreader.js 活用例です。トップページなどは 通常の構成で、読み物のページだけbookreader.jsを適用すると良いようです。
- 川野里子の短歌とエッセイ NEW!!
メディア
WEBサイトで紹介いただきました。ありがとうございます。
- ASCII.jp たった6行でWebサイトのUIをガラッと変える
- X-Knowledge Webサイトの文章を横スクロールに変える「bookreader.js」
