如何将HTML内容拆分为适合屏幕的页面？

Question

我正在制作一本图书阅读器网页应用程序。从服务器我得到一个长字符串，其中包含HTML格式的所有书籍文本。它看起来像这样：

<div><p>Alice was beginning....</p></div></div>to get very  ... </div>

我想要的是将此文本拆分成页面。我想得到这样的东西：

<li id='page1'>... text ...</li>
<li id='page2'>... text ...</li>
...

单个页面应填充视口。用户不应该能够滚动书籍文本。相反，他们应该能够使用按钮在页面之间移动。

我需要一些功能来测量所有内容，将其拆分成相同最大高度的碎片，并用页码标记碎片。它还必须考虑图片和长段落（可能不适合单页）。

我怎样才能完成所有这些？

Answer 1

要找出每个内容的维度，您必须让浏览器实际渲染它然后进行测量。另外，如果你想在流的中间打破（例如在段落的中间），事情变得相当困难。 （如果不将它们包含在元素中，则无法测量单个字符/单词。）您还必须禁用缩放等，以便您的测量具有一定的持久意义。总而言之，HTML呈现引擎专门用于呈现流内容，这与分页内容完全相反。

然而，有一些分页方法，你可以采取，实际上它们都不涉及渲染整个文本和进行测量。

滚动覆盖

我尝试的一种方法是简单地

• 将所有文本渲染到容器中，
• 以不会看到滚动条的方式设置容器样式（例如，将其从屏幕上推下），
• 禁用手动滚动和
• 提供“分页”按钮，以编程方式精确滚动“页面”的高度。

该解决方案具有易于实现的优点，但并不完美。图像可以在整个休息时间呈现，用户将无法完整地看到它们。

列

我能在短时间内想到的另一种方法是使用columns。你必须

• 将所有文本渲染到容器中，
• 将容器设置为“无限”宽，并且具有“无限”列数，每列都是页面的宽度，
• 绝对将容器放在其父容器中，
• 使您的“分页”按钮水平移动容器的宽度。

此解决方案需要支持columns的现代浏览器，但使用columns解决了将流内容正确分解为页面的问题。 如果可能的话，我建议先尝试一下。