We Keep Coding

How to disable Webview scrolling and set it's height to fit the entire content

I am using webview to show and edit the content in my UWP application. I want to disable the scrolling within the Webview control and make it adapt the height just to fit the entire content it has. And then it should respect the scrolling of it's parent control's scrollviewer. I have uploaded a sample application on OneDrive here: https://1drv.ms/u/s!AhChIerZubKRjQKBH5nA0KGTtPYP
In the sample app, you can see that once you reach at the end of the scrollviewer, the webview will start scrolling within itself. Instead what I would like to do is, keep scrolling (the parent scrollviewr) to the end of the webview.
Edit: Here's the code:
MainPage.xaml:
<ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto" Height="200" Width="400">
<StackPanel>
<Button Content="Navigate web page 1"
Margin="0,20,0,0"
HorizontalAlignment="Center"
Click="Button_Click"/>
<Button Content="Navigate web page 2"
Margin="0,20,0,0"
HorizontalAlignment="Center"
Click="Button_Click_1"/>
<Button Content="Navigate web page 3"
Margin="0,20,0,0"
HorizontalAlignment="Center"
Click="Button_Click_2"/>
<Button Content="Navigate web page 4"
Margin="0,20,0,0"
HorizontalAlignment="Center"
Click="Button_Click_3"/>
<WebView Name="WebView" Width="400" MinHeight="200"></WebView>
</StackPanel>
</ScrollViewer>
MainPage.xaml.cs:
public sealed partial class MainPage : Page
{
private const string EditableParameter = "~editable~";
private const string SetBodyEditableScript = #"
try
{
document.body.contentEditable = '" + EditableParameter + #"';
}
catch(e)
{
}";
private const string SetTextFromClipBoardFunctionName = "setTextFromClipBoard";
private const string SetHtmlTextFromClipboardFunction =
"function " + SetTextFromClipBoardFunctionName + #"(htmlFromClipboard)
{
if (window.getSelection)
{
var range;
var sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var el = document.createElement('div');
el.innerHTML = htmlFromClipboard + '<span></span>';
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
range.collapse(false);
window.external.notify('RefreshAndReportHtml');
}
else if (typeof document.selection != 'undefined' && document.selection.type != 'Control') {
var html = (node.nodeType == 1) ? node.outerHTML : node.data;
html += '<span></span>';
var textRange = document.selection.createRange();
textRange.pasteHTML(html);
textRange.collapse(false);
window.external.notify('RefreshAndReportHtml');
}
}
};";
private const string GetHtmlFunctionName = "getHtml";
private const string GetHtmlFunction =
"function " + GetHtmlFunctionName + #"(skipParam)
{
return document.documentElement.innerHTML;
};";
public MainPage()
{
this.InitializeComponent();
MakeWebviewEditable();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
//(Window.Current.Content as Frame).Navigate(typeof(WebviewPage), "http://tsn.ua");
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
//(Window.Current.Content as Frame).Navigate(typeof(WebviewPage), "http://buzzfeed.com");
}
private void Button_Click_2(object sender, RoutedEventArgs e)
{
//(Window.Current.Content as Frame).Navigate(typeof(WebviewPage), "http://microsoft.com");
}
private void Button_Click_3(object sender, RoutedEventArgs e)
{
//(Window.Current.Content as Frame).Navigate(typeof(WebviewPage), "http://cnn.com");
}
private const string EventNotificationFormat = #"window.external.notify('{0}');";
private async void MakeWebviewEditable()
{
WebView.NavigateToString("I do not know how that about righting wrongs can be, said the bachelor, for from 707" +
"straight you have made me crooked, leaving me with a broken leg that will never see itself straight again all the days of its life and the injury you have redressed in my case" +
"has been to leave me injured in such a way that I shall remain injured for ever and the height of misadventure it was to fall in with you who go in search of adventures." +
"I do not know how that about righting wrongs can be, said the bachelor, for from 707" +
"straight you have made me crooked, leaving me with a broken leg that will never see itself straight again all the days of its life and the injury you have redressed in my case" +
"has been to leave me injured in such a way that I shall remain injured for ever and the height of misadventure it was to fall in with you who go in search of adventures.");
//await InjectJavaScriptAsync(SetBodyEditableScript.Replace(EditableParameter, "true"));
await InjectJavaScriptAsync("document.designMode='on'");
await InjectJavaScriptAsync(GetHtmlFunction);
}
private async Task InjectJavaScriptAsync(string jscript)
{
await WebView.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
{
try
{
// Only execute JS if a document is fully loaded. This should eliminate JS exception related to UNKNOWN name errors.
//if (IsHtmlLoaded)
string result = await WebView.InvokeScriptAsync("eval", new string[] { jscript });
}
catch (Exception ex)
{
}
});
}
}
Can it be done?

