View Full Version : Force page breaks in epubs


alexvallette
08-15-2010, 11:29 AM
Hi all,

I'm designing a child book in epub.

The book will be split into 2 parts first part classical ebook with little images, the second part will have only one big image per "page" so as the parent can tell the story to his child only based on the image.

I have a problem with part 2. I know that epub is intended to be reflowable, but it is important for me to have on the same screen (on ADE, on iPad, Iphone etc..) the image plus the title.

I tried to make one part per image

pict1.xhtml
pict2.xhtml etc..

with html like this:

<body>
<div class="wrapper">
<p><a id="pic1"/></p>
<p class="centerImage"><img src="images/big1.jpg" alt="Le Petit Chaperon Rouge" title="Le Petit Chaperon Rouge"/> Le Petit Chaperon Rouge part dans les bois</p>
</div>
</body>

with css:

.wrapper {
clear:both;
padding-bottom: 5%;
position:relative;
padding-top: 1em;
}

.centerImage {
text-align: center;
height: 100%;
z-index:-1;
position:absolute;
top:0px;
right:0px;
}

The problem is that depending on text size, I have image on one screen and title on the other screen and even a blank extra page before the next image.

Did you have experienced that and could you help solving my problem?

JSWolf
08-15-2010, 11:31 AM
Make each place where you want a page break a separate flow. That way, you have them starting on a fresh screen page.

theducks
08-15-2010, 11:44 AM
Hi all,

I'm designing a child book in epub.

The book will be split into 2 parts first part classical ebook with little images, the second part will have only one big image per "page" so as the parent can tell the story to his child only based on the image.

I have a problem with part 2. I know that epub is intended to be reflowable, but it is important for me to have on the same screen (on ADE, on iPad, Iphone etc..) the image plus the title.

I tried to make one part per image

pict1.xhtml
pict2.xhtml etc..

with html like this:

<body>
<div class="wrapper">
<p><a id="pic1"/></p>
<p class="centerImage"><img src="images/big1.jpg" alt="Le Petit Chaperon Rouge" title="Le Petit Chaperon Rouge"/> Le Petit Chaperon Rouge part dans les bois</p>
</div>
</body>

with css:

.wrapper {
clear:both;
padding-bottom: 5%;
position:relative;
padding-top: 1em;
}

.centerImage {
text-align: center;
height: 100%;
z-index:-1;
position:absolute;
top:0px;
right:0px;
}

The problem is that depending on text size, I have image on one screen and title on the other screen and even a blank extra page before the next image.

Did you have experienced that and could you help solving my problem?

Add to the <body class="your_style" >

page-break-before: always;


Every document with that style will start on a fresh page.

JSWolf
08-15-2010, 02:08 PM
But, if you have a document that's too large for mobile ADE, then splitting the flows is a better idea.

alexvallette
08-30-2010, 01:55 PM
Is there a way with css3 to force an image to take all the room of an "iphone/ipad" page both in landscape and portrait.
And in addition to be sure that the sound reader of the <audio> tag is placed above?

I tried to use the element zindex, but it doesn't work and always display sound reader on top of the image and not above.

HTML:
<body>

<div class="wrapper" align="center">
<a id="pic1"/><audio class="centerSound" src="sons/1.m4a" controls="true" autoplay="false"/>
<img class="centerImage" src="images/big1.jpg" alt="Le Petit Chaperon Rouge" title="Le Petit Chaperon Rouge"/>
</div>
</body>

and CSS:
.centerSound {
height: 100%;
z-index:1;
position:absolute;
}

.wrapper {
clear:both;
padding-bottom: 5%;
position:relative;
padding-top: 1em;
page-break-before:always;
}

.centerImage {
height: 100%;
z-index:-1;
position:absolute;
}

In addition to my "on top"/"above" problem, I also see that the image is dsiplayed on 2 "pages" in landscape mode (90% on page 1 and 10% on page 2)

Sorry for those silly questions but we are experimenting to find the rendering requested.

I hope the 2 images attached will explain a litlle more my questions

57398

57399

charleski
08-30-2010, 02:57 PM
The way to do this that will works on both iBooks (which has its own funky interpretation of the standard) and ADE is to do the following:

css:
div.keeptogether {
display: inline-block;
text-align: center
}

xhtml:
<div class="keeptogether">
<a id="pic1"/><audio src="sons/1.m4a" controls="true" autoplay="false"/>
<svg width="100%" version="1.1" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" height="90%" viewBox="0 0 [image width] [image height]" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="[image width]" height="[image height]" xlink:href="images/big1.jpg"></image>
</svg>
</div>

replace the sections in red with the width and height of the image in pixels.

alexvallette
08-31-2010, 04:47 PM
@Charleski

thank you for the tip but it doesn't seem to work...

I'm a bit desperate to succeed. Could you have a look to my book?

charleski
08-31-2010, 06:35 PM
The <audio> tag will only be recognised in iBooks, which is html5-aware. It's possible to embed audio for ADE using flash, and you could add it through the conditional rules in a page-template.xpgt file so that only ADE readers would see the flash code. (Of course, there's no guarantee that Apple would allow a book with embedded flash on their store, even though it works.)

alexvallette
09-01-2010, 02:57 AM
thanks for the tip.

We'll design the book as if Apple would accept it. If not we will create a non audio version and wait for <audio> acceptance to resubmit the book. Even if it seems that Apple is not really accurate in their checks (http://blog.threepress.org/2010/04/01/itunes-and-malformed-epub/).

Concerning my problem of <audio>+<img> not displayed on the same page in landscape mode. Any advice?

And (sorry for my questions list...) did you ever experienced animation like this in ePubs?
http://anthonycalzadilla.com/css3-ATAT/index.html
=> you must use a webkit browser

charleski
09-01-2010, 04:09 AM
As I suggested before, try rescaling the image with svg and wrapping the image and audio element in an inline-block. You might need to decrease the height="90%" attribute a bit.

alexvallette
09-06-2010, 07:27 AM
Thanks Chareski. I turn the 90% into 80% and it seems to work well.

For my knowledge, what the height="90%" stands for in the <svg> tag?

charleski
09-06-2010, 07:53 AM
Thanks Chareski. I turn the 90% into 80% and it seems to work well.

For my knowledge, what the height="90%" stands for in the <svg> tag?

It indicates the percentage of the vertical height of the containing block that will be occupied by the image. In this case the svg element is contained by the <body> block, whose height should be the same as the screen, so the image ends up being xx% of the screen height.