I am using WebViewClient to display the content of html and xhtml files with paging done using css sheet. In epub3 xhtml files, the footnote href, is not triggering the default method shouldOverrideURLLoading() instead it is executing the default behavior of scrolling to the actual place of the footnote. Another issue arises when I have the paging effect, so the chapter is split automatically as a series of pages next to each other (ebook effect). In this case the default behavior is not scrolling horizontally to lead to the actual place of the footnote, but it's just reloading the chapter.
Kindly note that the same code applied on html files (epub2) does not cause this issue and triggers automatically the default method shouldOverrideURLLoading().
Find below a sample xhtml file displaying the issue, to reproduce the problem:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ar-SA" xml:lang="ar-SA" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>Part_one-10</title>
<link href="css/idGeneratedStyles.css" rel="stylesheet" type="text/css" />
</head>
<body id="Part_one-10">
<div class="Basic-Text-Frame" dir="rtl">
<p class="Nass"> Sample text used <span class="Footnote-Reference CharOverride-3"><span id="footnote-154-backlink"><a class="_idFootnoteLink _idGenColorInherit" href="Part_one-10.xhtml#footnote-154" target="_top">(153)</a></span></span>.</p>
<hr class="HorizontalRule-1" />
<div class="_idFootnotes">
<div id="footnote-154" class="_idFootnote" epub:type="footnote">
<p class="u77"><span class="CharOverride-18"><a class="_idFootnoteAnchor _idGenColorInherit" href="Part_one-10.xhtml#footnote-154-backlink">153</a></span>foot note content</p>
</div>
</div>
</div>
</body>
</html>
Find below the code used to load the content of the chapter on the WebViewClient:
myWebViewClient.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
System.out.println("shouldOverrideUrlLoading: " + url);
return true;
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
@Override
public void onReceivedError(WebView view, int errorCode,
String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
Log.v("building", "onReceivedError!!!!!!!!");
}
@Override
public void onPageFinished(WebView view, String url) {
System.out.println("onPageFinished: "+ url);
}
});
@Override
public void loadChapter(String itemPath) {
new Thread(new Runnable() {
@Override
public void run() {
String itemURL = "file://" + itemPath;
File itemFile = new File(“itemPath”);
try {
org.jsoup.nodes.Document htmlDoc = Jsoup.parse(itemFile, "UTF-8");
Elements heads = htmlDoc.getElementsByTag("head");
Element head = heads.get(0);
String headString = head.toString();
headString = headString.substring("<head>".length());
int index = headString.indexOf("</head>");
headString = headString.substring(0, index);
Elements bodys = htmlDoc.getElementsByTag("body");
Element body = bodys.get(0);
String bodyString = body.toString();
String bodyStyle = bodyString.substring(bodyString.indexOf("<body") + 5, bodyString.indexOf(">"));
bodyString = bodyString.substring("<body".length());
int aIndex = bodyString.indexOf(">");
bodyString = bodyString.substring(aIndex + 1);
int bIndex = bodyString.indexOf("</body>");
bodyString = bodyString.substring(0, bIndex);
templateString = getAssetsFileContents(getString(R.string.template_file));
templateString = templateString.replaceFirst("headplaceholder", headString);
templateString = templateString.replace("bodyplaceholder", finalBody);
} catch (Exception e) {
e.printStackTrace();
}
myWebViewClient.post(new Runnable() {
@Override
public void run() {
myWebViewClient.loadDataWithBaseURL(itemURL, templateString, "text/html", "UTF-8", "about:blank");
}
});
}
}).start();
}
Find Below the templateString used in the above code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="columnPaging.css" type="text/css" media="screen"/>
headplaceholder
</head>
<body>
<div id="viewer">
<div id="book">
bodyplaceholder
</div>
</div>
</body>
</html>
Find below the css for columnPaging code used for the paging effect:
html {
height:heightplaceholderpx;
width:100%;
}
body {
margin:0px;
padding:0px;
height:100%;
width:100%;
}
#viewer {
width:widthplaceholderpx;
height:heightplaceholderpx;
}
#book {
width:widthplaceholderpx;
height:heightplaceholderpx;
margin-left:50px;
margin-right:50px;
margin-top:10px;
overflow:hidden;
-webkit-column-count:auto;
-webkit-column-width:widthplaceholderpx;
-webkit-column-gap:100px;
text-align:justify;
}
Note: upon surfing previous answers related to (shouldOverrideURLLoading) method it was suggested to use target="_top" after the href to trigger it, but this didn't work either.