Hi the bulk of the work of my epub3 book is done but i'm finding quite different results in different readers. It has a lot of photographs.
The nicest reader seems to be google play books, which seems to work with the layout (reflowable) as intended. Adobe Digital Editions seems to be relatively good. Readium is making a mess splitting images between pages.
Then there is some odd alignment issues with pages with just photo's sometimes dropping a line on opposite pages.
I would like to get things perfect but it seems i'm having to fight the different readers to get my layouts looking as I intended.
With dual pages I want to start fresh on the left side usually.
Then i want to do things like centre an image on the left page and have a centred paragraph on the right page. Sometimes this mostly works other times it's not so good.
e.g
<body class="bodystyle" lang="en-UK">
<div class="inthemiddle">
<figure>
<img class="photo" src="../Images/image165.png"/>
</figure>
</div>
<div class="inthemiddle">
<p class="calibre56" id="id24">We are blinded by our eyes,<br/>which give us more illusion<br/>than sight.</p>
</div>
</body>
.calibre56 {
background: transparent;
border-bottom-color: currentColor;
border-bottom-style: none;
border-bottom-width: 0;
border-top-color: currentColor;
border-top-style: none;
border-top-width: 0;
color: #374f6c;
display: block;
font-family: Arno Pro;
font-size: 1.41667em;
font-style: normal;
font-variant: normal;
font-weight: light;
letter-spacing: normal;
line-height: 0.33in;
margin-bottom: 0.5em;
margin-left: 0.01in;
margin-right: 0;
margin-top: 0.5em;
orphans: 2;
padding-bottom: 0;
padding-top: 0;
page-break-after: auto;
page-break-before: auto;
page-break-inside: auto;
text-align: center;
text-decoration: none;
widows: 2
}
.inthemiddle{
margin: 50vh 0 0 0; /* vh stands for viewport height*/
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color:#222222;
orphans:1;
page-break-after:auto;
page-break-before:auto;
text-align:center;
text-decoration:none;
text-indent:0;
text-transform:none;
widows:1;
}
figure {
border:0px;
text-align: center;
border-color: red;
display: block;
margin-top: .5em;
margin-bottom: .5em;
margin-left: 1%;
margin-right: 1%;
max-width: 100%;
max-height: 100%;
padding: 0;
background-color: #ffffff;
page-break-inside: avoid;
}
.photo {
display: block;
height: auto;
line-height: 1.2;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
margin-top: auto;
max-width: 99%;
width: auto
}
.bodystyle {
display: block;
font-size: 1em;
height: 98%;
line-height: 1.2;
margin-bottom: 1em;
margin-left: 1em;
margin-right: 1em;
margin-top: 1em;
padding-left: 0;
padding-right: 0
direction: ltr;
background-color: #ffffff;
}
Any suggestions please.