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

Quote:

Originally Posted by alexvallette

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" >

Code:

  
  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

Click image for larger version

Name: IMG_0172.PNG
Views: 343
Size: 383.6 KB
ID: 57398

Click image for larger version

Name: IMG_0173.PNG
Views: 318
Size: 121.5 KB
ID: 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/0...alformed-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

Quote:

Originally Posted by alexvallette

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.

08-15-2010, 11:29 AM	#1
alexvallette Member Posts: 10 Karma: 10 Join Date: Aug 2010 Location: FRANCE Device: iphone/ipad	Force page breaks in epubs 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? Attached Thumbnails

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Force open to cover (first) page?	foghat	Calibre	4	04-01-2011 09:54 AM
how to get page breaks before and after images (using epubs In & Out)	lhgrappler	Calibre	9	10-06-2010 11:57 AM
how to make section breaks in epubs	JBNY	Calibre	12	09-16-2010 02:57 PM
Any way to force page breaks when converting HTML to EPUB	Bierkonig	Calibre	23	10-31-2009 01:51 PM
Book Designer 5.0 - How to force a page break	ebookfab	Sony Reader	13	12-26-2008 03:48 AM

08-15-2010, 11:31 AM	#2
JSWolf Resident Curmudgeon Posts: 73,841 Karma: 128597114 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Make each place where you want a page break a separate flow. That way, you have them starting on a fresh screen page.

08-15-2010, 02:08 PM	#4
JSWolf Resident Curmudgeon Posts: 73,841 Karma: 128597114 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	But, if you have a document that's too large for mobile ADE, then splitting the flows is a better idea.

08-30-2010, 01:55 PM	#5
alexvallette Member Posts: 10 Karma: 10 Join Date: Aug 2010 Location: FRANCE Device: iphone/ipad	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

08-30-2010, 02:57 PM	#6
charleski Wizard Posts: 1,196 Karma: 1281258 Join Date: Sep 2009 Device: PRS-505	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.

08-31-2010, 06:35 PM	#8
charleski Wizard Posts: 1,196 Karma: 1281258 Join Date: Sep 2009 Device: PRS-505	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.)

09-01-2010, 02:57 AM	#9
alexvallette Member Posts: 10 Karma: 10 Join Date: Aug 2010 Location: FRANCE Device: iphone/ipad	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/0...alformed-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

09-01-2010, 04:09 AM	#10
charleski Wizard Posts: 1,196 Karma: 1281258 Join Date: Sep 2009 Device: PRS-505	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.

09-06-2010, 07:27 AM	#11
alexvallette Member Posts: 10 Karma: 10 Join Date: Aug 2010 Location: FRANCE Device: iphone/ipad	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?

Advert

Advert