Question

如何在屏幕大小的块中拆分HTML文件的内容，以便在WebKit浏览器中“分页”？

每个“页面”应显示完整的文本量。这意味着不得在屏幕的顶部或底部边框中将一行文本切成两半。

修改

此问题最初标记为“Android”，因为我的目的是构建Android ePub阅读器。但是，看起来该解决方案只能使用JavaScript和CSS实现，因此我扩大了问题的范围，使其与平台无关。

Answer 1

在Dan的答案基础上，这是我解决这个问题的方法，直到现在我一直在努力解决这个问题。（这个JS适用于iOS Webkit，不保证Android，但请让我知道结果）

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;

希望这会有所帮助......

Answer 2

根据经验，即使对于准系统观众来说，也希望花费大量时间。 ePub阅读器实际上是我开始学习C＃时的第一个大项目，但ePub标准肯定非常复杂。

您可以在此处找到ePub规范的最新版本： http://www.idpf.org/specs.htm 其中包括OPS（开放出版物结构），OPF（开放式包装格式）和OCF（OEBPS容器格式）。

另外，如果它对你有帮助，这里是我开始的项目的C＃源代码的链接：

https://www.dropbox.com/sh/50kxcr29831t854/MDITIklW3I/ePub%20Test.zip

它根本没有充实;我好几个月都没玩过，但是如果我没记错的话，只需在调试目录中粘贴一个ePub，当你运行程序时只需输入名称的某些部分（例如在圆顶下，只需输入“圆顶”）它将显示该书的详细信息。

我让它适用于几本书，但Google Books中的任何电子书都完全破坏了它。与来自其他来源的书籍相比，他们对ePub（至少对我而言）有一个完全奇怪的实现。

无论如何，希望那里的一些结构代码可以帮助你！

Answer 3

我也必须编写类似这样的代码，我的（工作）解决方案就是：

您必须将这些行应用于webview ...

    webView_.getSettings().setUseWideViewPort(true);
    webView_.getSettings().setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);

此外，你必须注入一些JavaScript。我的活动的不同比例和webview中呈现的内容都有很多问题，因此我的解决方案不会从“外部”中获取任何值。

    webView_.setWebViewClient(new WebViewClient(){

            public void onPageFinished(WebView view, String url) {
                injectJavascript();
            }

        });

[...]

    public void injectJavascript() {
        String js = "javascript:function initialize() { " +
                "var d = document.getElementsByTagName('body')[0];" +
                "var ourH = window.innerHeight; " +
                "var ourW = window.innerWidth; " + 
                "var fullH = d.offsetHeight; " +
                "var pageCount = Math.floor(fullH/ourH)+1;" +
                "var currentPage = 0; " +
                "var newW = pageCount*ourW; " +
                "d.style.height = ourH+'px';" +
                "d.style.width = newW+'px';" +
                "d.style.webkitColumnGap = '2px'; " +
                "d.style.margin = 0; " +
                "d.style.webkitColumnCount = pageCount;" +
                "}";
        webView_.loadUrl(js);
        webView_.loadUrl("javascript:initialize()");
    }

享受：）

Answer 4

我最近尝试过类似的东西，并添加了一些CSS样式，将布局更改为水平而不是垂直。这给了我预期的效果，而不必以任何方式修改Epub的内容。

此代码应该。

mWebView.setWebViewClient(new WebViewClient() {
    public void onPageFinished(WebView view, String url) {

        // Column Count is just the number of 'screens' of text. Add one for partial 'screens'
        int columnCount = Math.floor(view.getHeight() / view.getWidth())+1;

        // Must be expressed as a percentage. If not set then the WebView will not stretch to give the desired effect.
        int columnWidth = columnCount * 100;

        String js = "var d = document.getElementsByTagName('body')[0];" + 
            "d.style.WebkitColumnCount=" + columnCount + ";" + 
            "d.style.WebkitColumnWidth='" + columnWidth + "%';";
        mWebView.loadUrl("javascript:(function(){" + js + "})()");
    }
});

mWebView.loadUrl("file:///android_asset/chapter.xml");

所以，基本上你是在注入章节之后注入JavaScript来改变body元素的样式（非常重要）。这种方法的唯一缺点是当内容中的图像计算出的列数歪斜时。虽然它不应该太难修复。我的尝试是注入一些JavaScript来为DOM中没有任何图像的所有图像添加宽度和高度属性。

希望它有所帮助。

-Dan

Answer 5

也许可以使用XSL-FO。对于移动设备而言，这似乎很重要，也许它有点过分，但它应该有效，你不必实现良好分页的复杂性（例如，如何确保每个屏幕不会将文本切成两半）

基本理念是：

使用XSLT将XHTML（以及其他EPUB内容）转换为XSL-FO。
使用XSL-FO处理器将XSL-FO渲染为可以在移动设备上显示的分页格式，例如PDF（可以显示吗？）

我不知道是否有适用于Android的XSL-FO处理器。你可以尝试Apache FOP。 RenderX（XSL-FO处理器）具有paged-HTML output option的优势，但我不知道它是否可以在Android上运行。