To autosize WebView according to its HTML content, we can try with following code:
private async void WebView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
var webView = sender as WebView;
int width;
int height;
// get the total width and height
var widthString = await webView.InvokeScriptAsync("eval", new[] { "document.body.scrollWidth.toString()" });
var heightString = await webView.InvokeScriptAsync("eval", new[] { "document.body.scrollHeight.toString()" });
if (!int.TryParse(widthString, out width))
{
throw new Exception("Unable to get page width");
}
if (!int.TryParse(heightString, out height))
{
throw new Exception("Unable to get page height");
}
// resize the webview to the content
webView.Width = width;
webView.Height = height;
}
And then we can use this method in XAML like:
<WebView Name="WebView" Width="400" MinHeight="200" NavigationCompleted="WebView_NavigationCompleted"/>
Or in code-behind:
public MainPage()
{
this.InitializeComponent();
MakeWebviewEditable();
this.NavigationCacheMode = NavigationCacheMode.Required;
WebView.NavigationCompleted += WebView_NavigationCompleted;
}
Here I used WebView.NavigationCompleted event because we need to make sure the current content has loaded before we try to get the content's width and height.
Update:
While on Windows 10 Mobile, above method might not completely work. This is because WebView on Windows 10 Mobile is not compatible with parent controls that require gestures to propagate up from the WebView control to the parent, such as FlipView, ScrollViewer class, and other related controls.
Ref Remarks of WebView class:
By default, WebView content is hosted on the UI thread on devices in the desktop device family, and off the UI thread on all other devices. You can use the WebView.DefaultExecutionMode static property to query the default threading behavior for the current client. If necessary, you can use the WebView(WebViewExecutionMode) constructor to override this behavior.
Note There might be performance issues when hosting content on the UI thread on mobile devices, so be sure to test on all target devices when you change DefaultExecutionMode.
A WebView that hosts content off the UI thread is not compatible with parent controls that require gestures to propagate up from the WebView control to the parent, such as FlipView, ScrollViewer, and other related controls. These controls will not be able to receive gestures initiated in the off-thread WebView.
As a workaround, usually we can try using something like
WebView WebView = new WebView(WebViewExecutionMode.SameThread);
in code-behind instead of creating web browser in XAML to solve this problem. However as the Note said, hosting content on the UI thread on mobile devices is not a good practice and in my test, this will cause HTML content can't be editable. So this may be not an acceptable solution for your question.
I'm not sure what do you want to achieve. Based on your requirement, you can try like #DecadeMoon said to put the buttons into HTML page. Or you can get the content of the HTML into a RichEditBox. Or you can change your layout and just put the WebView outside the ScrollViewer.

So you're saying you want the height of the WebView control to equal the height of the webpage it is displaying? I don't think that's possible. I imagine the WebView would employ some form of rendering optimizations such that it doesn't need to render what's not visible in the viewport. If the entire height of the webpage is visible, then it has to render everything which would be terrible for performance.
It looks like you're trying to control the webpage directly through the WebView by injecting javascript. You're going to have a hard time doing that. If there's no way to achieve what you want in XAML only, then maybe you can rewrite your app in WinJS instead?
The easiest way to achieve what you want would be to put the buttons directly in the webpage and notify the host when they are clicked so you can act.
XAML
<Grid>
<WebView x:Name="webView" ScriptNotify="webView_ScriptNotify" Height="300"/>
</Grid>
CS
private void prepareWebViewContent()
{
var html = #"
<style>
button {
padding: 15px 20px;
font-size: 40px;
border: none;
background-color: #ccc;
font-family: inherit;
display: block;
margin: 10px auto;
}
button:active {
background-color: #aaa;
}
</style>
<button onclick=""window.external.notify('Navigate1')"">Navigate to web page 1</button>
<button onclick=""window.external.notify('Navigate2')"">Navigate to web page 2</button>
<p>
I do not know how that about righting wrongs can be, said the bachelor, for from 707
straight you have made me crooked, leaving me with a broken leg that will never see itself straight again all the days of its life and the injury you have redressed in my case
has been to leave me injured in such a way that I shall remain injured for ever and the height of misadventure it was to fall in with you who go in search of adventures.
I do not know how that about righting wrongs can be, said the bachelor, for from 707
straight you have made me crooked, leaving me with a broken leg that will never see itself straight again all the days of its life and the injury you have redressed in my case
has been to leave me injured in such a way that I shall remain injured for ever and the height of misadventure it was to fall in with you who go in search of adventures.
</p>
";
webView.NavigateToString(html);
}
private void webView_ScriptNotify(object sender, NotifyEventArgs e)
{
switch (e.Value)
{
case "Navigate1":
// Handle this case
break;
case "Navigate 2":
// Handle this case
break;
}
}
It's very rudimentary, but you get the idea.

