javascript - 显示动态 html 内容，如 epub/ebook，而不将 html 转换为 epub 格式？

Question

我想使用动态 html 作为源创建类似于 epub/ebook 阅读器(如 Kindle 应用程序或 iBooks)的响应式、移动优化阅读体验。

想象一下需要大量垂直滚动才能阅读的长篇文章或博客文章，尤其是在小型移动设备上。我想做的是将长页面分成多个全屏部分，允许用户使用左/右导航箭头和/或滑动手势来“翻页”文章。

有许多可用的 JS 库可以创建预定义幻灯片的“幻灯片放映”或“轮播”(使用 div 或其他容器元素)。但我希望文本和 html 内容能够动态重新流动以适应任何设备视口(viewport)并且仍然可读......就像 epub/ebook 用户界面，如 Kindle 应用程序或 iBooks。因此，对于同一篇文章，手机上的“页面”将比平板电脑或桌面视口(viewport)上的“页面”多得多，并且如果/当视口(viewport)大小发生变化时，这些“页面”将需要动态创建/调整(就像在移动设备上从纵向切换到横向)。

这是一个 javascript .epub 阅读器的例子:epub.js

...注意响应行为。当您调整视口(viewport)大小时，所有文本都会重新排列以适应可用空间，从而增加或减少“页面”的总数。问题是 epub.js 需要一个 .epub 文件作为它的源。

我想要的是 html 页面的相同用户界面和功能。

我已经搜索并搜索了某种可以开箱即用的库，但一直找不到任何东西。

我意识到我可以使用转换脚本将我的 html 页面转换为 .epub 文件，然后使用 epub.js 在浏览器中呈现该文件，但这看起来非常迂回和笨拙。如果以 html 作为直接源来模仿或模拟 .epub 阅读器用户体验，渲染/模仿客户端响应式电子书用户体验，那就更好了。

有谁知道这样的东西是否已经存在，或者我该如何自己构建它？

关键功能是动态/响应式文本重排。当视口(viewport)尺寸减小时，文本/内容需要回流到下一个“页面”以避免任何垂直滚动的需要。我不知道如何有效地做到这一点。如果我自己编写代码，我可能会使用 jQuery Columnize 插件之类的东西，将所有列设置为 width: 100vw;高度:100vh，这样每一列就像一个“页面”，然后弄清楚如何在这些“页面”之间创建滑动 UI。

非常感谢任何帮助!

Answer 1

如果 html 页面很复杂，例如具有精确定位的元素或图像，这将变得非常困难。但是，如果(如在 epub.js 示例中)内容仅包含标题和段落，则这是可以实现的。

基本思想是逐步添加内容，直到页面溢出。通过跟踪我们开始和停止添加内容的位置，点击到下一页就是将页面开始更改为上一页结束的情况(反之亦然，如果您要返回)。

将内容 reshape 为页面的过程

假设您将所有内容都放在一个长字符串中。首先将所有内容拆分为一组单词和标签。它不像 < 之间的空格那样用空格分割那么容易和 >应该被忽略(你想在每个标签中保留类名等)。标签也应该分开，即使标签和单词之间没有空格也是如此。

接下来您需要一个函数来检查元素的内容是否溢出元素。 This question有一个复制粘贴解决方案。

你需要两个变量，pageStart和 pageEnd , 以跟踪数组中的哪些索引是当前页面的开头和结尾。

从 pageStart 中的索引开始您将数组中的元素作为内容添加到页面，在每次添加后检查内容是否溢出。当它们确实溢出时，您将达到的索引减 1 作为 pageEnd 的索引。 .

跨分页符保留标签

现在，如果全部都是 ticketyboo，那么这应该可以很好地填充页面。当您想转到下一页时，设置新的 pageStart作为pageEnd + 1并重复这个过程。但是，您可能需要解决一些问题。

首先，如果页面在段落中间溢出怎么办？严格来说结束标签，</p> , 在 HTML 中不是必需的，因此我们无需担心。但是下一页的开头呢？它将缺少一个开始标签，这是一个主要问题。所以我们确保我们检查页面的内容是否以标签开头，如果不是，那么我们将获得当前 pageStart 之前最接近的开始标签。 (只需沿着数组从 pageStart 返回)并将其添加到其余内容之前。

其次，如示例所示，如果段落继续到下一页，则当前页的最后一行仍然对齐。您需要检查是否 pageEnd在段落中间，如果是，请添加 syle="text-align-last:justify;"到该段落的开始标记。

示例实现

显示所有这些操作的笔位于 https://codepen.io/anon/pen/ZMJMZZ

HTML 页面包含一个长元素中的所有内容。内容直接从容器中取出#page并根据 #page 的大小改成页面.如果段落中出现分页符，我还没有实现证明最后一行的合理性。调整 #page 的大小css 中的元素并查看内容如何自行调整大小 - 请注意，由于页面大小是固定的，因此您必须使用向前和向后单击来触发重新计算。一旦将页面大小绑定(bind)到窗口大小，动态重新计算页面只需将调整大小事件监听器添加到调用 fillPage 的窗口即可。 .

毫无疑问有很多错误，确实有时它会显示不正确的东西(例如在页面的开头或结尾跳过或重复单词)，但这应该让您知道从哪里开始。