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)

Menedez

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

Rattray

bro ultimatum...i really was looking for a solution for a week. Ultimatum bro, u've really solved a hell of a problem for me. Wish i could give u a 100 like. Anyone looking for a solution, the above one works perfectly. You may need to change the addCSS rule a little bit but the solution definitely works. Thanks a ton brother – Bot

Thank for your comment arunavh!! you r most welcome for any further help :) – Rattray

Thank you very very much for your time Uday, I'll give it a try as son as I can but do you think your solution it's kinda easy to implement? (I have read it just quickly as I'm in the office) – Menedez

it is to be true. I've just started developing and was able to pick it up. I would suggest just give it a try, its easy. I can help you out as much as I can – Bot

Had integrate this and have horizontal scrolling in WebView, now I can read book horizontally. But can you please tell me that how can I integrate viewflipper for each new page? – Spongy

Do not use android viewflipper api.make a custom view flipper which will supply pages based on swipe gesture.Swipe gestures also should be done by onTouchEvent override of view not directly by using gesture listeners.Extend basic View class and start working ,everything will be in your control. – Rattray

not a good idea, sometimes a line gets half-cut from the middle. like the lower half of characters go of screen – Reseat

it adds extra space below the web view data and pagination is not smooth at its gets stuck in between while scrolling – Schmaltz

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.

Majesty

Thank you very much Jatin, Finally and after not finding a solution to my problem as it is an important project I decided to buy a reader. Now I'm using Page Turner Reader, which is not free but it's just an amazing application. – Menedez

Answer 3

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

Talkfest

Thank you very much atihska, as I say below for Jatin in the end without finding a solution I decided to buy a reader, and now I'm using Page Turner reader, which is not free but it's just an amazing App. – Menedez

@Atishka, I tested your advice and it works. I am not good with js, so could you tell me how to change pages by clicking or scrolling? A hint would be appreciated. – Reseat