How to split up Epub Html into pages according to screen size

Question

I'm developing an Android application that reads ebooks (in epub format) and as for now I'm using Paul Siegeman's epublib library that is really a very good epub reader but it has some limitations, for example and the one I need, you can't move through pages horizontally (as you do reading a real book) so I need my own implementation of it, but I'm stuck.

The method that actually reads the epub and then puts it inside a webview is the next:

private void openEpub(String bookFilename){

    WebView webView = (WebView) findViewById(R.id.webView);

    nl.siegmann.epublib.domain.Book book=null;
    try {
        book = (new EpubReader()).readEpub(new FileInputStream(Environment.getExternalStorageDirectory().getPath() + "/" + bookFilename));
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }

    String baseUrl = Environment.getExternalStorageDirectory().getPath() + "/";
    String data=null;
    try {
        data = new String(book.getContents().get(1).getData());
    } catch (IOException e) {
        e.printStackTrace();
    }
    webView.loadDataWithBaseURL(baseUrl, data, "text/html", "UTF-8", null);

}

So as you see I display the ebook in a webview so as far as I know the only scrolling possibility webview gives is up/down.

I was thinking on splitting the html string that getData() returns and webview loads into pages and displaying them one by one with a viewpager, but how to split the html correctly according to screen size?

Do you think with this idea I'm on the right way? Any other solutions to display epub from left to right / right to left (paginate) or any other "free or cheap" library to do so? (I tried PageTurner, it's really good, but the commercial version is too expensive for me)

Answer 1

I have done pagination effect in android like this..

-> create a custom webview class.
-> set below clients and load url then you will get horizontal scrolling with page count.
-> Lock the webview default scroll.
-> For smooth pagination effect instead of moving scroll of webview ,move the entire webview so for one page there would be one webview.
-> Use your own viewflippers to buffer previous and next pages.


I have done all these implementations and I made a product for an organisation.Just I am sharing my idea how to approach towards the best solution.Instead of using third parities and stucking in the middle due to limitation of that sdk ,make every thing your own.

private class MyWebClient extends WebViewClient
    {
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {

            super.onPageStarted(view, url, favicon);
        }
        @Override
        public void onPageFinished(WebView view, String url) 
        {
            super.onPageFinished(view, url);

            final MyWebView myWebView = (MyWebView) view;


                String varMySheet = "var mySheet = document.styleSheets[0];";

                String addCSSRule = "function addCSSRule(selector, newRule) {"
                        + "ruleIndex = mySheet.cssRules.length;"
                        + "mySheet.insertRule(selector + '{' + newRule + ';}', ruleIndex);"

                        + "}";

                String insertRule1 = "addCSSRule('html', 'padding: 0px; height: "
                        + (myWebView.getMeasuredHeight()/getContext().getResources().getDisplayMetrics().density )
                        + "px; -webkit-column-gap: 0px; -webkit-column-width: "
                        + myWebView.getMeasuredWidth() + "px;')";



                myWebView.loadUrl("javascript:" + varMySheet);
                myWebView.loadUrl("javascript:" + addCSSRule);
                myWebView.loadUrl("javascript:" + insertRule1);




        }
    }

    private class MyWebChromeClient extends WebChromeClient
    {
        @Override
        public void onProgressChanged(WebView view, int newProgress) 
        {
            super.onProgressChanged(view, newProgress);

            if(newProgress == 100)
            {
                postDelayed(new Runnable() 
                {
                    @Override
                    public void run() 
                    {
                        calculateNoOfPages();
                    }       

                },200);
            }
        }
    }
private void calculateNoOfPages()
    {
        if(GlobalSettings.EPUB_LAYOUT_TYPE == GlobalConstants.FIXED)
        {

        }
        else
        {
            if(getMeasuredWidth() != 0)
            {
                int newPageCount = computeHorizontalScrollRange()/getMeasuredWidth();
                getData().getChapterVO().setPageCount(newPageCount);

            }
        }
    }
@Override
    public int computeHorizontalScrollRange() {
        // TODO Auto-generated method stub
        return super.computeHorizontalScrollRange();
    }

one you load url to

Answer 2

Follow this github account.

FbReader provide some great libraries for epub and pdf reader. Try this....

or

You can Make your own custom WebView by extending WebView. Here you can place and modify all the functionalities you want from your WebView.

My colleague made a reader using this FbReader and It was fabulous.

Answer 3

Hey I think this will help you. The answer by Nacho L worked for me. Here HTML book-like pagination?