问题:
如何在 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中文网其他相关文章!