我正在研究读者,我们曾经从事epub2工作,我使用CSS文件从事分页效果。我最近收到了一个epub 3文件,它不遵守我提供的CSS规则,尽管在播放书籍Android应用程序时可以正常工作。
请注意,我操纵了与Web视图有关的几个功能,例如:
testWV.getSettings().setUseWideViewPort(true);
testWV.getSettings().setLoadWithOverviewMode(true);
这是使用前面提到的分页CSS在epub2文件上完美工作
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;
}
这就是我整合CSS文件的方式:
<?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>
就像您可以看到您在他的CSS中使用此var widthplaceholderpx
一样。通常,它应该在Java代码中覆盖它。但是,当bodyplaceholder
被添加到HTML的身体中时,我需要再次覆盖widthplaceholderpx
。因此,CSS知道实际高度是多少。