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

Question

我正在制作一个图书阅读器 Web 应用程序。从服务器我得到一个长字符串，其中包含 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 解决了将流内容正确分解为页面的问题。 如果可能的话，我建议先尝试一下。