How to scroll programmatically to a to a line in UIWebView?

I want to save the state where the user left the webView (which is loading a local html file) so that the next time when he enters the same view, he is taken to the same line of text that he was reading the previous time.
I think that could be achieved by saving the scroll value in an integer every time the user swipe the document, and when he enters the view the next time we use the value that was saved previously and scroll the view using a javascript command or "CG" things.
Any idea?

and an objective c solution:
#interface ViewController () <UIWebViewDelegate>
#property (weak, nonatomic) IBOutlet UIWebView *webView;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:#"http://yourwebsite.com"]]];
}
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];
if ([userDefaults objectForKey:#"contentOffset"]) {
webView.scrollView.contentOffset = CGPointFromString([userDefaults objectForKey:#"contentOffset"]);
}
}
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];
[userDefaults setObject:NSStringFromCGPoint(self.webView.scrollView.contentOffset) forKey:#"contentOffset"];
[userDefaults synchronize];
}

From Lyndsey Scott's Answer:
To save and retrieve your scrollview offset from NSUserDefaults, set your UIWebView's delegate and try this:
var viewLaidoutSubviews = false // <-- variable to prevent the viewDidLayoutSubviews code from happening more than once
// Save your content offset when the view disappears
override func viewWillDisappear(animated: Bool) {
var userDefaults = NSUserDefaults.standardUserDefaults()
userDefaults.setValue(NSStringFromCGPoint(myBrowser.scrollView.contentOffset), forKey: "scroll_offset")
userDefaults.synchronize()
viewLaidoutSubviews = false
}
// Retrieve and set your content offset when the view re-appears
// and its subviews are first laid out
override func viewDidLayoutSubviews() {
if (!viewLaidoutSubviews) {
// If a scroll_offset is store in NSUserDefaults, use it
var userDefaults = NSUserDefaults.standardUserDefaults()
var scrollOffset:CGPoint? = CGPointFromString(userDefaults.valueForKey("scroll_offset") as? NSString)
if let position:CGPoint = scrollOffset {
myBrowser.scrollView.delegate = self
myBrowser.scrollView.setContentOffset(position, animated: false)
}
viewLaidoutSubviews = true
}
}
And utilize your UIWebView's webViewDidFinishLoad delegate method to update the scroll offset in the case that the web view didn't finish rendering before the view laid out its subviews:
// Retrieve and set your content offset once the web view has
// finished rendering (in case it hasn't finished rendering
// by the time the view's subviews were laid out)
func webViewDidFinishLoad(webView: UIWebView) {
// If a scroll_offset is store in NSUserDefaults, use it
var userDefaults = NSUserDefaults.standardUserDefaults()
var scrollOffset:CGPoint? = CGPointFromString(userDefaults.valueForKey("scroll_offset") as? NSString)
if let position:CGPoint = scrollOffset {
myBrowser.scrollView.delegate = self
myBrowser.scrollView.setContentOffset(position, animated: true)
}
}
But note, your NSUserDefaults value will also persist between app launches unless you delete it.

Hide WebView until JavaScript is done

I have a webview
WebView wv;
wv = (WebView)findViewById(R.id.webView1);
wv.loadUrl("http://example.com/");
Simply said.
at:
onPageFinished
I have:
wv.loadUrl("javascript:(function() { " + "document.getElementsByClassName('centered leaderboard_container')[0].style.display = 'none'; " + "document.getElementsByClassName('n')[0].style.display = 'none'; " + "document.getElementsByClassName('paginator')[0].style.display = 'none'; " + "document.getElementsByTagName('ul')[0].style.display = 'none'; " + "document.getElementsByTagName('tr')[0].style.display = 'none'; " + "})()");
I've set webview visibility to INVISIBLE
How can I set visibility to VISIBLE after the JavaScript is done?
Now you get to see the whole page for a second and than the JavaScript is done..
Anyone?
ps. The website is not mine, its a 3rd party website

Tested on API 17 emulator and it works.
You can inject javascript from Java to the web.
And do vice-versa, once the url is loaded call from javascript to a function on our Java code, and execute the setVisibility(). For that purpose you are going to add a JS interface.
Here the code:
private final static String HOST = "stackoverflow.com";
private WebView wb;
#SuppressLint("SetJavaScriptEnabled")
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_home);
wb = (WebView) findViewById(R.id.home_webview);
//Make the webview invisible
wb.setVisibility(View.INVISIBLE);
WebSettings webSettings = wb.getSettings();
webSettings.setJavaScriptEnabled(true);
wb.setWebViewClient(new WebViewClient(){
public void onPageFinished(WebView view, String url){
//Inject javascript code to the url given
//Not display the element
wb.loadUrl("javascript:(function(){"+"document.getElementById('Id').style.display ='none';"+"})()");
//Call to a function defined on my myJavaScriptInterface
wb.loadUrl("javascript: window.CallToAnAndroidFunction.setVisible()");
}
});
//Add a JavaScriptInterface, so I can make calls from the web to Java methods
wb.addJavascriptInterface(new myJavaScriptInterface(), "CallToAnAndroidFunction");
wb.loadUrl("http://"+HOST);
}
public class myJavaScriptInterface {
#JavascriptInterface
public void setVisible(){
runOnUiThread(new Runnable() {
#Override
public void run() {
wb.setVisibility(View.VISIBLE);
}
});
}
}
This functionality is going to be executed for every page. Once on the 3rd party server you have to manage what to do with every request, webClient.shouldOverrideUrlLoading() can help you.
Updated answer:
I could reproduce it as you commented, for the last version we should do:
Beginning in Android 4.2, you will now have to explicitly annotate public methods with #JavascriptInterface in order to make them accessible from hosted JavaScript. Note that this also only takes effect only if you have set your app's minSdkVersion or targetSdkVersion to 17 or higher.
I added it and imported android.webkit.JavascriptInterface
Reference: JavascriptInterface methods in WebViews must now be annotated

