08-15-2010, 11:29 AM | #1 |
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? |
08-15-2010, 11:31 AM | #2 |
Resident Curmudgeon
Posts: 75,892
Karma: 134368292
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.
|
Advert | |
|
08-15-2010, 11:44 AM | #3 | |
Well trained by Cats
Posts: 30,376
Karma: 58053698
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
Code:
page-break-before: always; |
|
08-15-2010, 02:08 PM | #4 |
Resident Curmudgeon
Posts: 75,892
Karma: 134368292
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 |
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 |
Advert | |
|
08-30-2010, 02:57 PM | #6 |
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, 04:47 PM | #7 |
Member
Posts: 10
Karma: 10
Join Date: Aug 2010
Location: FRANCE
Device: iphone/ipad
|
@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? |
08-31-2010, 06:35 PM | #8 |
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 |
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 |
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 |
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? |
09-06-2010, 07:53 AM | #12 |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
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.
|
Tags |
blank page, css, image |
|
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 |