如何使用 JavaScript 和 CSS 為 EPub 閱讀器實作二維分頁 HTML 文件？

用於EPub 閱讀器的二維分頁HTML 文件

問題：

如何在WebKit 中顯示瀏覽器中「頁面」的大小與螢幕大小並包含完整的文字行，以便可以像書一樣閱讀？

解決方案：

使用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中文網其他相關文章！