如何将HTML文档拆分为电子书页面？

对于iPhone电子书应用程序，我需要将任意长的HTML文档拆分为完全适合一个屏幕的页面。如果我只是简单地使用UIWebView，那么最底层的行往往只显示一部分：其余的行从视图的边缘消失

因此，我假设我需要知道UIWebView在给定源HTML的情况下会显示多少完整的行（或字符），然后向其提供准确的数据量。这可能涉及大量计算，用户还需要能够更改字体和大小

我不知道这是否可能，尽管像Stanza这样的应用程序会获取HTML（epub）文件并对它们进行分页。我已经很久没有研究JavaScript了，这是一个值得研究的选项吗

非常感谢您的任何建议

更新

因此，我找到了一个可能的解决方案，使用JavaScript用每个元素的大小和位置来注释DOM树。然后，应该可以重新构造树（使用内置XSLT或JavaScript），将其切割成完全适合屏幕的页面

这里剩下的问题是，这总是会打破段落边界上的页面，因为在低于p元素的级别上无法访问文本。也许可以通过将文本解析为单词，将每个单词封装在SPAN标记中，重复上述测量过程，然后仅显示适合屏幕的SPAN元素，将其余元素插入下一页的前面来解决这一问题

---

所有这些听起来相当复杂。我说的有道理吗？有更简单的方法吗？

您应该看看PagedMedia CSS模块： CSS3也支持多列布局（谷歌的“CSS3 multicol”。我没有足够的因果报应在这里包括第二个链接：-）

---

关于您的更新：如何布局一个页面，然后在文本部分使用带有overflow:hidden的DIV。下一步是在上面覆盖一个透明项，根据一些导航控件（或手势）以编程方式向上或向下滚动DIV页面高度像素的内部内容。

另一个选项是让一个父级

具有多个css3列：，。
这适用于Android：

<style type='text/css'>
div {
    width: 1024px; // calculated
    -webkit-column-gap: 0px;
    -webkit-column-width: 320px; // calculated
    }
p {
    text-align: justify;
    padding:10px;
    }
</style>

div{
宽度：1024px；//已计算
-webkit柱间隙：0px；
-webkit列宽：320px；//已计算
}
p{
文本对齐：对齐；
填充：10px；
}

CSS Multicl建议非常有趣！但是，我希望可以回答另一个问题：从将一个或多个长元素拆分为列，到在WebView中呈现这些列中的一个特定列，您会怎么做？DOM没有更改，因此您无法选择元素并对其进行渲染。我遗漏了什么？

谢谢，有用的建议！遗憾的是WebKit甚至没有实现CSS2@page规则。多列支持显然仍然是实验性的，但也许我可以稍微处理一下。我不知道我是否可以拥有一个足够宽的UIWebView，以满足我需要呈现的列数（每页1列），但这是值得研究的。我还没有在iPhone上尝试@page，但我最肯定的是苹果会在iPad上支持它，至少在即将发布的更新中是这样。multicolumn在最新版本的webkit中工作得很好（不确定iphone tho）。是的，早期的建议涉及使用css列。我在Safari 3.1上试用过，看起来不错，所以我将在iPhone上研究它。如何计算div的宽度？使用P填充与使用-webkig列间距是最好的主意！webkit column gap在每个不同的浏览器上添加了额外的不可预测的像素…我还没有深入研究过这一点，我也不知道如何只渲染一列。但我假设您可以使用JavaScript滚动到所需的列。只要视口的大小与柱的尺寸相符，则只有该柱可见。当然，我真的希望所有这些不会导致惊人的内存需求。