javascript - 如何将 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>
...

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

我需要一些功能来测量所有内容，将其分成具有相同最大高度的部分，并用页码标记这些部分。它还必须考虑图片和长段落(可能无法放在一个页面上)。

我怎样才能完成这一切？

Answer 1

要找出每一位内容的尺寸，您必须让浏览器实际呈现它，然后对其进行测量。此外，如果你想在流程中间中断(例如在段落中间)，事情会变得非常困难。 (如果不将它们包装在元素中，您就无法测量单个字符/单词。)您还必须禁用缩放等，以便您的测量具有一些持久的意义。总而言之，HTML 呈现引擎是专门为呈现流内容而定制的，这与分页内容几乎相反。

但是，您可以采用一些分页方法，但实际上这两种方法都不会涉及呈现整个文本和进行测量。

滚动覆盖

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

• 将所有文本渲染到一个容器中，
• 以滚动条不可见的方式设置容器的样式(例如，将其推离屏幕)，
• 禁用手动滚动，以及
• 提供“分页”按钮，以编程方式精确滚动“页面”的高度。

此解决方案的优点是易于实现，但并不完美。图像可以在中断期间呈现，用户将无法看到它们的整体。

列

我在短时间内想到的唯一其他方法是使用 columns .你必须

• 将所有文本渲染到一个容器中，
• 将容器设置为“无限”宽并具有“无限”个列，每个列的宽度为页面宽度，
• 将容器绝对定位在其父容器中，
• 让您的“分页”按钮按页面宽度水平移动容器。

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