Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 08-15-2010, 12:29 PM   #1
alexvallette
Member
alexvallette began at the beginning.
 
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
Click image for larger version

Name:	part_1.jpg
Views:	135
Size:	179.6 KB
ID:	56711   Click image for larger version

Name:	part_2.jpg
Views:	141
Size:	90.3 KB
ID:	56712  
alexvallette is offline   Reply With Quote
Old 08-15-2010, 12:31 PM   #2
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,426
Karma: 19135915
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Make each place where you want a page break a separate flow. That way, you have them starting on a fresh screen page.
JSWolf is offline   Reply With Quote
Old 08-15-2010, 12:44 PM   #3
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 15,222
Karma: 5940081
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by alexvallette View Post
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.
theducks is offline   Reply With Quote
Old 08-15-2010, 03:08 PM   #4
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,426
Karma: 19135915
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
But, if you have a document that's too large for mobile ADE, then splitting the flows is a better idea.
JSWolf is offline   Reply With Quote
Old 08-30-2010, 02:55 PM   #5
alexvallette
Member
alexvallette began at the beginning.
 
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

Click image for larger version

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

Click image for larger version

Name:	IMG_0173.PNG
Views:	80
Size:	121.5 KB
ID:	57399
alexvallette is offline   Reply With Quote
Old 08-30-2010, 03:57 PM   #6
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
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.
charleski is offline   Reply With Quote
Old 08-31-2010, 05:47 PM   #7
alexvallette
Member
alexvallette began at the beginning.
 
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?
Attached Files
File Type: epub epub_test_images.epub (8.31 MB, 77 views)
alexvallette is offline   Reply With Quote
Old 08-31-2010, 07:35 PM   #8
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
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.)
charleski is offline   Reply With Quote
Old 09-01-2010, 03:57 AM   #9
alexvallette
Member
alexvallette began at the beginning.
 
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
alexvallette is offline   Reply With Quote
Old 09-01-2010, 05:09 AM   #10
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
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.
charleski is offline   Reply With Quote
Old 09-06-2010, 08:27 AM   #11
alexvallette
Member
alexvallette began at the beginning.
 
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?
alexvallette is offline   Reply With Quote
Old 09-06-2010, 08:53 AM   #12
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
Join Date: Sep 2009
Device: PRS-505
Quote:
Originally Posted by alexvallette View Post
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.
charleski is offline   Reply With Quote
Reply

Tags
blank page, css, image

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 05:35 AM.


MobileRead.com is a privately owned, operated and funded community.