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

How can I split HTML content into pages that fit the screen?

本文关键字：屏幕 拆分 HTML      更新时间：2023-09-26

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

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

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

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

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

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

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

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

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

滚动覆盖

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

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

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

列

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

  • 将所有文本呈现到容器中，
  • 将容器样式设置为"无限"宽，并具有"无限"数量的列，每个列的宽度为页面的宽度，
  • 将容器绝对放置在其父容器中，
  • 使您的"分页"按钮将容器水平移动页面宽度。

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

相关文章：