I had the same problem of #GromDroid.
Maybe not the best solution but it works:
public class myJavaScriptInterface {
#JavascriptInterface
public void setVisible(){
runOnUiThread(new Runnable() {
#Override
public void run() {
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
wb.setVisibility(View.VISIBLE);
}
}, 500);
}
});
}
}
I've added a delay of half second before make the webview visible.

Play Framework redirect not always work. Bug or my fault?

i am trying to redirect a user to another page in my play project. The problem is, the redirect works quite well in one view, but it doesnt work in another view.
The strange thing is, when i look at the console -, i can see that system has loaded the view (i can see this by setting system.out.println() command" but i cant see that happening in the browser view.
Working Code:
public static void deleteMessages(boolean[] chbox)
{
System.out.println("Checkbox count: "+chbox.length);
String[] referer =Request.current().headers.get("referer").toString().split("/");
String mailbox = referer[referer.length-2];
String pageNumber ="/"+ referer[referer.length-1];
for(int i = 0; i<chbox.length;i++)
{
String id=params.getAll("hdnchbox")[i].toString();
if(mailbox.equals("inbox"))
{
MessageInbox m = MessageInbox.findById(Long.parseLong(id));
m.delete();
}else
{
MessageOutbox m = MessageOutbox.findById(Long.parseLong(id));
m.delete();
}
}
show(mailbox,Integer.parseInt(pageNumber));
}
Not Working Code:
public static void deleteMessage(Long id, String mailbox)
{
if(mailbox.toLowerCase().equals("inbox"))
{
MessageInbox msg = MessageInbox.findById(id);
msg.delete();
}
else
{
MessageOutbox msg = MessageOutbox.findById(id);
msg.delete();
}
System.out.println("Redirect URL: "+"/Messages/"+mailbox);
String redirectURL = "/Messages/"+mailbox;
show(mailbox,null);
}
The show void:
public static void show(String messageBoxName,Integer pageNumber)
{
if(pageNumber == null)
{
System.out.println("pagenumber null");
pageNumber = 0;
}
List<UserMessage> msgs = messageList(pageNumber,messageBoxName);
System.out.println("The page has loaded");
render(pageNumber,msgs,messageBoxName);
}
The strangest part is i can both see the "The page has loaded" message in the system console, but i can see it in the browser window.
is it a bug, or am i doing something wrong?
(passing null value to show() works i tried that)

This may be a bug with localVariables, I had a similar problems so times ago. Even if I reassign a variable like pageNumber, I got null in my template
Try calling "show(mailbox, 0)" instead of "show(mailbox,null)" to see if it solves your problem

i've ended up redirecting with jquery instead of play redirect command. I think this is a bug in play framework. i can see the response html in firebug but no luck on the browser screen.

HTML book-like pagination

How can I split the content of a HTML file in screen-sized chunks to "paginate" it in a WebKit browser?
Each "page" should show a complete amount of text. This means that a line of text must not be cut in half in the top or bottom border of the screen.
Edit
This question was originally tagged "Android" as my intent is to build an Android ePub reader. However, it appears that the solution can be implemented just with JavaScript and CSS so I broadened the scope of the question to make it platform-independent.

Building on Dan's answer here is my solution for this problem, with which I was struggling myself until just now. (this JS works on iOS Webkit, no guarantees for android, but please let me know the results)
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;
Hope this helps...

Speaking from experience, expect to put a lot of time into this, even for a barebones viewer. An ePub reader was actually first big project I took on when I started learning C#, but the ePub standard is definitely pretty complex.
You can find the latest version of the spec for ePub here:
http://www.idpf.org/specs.htm
which includes the OPS (Open Publication Structure), OPF (Open Packaging Format), and OCF (OEBPS Container Format).
Also, if it helps you at all, here is a link to the C# source code of the project I started on:
https://www.dropbox.com/sh/50kxcr29831t854/MDITIklW3I/ePub%20Test.zip
It's not fleshed out at all; I haven't played with this for months, but if I remember correctly, just stick an ePub in the debug directory, and when you run the program just type some part of the name (e.g. Under the Dome, just type "dome") and it will display the details of the book.
I had it working correctly for a few books, but any eBooks from Google Books broke it completely. They have a completely bizarre implementation of ePub (to me, at least) compared to books from other sources.
Anyway, hopefully some of the structural code in there might help you out!

I've had to code something like this too, and my (working) solution is this:
You have to apply these lines to the webview...
webView_.getSettings().setUseWideViewPort(true);
webView_.getSettings().setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
Also, you have to inject some javascript. I've had tons of problems with the differents scales of my activity and the content rendered in the webview, so my solution doesn't take any kind of value from "outside".
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()");
}
Enjoy :)

