androidcsswebviewpaginationepub3

webView ignoring CSS when loading epub3 content

I'm working on a reader, and we used to work on epub2, and I working on pagination effect using CSS file. I have recently received an ePub 3 file and it does not abide by the CSS rules that I have provided, although it works correctly when tried on Play Books android app.

Note that I have manipulated several features related to web view such as:

testWV.getSettings().setUseWideViewPort(true);
testWV.getSettings().setLoadWithOverviewMode(true);

and this is the paging CSS used which as mentioned before works perfectly on epub2 files

html {
     height:heightplaceholderpx;  //set dynamically depending on phone screen size 

     width:100%;
   }

body {
     margin:0px;
     padding:0px;
     width:100%;

     pointer-events: none;
  }


#viewer {
     width:widthplaceholderpx;
     height:heightplaceholderpx; 
 }

#book {
    width:widthplaceholderpx;
    height:heightplaceholderpx;

    margin-left:50px;
    margin-right:50px;
    margin-top:10px;

    -webkit-column-count:auto;
    -webkit-column-width:widthplaceholderpx;
    -webkit-column-gap:100px;
    text-align:justify;
}

.h {
    margin-top:60px;
    margin-left:100px; 
    margin-right:100px;
 }


img {
    max-width: 100%;
    height:auto;
 }

This is how I'm integrating the CSS file:

<?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  //the header extracted from the xhtml file of the book
</head>
<body>
    <div id="viewer">
    <div id="book">
        bodyplaceholder   //the body extracted from the xhtml file of the book
    </div>
    </div>
</body>
</html>
Solution

  • Like you can see you use this var widthplaceholderpx in his css. Normally it should be override it in the Java code. But when the bodyplaceholder was add to the body in the HTML I needed to override the widthplaceholderpx again. So the css would know what the actual height was.