page-break properties both in local CSS and external CSS. See Page Breaks, Turning off Hyphenation and Horizontal Bolding Bug in iBooks for more details.One of the most annoying failings of iBooks to date has been its lack of support of one of CSS' most basic controls: when and where to place page breaks in the text. Without this control, you can't force a header to begin at the top of the page, nor keep a caption with its paragraph.
When the new version of iBooks came out yesterday, I heard (through Fabio Brivio on Twitter) that these page break controls were now supported, but I couldn't seem to make it work. I asked Fabio if he would share his EPUB with me, and he kindly emailed it. (Thanks, Fabio!)
After pulling it apart, and applying it to my files, I finally figured it out what the key was: iBooks only supports CSS page break controls when they're in a local style sheet. They won't work in an external one.
So, if you want each of your h3 elements to begin on a new page, in the head section of each of the pages in your EPUB, add:
<style type="text/css">
h3 {page-break-before: always;}
</style>
Other possible values for
page-break-before include avoid, if you'd rather a page break did not occur right before the element, and the very interesting, but not yet supported left and right, which push the element in question to the first left or right page, respectively.You can also create page breaks after an element (or group of elements). Use
page-break-after. Finally, you can use
page-break-inside: avoid to keep an element on a single page. For example, you might apply this rule to a div that contained an image and its caption.CSS also has ways for controlling widows and orphans (stray lines that appear at the top and bottom of pages), but unfortunately, iBooks doesn't yet support them. (Nook, and other ereaders, do.)
I cover these page break features in detail in my book, HTML, XHTML, and CSS: Visual QuickStart Guide, which is a big help for any EPUB book designer who wants to create a really polished ebook. You can learn more about how to get inside an EPUB file, and what to do there, in my EPUB Straight to the Point.
At some point, iBooks will properly support all of the page break values, and will support them both in local CSS as well as the more useful and common external CSS. You'll read about it here first!
I've just tested it in iBooks 1.2 on an iPad running 3.2, and it doesn't work, either as an internal stylesheet in the head or inline. So I'm guessing it must be limited to iOS 4.2. Then I wonder if with iOS 4.2, will it work in iBooks 1.1.2.
ReplyDelete@Rick, Fabio says "4.2 + 1.1.2 page break does not work in my test. Require iOS 4.1+ iBooks 1.2".
ReplyDeleteI tried it on iPhone with iOS 4.0 and iBooks 1.2 and it does not work there.
This is really, really good news.
ReplyDeleteThis comment has been removed by the author.
ReplyDeletePage break does not work on my iPhone with iOS 4.2.1 and iBooks 1.2.
ReplyDeleteThanks, Bill. When a post is older than 2 weeks, I put the comments on moderation. I haven't been able to test page breaks on my iPhone--thanks for the info.
ReplyDelete@Senthilnathaswami:
ReplyDeleteGood news? No, not at all...
With the old version of iBooks (I expect it to be 1.1 or sth. like that) page-breaks just worked fine for us. Even when the CSS was declared in the external stylesheet!
Now we have to feed every single xhtml-page with the same css-code...
page-break-before is now honored in iBooks 1.3 under iOS 4.3.3 on the iPhone.
ReplyDeleteI've tried this after reading in iBookstore Asset Guide 4.7 Rev 3 that page-breaks are supported. It hasn't worked for me. Given that, and the comments above, it seems too unreliable to use css for page-breaks. Guess I'll stick to seperating documents unless I hear otherwise.
ReplyDelete