Use Horizontal Scroll in Android WebView

Question

I am currently using epublib-core to read epubs and display them in Android WebView with the following code -

webView.loadDataWithBaseURL(baseURL, new String(spineReferences.get(chapter/* <- int*/).getResource().getData()), "text/html", "utf-8", null);

But it's using Vertical Scroll whereas I want a HorizontalScroll. After searching the web, I found Monocle, but I don't know how to integrate Monocle with epublib and WebView. Any idea on how to use horizontal scroll?

Brunel

Answer 1

Atlast, I could enable Horizontal Scroll in the app (without any Page Transitions). Use this code to scroll horizontally -

Create custom WebViewClient -

public class CustomWebClient extends WebViewClient {
private Context mContext;

public CustomWebClient(Context context) {
    this.mContext = context;
}

@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() /  mContext.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);

}
}

Edit -

I integrated epub lib with Monocle for nice effects, and here is the link to the whole source code - https://drive.google.com/drive/folders/0B8UizUpBrF1YX3UxcW5nLUVQMEk

Brunel

what is MyWebView ? – Winterfeed

My custom WebView, not much different from the original WebView. – Brunel

+InfinityChaos this method works but it does not give effect like turning pages and also images are breaking apart – Winterfeed

I tried incorporating the page turning effect, but it did not look much good, so I scraped the idea. Incase you want to use it, see this - turnjs.com – Brunel

there is this library which works fine but i am unable to integrate it github.com/joseph/Monocle , Finally did you give up the work or did you find any alternative? – Winterfeed

Yeah I integrated Monocle with my app earlier, here is the link - drive.google.com/drive/folders/0B8UizUpBrF1YX3UxcW5nLUVQMEk I completed the EPUB part of the app, but later abandoned it due to difficulty in support of other book formats. – Brunel

i copied every thing from your classes and also copied all library in to assets folder but it displays empty webview only error shown is "Uncaught ReferenceError: Monocle is not defined", source: file:///storage/emulated/0/Books/ (50) , it is saying monocle is not defined where we are unzipping(i.e DownloadResource method location) the epuubfile what does that mean? – Winterfeed

Please post the whole error, maybe I forgot to add the code to move the Monocle library from assets to Storage, and manually copied it. (I hadn't worked on that app for a long time). – Brunel

imgur.com/a/LCQ9j these are my phone screen and error in eclipse, i think that error is coming from some where inside monocle library – Winterfeed

I checked the code on my phone, and Monocle was working fine with the same code. (From this, I mean the book was not shown, but the background Monocle shadows were there, probably some small bug). I have updated the Drive folder and added all code there with a pic of my Assets folder, check it again. – Brunel

Also, check if file:///android_asset/monocore.css and file:///android_asset/monocore.js is present in BookData.java file, as this is used to make them read from Assets folder of app – Brunel

ok i know now, you have modified your monocore.js mine just says //= require ./core/factory .... etc and its only 1 kb and yours is 158 kb ,can you share your monocore.js file thanks in advance – Winterfeed

Done, they're added to the Drive folder :) Actually, I think the original Monocore library has many different files, but I got this .js which compresses all of them into 1 file. – Brunel

Thanks ,bro it works but it locks the sliding after click on screen and there is no text selection feature after adding ,i am a complete noob with javascript and dont want to get stuck in middle so i stated every thing from scratch in android way, Thanks for all the help you gave, that was the least i could give :) – Winterfeed

Good luck for that! A tip: The epubs are basically compressed HTML files, so you can extract the text from it, and replace all image links with ImageViews instead of using WebView. – Brunel

Answer 2

To get horizontal pagination add css attribute to html before loading to WebView

String html = getBookContent();  // load epub content to String

int density = getResources().getDisplayMetrics().density;
int width = (int) Math.floor(mWebView.getWidth() / density);
int height = (int) Math.floor(mWebView.getHeight() / density);

String style= "<meta name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=1\"/>\n" +
     "<style type=\"text/css\">body {height: %heightpx; \n" + 
     "-webkit-column-width: %widthpx; -webkit-column-gap:0;}</style></head>";

html = html.replace("</head>", style);
html = html.replace("%width", String.valueOf(width));
html = html.replace("%height", String.valueOf(height));

 mWebView.loadDataWithBaseURL(baseUrl, html, "text/html", "utf-8", null);

Elisabeth