I recently attempted something similar to this and added some CSS styling to change the layout to horizontal instead of vertical. This gave me the desired effect without having to modify the content of the Epub in any way.
This code should work.
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");
So, basically you're injecting JavaScript to change the styling of the body element after the chapter has been loaded (very important). The only downfall to this approach is when you have images in the content the calculated column count goes askew. It shouldn't be too hard to fix though. My attempt was going to be injecting some JavaScript to add width and height attributes to all images in the DOM that don't have any.
Hope it helps.
-Dan

I was able to improve Nacho's solution to get horizontal swipe paging effect with WebView. You can find solution here and example code.
Edit:
Solution 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())");
}
In my WebChromeClient's onJsAlert get the number of horizontal pages which i pass to the custom HorizontalWebView to implement paging effect
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;
}
}

Maybe it would work to use XSL-FO. This seems heavy for a mobile device, and maybe it's overkill, but it should work, and you wouldn't have to implement the complexities of good pagination (e.g. how do you make sure that each screen doesn't cut text in half) yourself.
The basic idea would be:
transform the XHTML (and other EPUB stuff) to XSL-FO using XSLT.
use an XSL-FO processor to render the XSL-FO into a paged format that you can display on the mobile device, such as PDF (can you display that?)
I don't know whether there is an XSL-FO processor available for Android. You could try Apache FOP. RenderX (XSL-FO processor) has the advantage of having a paged-HTML output option, but again I don't know if it could run on Android.

There is several ways this could be done. If every line is in its own element all you have to do is to check if one of it's edges goes outside of the view (either the browsers, or the "book page").
If you want to know how many "pages" there is going to be in advance, just temporary move them into the view and get what line a page ends. This could potentially be slow because of that page reflow is needed for the browser to know where anything is.
Otherwise I think that you could use the HTML5 canvas element to measure text and / or draw text.
Some info on that here:
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

Had this same problem recently and inspired by the answers found a plain CSS solution using CSS3's column-* attributes:
/* 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>
The example above gives great results on a retina iPhone. Playing around with the different attributes yields in different spacing between the pages and such.
If you need to support multiple chapters for instance which need to start on new pages, there's an XCode 5 example on github: https://github.com/dmrschmidt/ios_uiwebview_pagination

You could split the pages in separate XHTML files and store them in a folder. Eg: page01, page02. You can then render those pages one by one underneath each other.

You can look at http://www.litres.ru/static/OR/or.html?data=/static/trials/00/42/47/00424722.gur.html&art=424722&user=0&trial=1 but the code may be heavily obfuscated, so just use Firebug to inspect DOM.
If the link isn't working, comment - would give you fixed.