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」