HTML 书籍式分页 [英] HTML book-like pagination

问题描述

如何将 HTML 文件的内容拆分为屏幕大小的块以在 WebKit 浏览器中对其进行分页"?

How can I split the content of a HTML file in screen-sized chunks to "paginate" it in a WebKit browser?

每个页面"应显示完整数量的文本.这意味着一行文本不得在屏幕的顶部或底部边框处被切成两半.

Each "page" should show a complete amount of text. This means that a line of text must not be cut in half in the top or bottom border of the screen.

编辑

这个问题最初被标记为Android"，因为我的目的是构建一个 Android ePub 阅读器.但是，该解决方案似乎可以仅使用 JavaScript 和 CSS 来实现，因此我扩大了问题的范围，使其与平台无关.

This question was originally tagged "Android" as my intent is to build an Android ePub reader. However, it appears that the solution can be implemented just with JavaScript and CSS so I broadened the scope of the question to make it platform-independent.

推荐答案

以 Dan 的回答为基础，这是我对这个问题的解决方案，直到现在我都在为此苦苦挣扎.(此JS适用于iOS Webkit，不保证适用于Android，但请告诉我结果)

Building on Dan's answer here is my solution for this problem, with which I was struggling myself until just now. (this JS works on iOS Webkit, no guarantees for android, but please let me know the results)

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;

希望这有帮助...

这篇关于HTML 书籍式分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！