Answer 6

有几种方法可以做到。如果每一行都在它自己的元素中，你所要做的就是检查它的一条边是否在视图之外（浏览器或“书页”）。

如果您想知道预先有多少“页面”，只需将它们临时移动到视图中并获取页面结束的行。这可能会很慢，因为浏览器需要页面重排以了解其中的任何内容。

否则我认为您可以使用HTML5 canvas元素来测量文本和/或绘制文本。

有关此处的一些信息： https://developer.mozilla.org/en/Drawing_text_using_a_canvas http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/demo/8_2_canvas_measureText.html

Answer 7

最近出现了同样的问题，受到答案的启发，发现了一个使用CSS3的column- *属性的简单CSS解决方案：

/* CSS */
.chapter {
    width: 600px;
    padding: 60px 10px;
    -webkit-column-gap: 40px;
    -webkit-column-width: 150px;
    -webkit-column-count: 2;
    height:400px;
}

/* HTML */
<div class="chapter">
    your long lorem ipsum arbitrary HTML
</div>

上面的例子在视网膜iPhone上给出了很好的效果。使用不同的属性可以在页面之间产生不同的间距。

如果您需要支持多个章节，例如需要在新页面上开始，那么github上有一个XCode 5示例：https://github.com/dmrschmidt/ios_uiwebview_pagination

Answer 8

我能够通过WebView改进Nacho's解决方案以获得水平滑动分页效果。您可以找到解决方案here和示例code。

修改

解决方案代码。

<强> MainActivity.java

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); } wv = (HorizontalWebView) findViewById(R.id.web_view); wv.getSettings().setJavaScriptEnabled(true); wv.setWebViewClient(new WebViewClient() { public void onPageFinished(WebView view, String url) { injectJavascript(); } }); wv.setWebChromeClient(new WebChromeClient() { @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { int pageCount = Integer.parseInt(message); wv.setPageCount(pageCount); result.confirm(); return true; } }); wv.loadUrl("file:///android_asset/ch03.html"); // now it will not fail here } private void injectJavascript() { String js = "function initialize(){\n" + " var d = document.getElementsByTagName('body')[0];\n" + " var ourH = window.innerHeight;\n" + " var ourW = window.innerWidth;\n" + " var fullH = d.offsetHeight;\n" + " var pageCount = Math.floor(fullH/ourH)+1;\n" + " var currentPage = 0;\n" + " var newW = pageCount*ourW;\n" + " d.style.height = ourH+'px';\n" + " d.style.width = newW+'px';\n" + " d.style.margin = 0;\n" + " d.style.webkitColumnCount = pageCount;\n" + " return pageCount;\n" + "}"; wv.loadUrl("javascript:" + js); wv.loadUrl("javascript:alert(initialize())"); }

在我的WebChromeClient的onJsAlert中获取我传递给自定义HorizontalWebView以实现分页效果的水平页面数

<强> HorizontalWebView.java

public class HorizontalWebView extends WebView { private float x1 = -1; private int pageCount = 0; public HorizontalWebView(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: x1 = event.getX(); break; case MotionEvent.ACTION_UP: float x2 = event.getX(); float deltaX = x2 - x1; if (Math.abs(deltaX) > 100) { // Left to Right swipe action if (x2 > x1) { turnPageLeft(); return true; } // Right to left swipe action else { turnPageRight(); return true; } } break; } return true; } private int current_x = 0; private void turnPageLeft() { if (getCurrentPage() > 0) { int scrollX = getPrevPagePosition(); loadAnimation(scrollX); current_x = scrollX; scrollTo(scrollX, 0); } } private int getPrevPagePosition() { int prevPage = getCurrentPage() - 1; return (int) Math.ceil(prevPage * this.getMeasuredWidth()); } private void turnPageRight() { if (getCurrentPage() < pageCount - 1) { int scrollX = getNextPagePosition(); loadAnimation(scrollX); current_x = scrollX; scrollTo(scrollX, 0); } } private void loadAnimation(int scrollX) { ObjectAnimator anim = ObjectAnimator.ofInt(this, "scrollX", current_x, scrollX); anim.setDuration(500); anim.setInterpolator(new LinearInterpolator()); anim.start(); } private int getNextPagePosition() { int nextPage = getCurrentPage() + 1; return (int) Math.ceil(nextPage * this.getMeasuredWidth()); } public int getCurrentPage() { return (int) (Math.ceil((double) getScrollX() / this.getMeasuredWidth())); } public void setPageCount(int pageCount) { this.pageCount = pageCount; } }

Answer 9

您可以将页面拆分为单独的XHTML文件并将其存储在文件夹中。例如：page01，page02。然后，您可以逐个渲染这些页面。

Answer 10

你可以查看http://www.litres.ru/static/OR/or.html?data=/static/trials/00/42/47/00424722.gur.html&art=424722&user=0&trial=1，但代码可能会被严重混淆，所以只需使用Firebug来检查DOM。

如果链接不起作用，评论 - 会给你修复。

HTML书籍式的分页

10 个答案: