View Full Version : Page Breaks for Epub with InDesign


markdraper
07-14-2011, 04:43 AM
Hi this is the first time I am delving into epubs.

I have a book designed with indesign, with images that I wish to convert to a epub for use on ipads, iphones, kindle etc...

but I cannot get the pages to break in the right place. I know that epubs are just really a continuous stream of text and images, but they are just not displaying correctly on the mobile devices.

Can anyone help me with my problem.

Cheers

coldplayplayer
07-14-2011, 06:05 AM
I managed to get this working today. It may not be the correct way of doing it, but it did work for me.

After I've exported from InDesign as an ePub, I use Calibre to Tweak it. I edit my XHTML and CSS with Notepad++ on the PC or Text Wrangler on my MAC.

In the XHTML, at every point I want to force a page break, I insert the following code:
<h1></h1>


In my CSS for the template I add the following code:
h1{
page-break-before: always;
}

Unsure if page-break-before or page-break-after is the better option. I'm still a NewB when it comes to ePubs so no doubt one of the gurus out there has a better fix, but like I say it definitely worked for me today.

Jellby
07-14-2011, 06:45 AM
It's better to use something like <div class="pagebreak"></div>, rather than <h1></h1>, which has implicit semantics.

Some readers discard empty divs, so it might be necessary to use <div class="pagebreak">&nbsp;</div>.

DaleDe
07-14-2011, 12:11 PM
I managed to get this working today. It may not be the correct way of doing it, but it did work for me.

After I've exported from InDesign as an ePub, I use Calibre to Tweak it. I edit my XHTML and CSS with Notepad++ on the PC or Text Wrangler on my MAC.

In the XHTML, at every point I want to force a page break, I insert the following code:
<h1></h1>


In my CSS for the template I add the following code:
h1{
page-break-before: always;
}

Unsure if page-break-before or page-break-after is the better option. I'm still a NewB when it comes to ePubs so no doubt one of the gurus out there has a better fix, but like I say it definitely worked for me today.

page-break-before is fine. I have used this without problems on many eBooks and as I am not div happy I seldom use them. Others seem to use nothing else.

Dale

markdraper
07-18-2011, 08:43 AM
thanks for your input, but I am not very of-ay with html, css.

could someone explain in simple terms, sorry to be a pain.

DaleDe
07-18-2011, 10:34 AM
thanks for your input, but I am not very of-ay with html, css.

could someone explain in simple terms, sorry to be a pain.

This is why we have a wiki. Lots of terms explained.

Dale

eping
07-18-2011, 11:49 PM
The best way is HTML split .
All eReaders will start a new page with another HTML file,
aboves ways of using CSS will fail on iBooks(on iPad, iPhone)

markdraper
07-19-2011, 12:24 PM
eping, I have looked for doing a html split, but all I can find is printer page breaks and it does not work on the epubs.

DaleDe
07-19-2011, 12:29 PM
eping, I have looked for doing a html split, but all I can find is printer page breaks and it does not work on the epubs.

If you have control over the CSS entries you can add the page break there and it will work.

Dale

eping
07-19-2011, 11:26 PM
You can split a big document into small documents(on chapter), then create a book with these documents.
This is a classic method for InDesign users.

Chang
07-20-2011, 01:59 AM
Which InDesign version are you using? There are different ways to make page breaks in InDesign.

CS3 & CS4: Divide your .indd file into separate .indd files. Create book from your .indd files and export EPUB from the book. Each .indd file means page break.

CS5: You can use paragraph styles as page breaks. You can edit this from Layout -> Table of Contents Styles. Add the paragraph styles for TOC and make sure those are level one in TOC settings. Then in EPUB export settings you can choose to use your TOC setting and by selecting "Use First Level Entries as Chapter Breaks" it will chop your .indd file wherever there are level one TOC paragraph style.

CS5.5: Almost the same as above but you can select one paragraph style to make page breaks in the EPUB export settings.

No need to play with HTML to create page breaks.

markdraper
07-20-2011, 05:51 AM
I am using InDesign 5.5 as it was a good deal easier to do anchoring of images to places on the pages.
I'm sure I have tried that, let me have another go.

But is there a way to break the pages, if there is not text with a paragraph style?

Toxaris
07-20-2011, 06:55 AM
I can't say anything about ID, since I don't use the program. However, a page break can always be forced. Either with a separate document or the attribute 'page-break-before-always'. Try to have each chapter in a separate XHTML document though, that will make things work better.

markdraper
07-20-2011, 07:18 AM
I have tried that, but it didn't seem to work, should I paste a part of the code I want it to break at?

also, is it just something I paste into the html before the picture, or is there anything else I need to place in the head of the text?

charleski
07-20-2011, 10:08 AM
Unfortunately, page-break-before won't work on the iPad, which may be why you're having problems. The best solution is to open the file in Sigil and split the book into different files wherever you want a pagebreak.

