問題:
如何在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中文網其他相關文章!