如何将 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可以解决将流内容正确分解为页面的问题。如果可能的话，我建议先尝试这个。