如何使用 JavaScript 和 CSS 为 EPub 阅读器实现二维分页 HTML 文档？

用于 EPub 阅读器的二维分页 HTML 文档

问题：

如何在 WebKit 中显示 HTML 文档浏览器中“页面”的大小与屏幕大小并包含完整的文本行，以便可以像书一样阅读？

解决方案：

使用 JavaScript 和 CSS：

var desiredHeight;
var desiredWidth;
var bodyID = document.getElementsByTagName('body')[0];
totalHeight = bodyID.offsetHeight;
pageCount = Math.floor(totalHeight/desiredHeight) + 1;
bodyID.style.padding = 10; //(optional) prevents clipped letters around the edges
bodyID.style.width = desiredWidth * pageCount;
bodyID.style.height = desiredHeight;
bodyID.style.WebkitColumnCount = pageCount;

此解决方案涉及设置 body 元素的尺寸并使用“WebkitColumnCount”启用基于列的布局，以创建具有所需列数的多个页面。

通过计算正文的总高度并将其除以所需的页面高度，即可确定页数。然后，正文被赋予特定的宽度（由所需的页面宽度确定）乘以页面数，以及等于页面高度的高度。最后，将列数设置为相同的页数。

这种方法可确保内容被划分为屏幕大小的块，并且屏幕边界内不会切断任何文本行。它还允许在单个 HTML 文档中无缝创建多个页面，为基于 WebKit 的浏览器提供类似书籍的分页体验。

以上是如何使用 JavaScript 和 CSS 为 EPub 阅读器实现二维分页 HTML 文档？的详细内容。更多信息请关注PHP中文网其他相关文章！