我正在制作一个图书阅读器 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)。用户不应该能够滚动书籍文本。相反,他们应该能够使用按钮在页面之间移动。
我需要一些功能来测量所有内容,将其分成具有相同最大高度的部分,并用页码标记这些部分。它还必须考虑图片和长段落(可能无法放在一个页面上)。
我怎样才能完成这一切?
最佳答案
要找出每一位内容的尺寸,您必须让浏览器实际呈现它,然后对其进行测量。此外,如果你想在流程中间中断(例如在段落中间),事情会变得非常困难。 (如果不将它们包装在元素中,您就无法测量单个字符/单词。)您还必须禁用缩放等,以便您的测量具有一些持久的意义。总而言之,HTML 呈现引擎是专门为呈现流内容而定制的,这与分页内容几乎相反。
但是,您可以采用一些分页方法,但实际上这两种方法都不会涉及呈现整个文本和进行测量。
滚动覆盖
我尝试的一种方法是简单地
- 将所有文本渲染到一个容器中,
- 以滚动条不可见的方式设置容器的样式(例如,将其推离屏幕),
- 禁用手动滚动,以及
- 提供“分页”按钮,以编程方式精确滚动“页面”的高度。
此解决方案的优点是易于实现,但并不完美。图像可以在中断期间呈现,用户将无法看到它们的整体。
列
我在短时间内想到的唯一其他方法是使用 columns .你必须
- 将所有文本渲染到一个容器中,
- 将容器设置为“无限”宽并具有“无限”个列,每个列的宽度为页面宽度,
- 将容器绝对定位在其父容器中,
- 让您的“分页”按钮按页面宽度水平移动容器。
此解决方案需要支持 columns
的现代浏览器,但使用 columns
可以解决将流内容正确分解为页面的问题。 如果可能的话,我建议先尝试这个。
关于javascript - 如何将 HTML 内容拆分为适合屏幕的页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27354789/