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.

推荐答案

建立在丹的答案在这里是我的解决方案这个问题，我一直在努力自己，直到刚才。 （这个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屋！