Quote:
Originally Posted by azimuth
My initial goal: to get a cover image to function the same visually (for epub3) in a web browser, + same as in a desktop epub, + same as in an Android eReader epub -- all to function like an SVG, but using just JPG/PNG image and CSS so the bottom of the image would not spread off page.
Having gotten that, next...we made the suggested code changes to get the cover image sit on the left panel of a two-page spread (horizontal mode).
Code:
#container img {
display: block;
height: auto;
max-height: 100vh;
max-width: 100vw;
margin: auto;
border: 0;
position: static;
column-span: none;
column-fill: auto;
}
Results in Windows (desktop) -- on ADE (dual and single spread) and Thorium (single spread).
- ADE: dual page spread the cover is on left panel !
- ADE: single page spread the cover responds normal, and its following text pages.
For my Android apps, only the first App performed active dual page spread visually so we could to see it in action:
- Aldiko: dual page spread, cover is on left page panel !
- ADE: it only has single page spread option, and cover/text renders normal (vertical and horizontal), and all text pages.
- PockeBook: no dual page option (renders normal, whether vertical or horizontal), and all text pages.
- ReadEra: though it has dual page mode option ON, it still only shows the epub in single view spread (horizontal and vertical), and all text pages.
- Moon+: has horizontal dual pane mode switched ON, but cover renders normal (horizontal or vertical), and all text pages.
Would this CSS change resolve BookFusion (on iOS) as well? |
That CSS code is no good. It won't work with any programs that do not handle ePub 3. Here's code that will work in both ePub 2 and ePub 3. Never use vw and vh. They will break things.
HTML
Code:
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="en">
<head>
<title>White Nights</title>
<link href="9780312384425.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="cover">
<img alt="" class="cover" src="Images/9781429990110.jpg"/>
</div>
</body>
</html>
CSS
Code:
body {
widows: 1;
orphans: 1;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
text-align: justify;
}
img {
max-height: 100%;
max-width: 100%;
}
.cover {
text-align: center;
text-indent: 0;
height: 100%;
}
Another issue I saw in earlier code. Do not put in any sort of line-height. That causes a problem with software that allows you to adjust the line height such as on a Kobo Reader. Also, do not put in ant sort of overall L/R margins. Same issue. Kobo Won't be able to properly set the L/R margins.