Alternatively, if you really have to avoid post-processing the exported file, it is possible to do it in InDesign using the method I outlined here (http://www.mobileread.com/forums/showpost.php?p=1641232&postcount=2).

DiapDealer
07-20-2011, 10:20 AM
Unfortunately, page-break-before won't work on the iPad, which may be why you're having problems.
Sorry to butt in on someone's thread here, but are you referring to the iBooks app on the iPad? Or does the "page-break-before" CSS attribute simply not work at all for any reader app on the iPad? I can live with the former, but the latter would cause me all kind of headaches. :o

charleski
07-20-2011, 10:27 AM
That's a good question, since the defect quite possibly lies in the underlying WebKit code that iBooks uses. Unfortunately I don't know the answer.

DiapDealer
07-20-2011, 12:38 PM
Hmmm. I believe the WebKit code is used by calibre's ebook viewer, too, and if memory serves... it doesn't honor page-break-before either.

markdraper
07-21-2011, 04:19 AM
no problems DiapDealer, I am still learning all this, so any information is very helpful.

virtual_ink
07-21-2011, 07:40 PM
DiapDialer, I can at least confirm this is the case for iBooks but I'm yet to try any other apps on the iPad.

Markdraper, I am using the method outlined by charleski (thanks again!). Followed by a multi-file find/remove of all <p class="break"/> lines in the resulting files, using TextWrangler. That the best solution I can find to date.

coldplayplayer
07-22-2011, 12:05 AM
Reading the thread, perhaps you still don't have an answer. I see you are using InDesign CS 5.5. One method is to create lots of mini documents within InDesign, IE break your Document up into logical smaller documents. Then you create a book in InDesign and all your smaller documents then are added to the book. I can guarantee you that when InDesign exports the book to ePub, each document will start on its own page. If you try this method, you can't use the File -> Export method. Instead on the Books window in the top right hand corner, you select the down arrow and from the drop down list select export to ePub from there. This had me stumped for a few minutes a couple of weeks ago.

I'm not sure why people say you iBooks on the iPad and iPhone wont recognise page breaks from the CSS. I've done it, I do it every day and it works, I promise you. Here is a sample of my CSS and note the last line.

p.Header {
font-family : "Qlassik Bold", sans-serif;
font-weight : bold;
font-style : normal;
font-size : 2em;
text-decoration : none;
font-variant : normal;
line-height : 1.2;
text-align : left;
color : #d90000;
text-indent : 0px;
margin : 0 0 4em 0;
page-break-before: always;
}
So everything tagged in the XHTML as a header ie: <p class="Header">Logbook 463</p> has a page break before it.

I've attached some images to show that it works. Also an image showing the menu you use from InDesign to export a Book to ePub.

I'm happy to send you some of my XHTML and CSS if it will help?

virtual_ink
07-22-2011, 03:09 AM
CPP, wow, this is working for me - great stuff.

This has made me revisit this post. In the comments section, there is still some differing reports: http://www.pigsgourdsandwikis.com/2010/12/page-breaks-in-ibooks-12.html

To the RHS of this site: http://threepress.org/document/epub-validate/ I noticed this suggestion: "Once you have validated your document, consider uploading it to Ibis Reader to view it in our highly-conformant EPUB reader."

I've just tried viewing my epub using this CSS in Ibis, and it doesn't work there. If Ibis is highly-conformant, does that mean page-breaks are not supported officially by epub? And that some other e-readers may also ignore this CCS?

charleski
07-23-2011, 05:09 AM
One method is to create lots of mini documents within InDesign, IE break your Document up into logical smaller documents.

Splitting the ePub into separate files at every point you want a page break is the only sure way of getting it to work universally. There are enough reports of people still having problems with the CSS method in iBooks that it can't be regarded as reliable. Creating a Book with separate Documents in it is the old way of doing this in InDesign, and it still works, but InDesign will now split the output for you if you use a particular style at the top of each new page, as I outlined.


CPP, wow, this is working for me - great stuff.

This has made me revisit this post. In the comments section, there is still some differing reports: http://www.pigsgourdsandwikis.com/2010/12/page-breaks-in-ibooks-12.html

To the RHS of this site: http://threepress.org/document/epub-validate/ I noticed this suggestion: "Once you have validated your document, consider uploading it to Ibis Reader to view it in our highly-conformant EPUB reader."

I've just tried viewing my epub using this CSS in Ibis, and it doesn't work there. If Ibis is highly-conformant, does that mean page-breaks are not supported officially by epub? And that some other e-readers may also ignore this CCS?

Threepress' Ibis is NOT 'highly-conformant', despite their claims. This is just one example of the problems with their on-line reader. The sad fact is that there isn't any reader that fully matches every part of the ePub2 spec, though Adobe's probably comes closest.

coldplayplayer
07-23-2011, 09:12 PM
but InDesign will now split the output for you if you use a particular style at the top of each new page, as I outlined.

Charleski, do you mean that the result of your method will produce an individual XHTML for each break? I'm still very much a NewB to ePub but I can see a some value in this. It would be easier to manage changes with individual XHTML files rather than one behemoth for a 240+ page book.

Adjust
07-25-2011, 12:00 AM
I still work with the book feature. Even in CS5.5

I can't find/don't know of a way that 5.5 will break a document into separate files...From everything I've read/watched all it does is insert the Page Break code... So a graphic heavy document WILL exceed the required File size limit...

charleski
07-25-2011, 07:03 AM
Yes, if you look at the files I attached in my earlier post, you'll see that InDesign is actually breaking the ePub up into separate files with this method rather than simply using a css attribute. This method still causes extraneous empty paragraphs at the top of each page break, so it's not ideal, though.

amarie0
07-29-2011, 01:09 AM
In CS5.5 there's a workaround you can use to force ID to split the doc (at export, into multiple XHTML files, thus creating a real page break) at any given point, even if there's no paragraph style there (the style you choose in the Export to EPUB Options dialog box).

The trick is to anchor a small, white-filled frame (no border) as an inline object in an empty paragraph right *before* where you want the page to break:

Last line of text in previous section/chapter.
[anchor graphic here in its own paragraph]
New Chapter or section starts here

Then select the placeholder graphic with the Selection tool and go to Object > Object Export Options (new in CS5.5). Turn on Custom Rasterization in the EPUB/HTML panel so the object gets included in the output and rasterized. (Since it's white you shouldn't see it.) In that same dialog box, turn on Insert Page Break: After Image.

Now you can copy/paste that paragraph with the graphic to any other spot you want a page break.

You want to paste it *before* the page break because otherwise you end up with extra white space above the first line of text in the new chapter.

I didn't get a chance to include this cool tip in my Lynda.com video (the InDesign CS5.5 to EPUB one just came out) but will be writing it up at some point on indesignsecrets.com.

AM Concepcion

Toxaris
07-29-2011, 02:35 AM
Charleski, do you mean that the result of your method will produce an individual XHTML for each break? I'm still very much a NewB to ePub but I can see a some value in this. It would be easier to manage changes with individual XHTML files rather than one behemoth for a 240+ page book.

Actually, splitting the book into separate XHTML files for each chapter is regarded as common sense. It gives you more flexibility regarding maintaining and editing the book and limits the change you hit the filesize barrier on some reading devices.

JSWolf
07-29-2011, 11:58 AM
if you do not follow the mobile ADE standards, it won't work on some readers and that's not going to be good at all.

douglsmith
10-19-2011, 01:43 PM
The trick is to anchor a small, white-filled frame (no border) as an inline object in an empty paragraph right *before* where you want the page to break

I tried a bunch of variations on that technique but was not able to get it to force a break in the current version of InDesign 5.5 (7.5.1).

However, I was able to make it work by creating a text frame containing only a space character and give that the paragraph style I'm using to break the ePub into multiple files on export. Then I just place a copy of that text frame somewhere on the page where I would like the break to appear.

I also created an object style for the text frame with the name "break", which shows up as the class of the exported div tag. That makes it easy to search for it in the HTML and remove it from the final ePub files.

JSWolf
10-19-2011, 01:49 PM
Would it not be easier to have a separate flow (XML) then to have a page break?

DaleDe
10-19-2011, 03:57 PM
Would it not be easier to have a separate flow (XML) then to have a page break?

She already has the page break method in the CSS which will work fine. It very much depends on the book and the length of the chapters. I sometimes use a separate file for each chapter but if there are a lot of chapters and they are short it is much easier to deal with multiple chapters per file. There is no inherent right way. Either will work equally well.

Dale

JSWolf
10-19-2011, 04:14 PM
Most books I've been reading lately would not work as a single XML with page breaks. Plus, page breaks may or may not work well with iBooks.

amarie0
10-21-2011, 10:46 AM
I tried a bunch of variations on that technique but was not able to get it to force a break in the current version of InDesign 5.5 (7.5.1).

You are absolutely right, I was wrong. The technique I described only inserts the CSS for page break, it doesn't actually break up the file. I filed it as a feature request for CS6 ... we need more flexibility in InDesign to chunk up a single INDD into multiple HTML files at export.

I like your solution. Thanks!

AM

virtual_ink
10-28-2011, 01:15 AM
AM, if you have any sway with Adobe could you please (if you deem a good idea) request an option to Break Document at Multiple Paragraph styles (my itals).

The reason I suggest this is, you could then split the book at both section and chapter breaks, presuming there might be a different paragraph style for each heading. I currently use a paragraph style called "break" and delete it from the final code. Will have to look into the XML thing, its all still news to me.

Cheers!

DaleDe
10-28-2011, 12:10 PM
AM, if you have any sway with Adobe could you please (if you deem a good idea) request an option to Break Document at Multiple Paragraph styles (my itals).

The reason I suggest this is, you could then split the book at both section and chapter breaks, presuming there might be a different paragraph style for each heading. I currently use a paragraph style called "break" and delete it from the final code. Will have to look into the XML thing, its all still news to me.

Cheers!

I believe you can create your own CSS for Indesign so you can simply code the CSS to do the page breaks and the problem is solved.

Dale

virtual_ink
10-29-2011, 08:54 PM
I don't think all devices honor page breaks? iBooks wasn't for a long time. I'm still working on the premise that epubs need to be split into separate html documents in order for chapters to start on a new page.