JavaScript と CSS を使用して EPub リーダー用の 2 次元のページ分割された HTML ドキュメントを実装するにはどうすればよいですか?

EPub Reader 用の 2 次元のページ分割された HTML ドキュメント

問題:

WebKit で HTML ドキュメントを表示する方法ブラウザを画面サイズの「ページ」に分割し、完全なテキスト行を含めて本のように読めるようにするにはどうすればよいですか?

解決策:

JavaScript と CSS の使用:

var desiredHeight;
var desiredWidth;
var bodyID = document.getElementsByTagName('body')[0];
totalHeight = bodyID.offsetHeight;
pageCount = Math.floor(totalHeight/desiredHeight) + 1;
bodyID.style.padding = 10; //(optional) prevents clipped letters around the edges
bodyID.style.width = desiredWidth * pageCount;
bodyID.style.height = desiredHeight;
bodyID.style.WebkitColumnCount = pageCount;

この解決策には、body 要素のサイズを設定し、「WebkitColumnCount」を使用して列ベースのレイアウトを有効にして、必要な列数の複数のページを作成することが含まれます。

本文の合計の高さを計算し、希望するページの高さで割ることにより、ページ数が決まります。次に、本文には、ページ数を掛けた特定の幅 (目的のページ幅によって決まります) と、ページの高さと同じ高さが与えられます。最後に、列数が同じページ数に設定されます。

このアプローチにより、画面の境界内でテキスト行が途切れることなく、コンテンツが画面サイズのチャンクに分割されます。また、単一の HTML ドキュメント内で複数のページをシームレスに作成でき、WebKit ベースのブラウザーに本のようなページネーション エクスペリエンスを提供します。

以上がJavaScript と CSS を使用して EPub リーダー用の 2 次元のページ分割された HTML ドキュメントを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。