4

I'm learning to create epubs with InDesign. If you want a particular element inside a chapter (e.g. a subheading) to appear at the top of the next page, you can assign it a CSS style that has been designated for that purpose.

However, the CSS is really just a gimmick; the file is literally split, with the text you want to appear at the top of the next page beginning the new file.

I have separate files for each of my chapters. But imagine a chapter that has several subheadings that are supposed to appear at the top of different pages. I don't want to create a separate file for each subheading.

So is there a CSS style that will remove an element from the normal flow and force it to appear at the top of the next page, so I don't have to literally split my file into separate files?

2

It can be accomplished with the page-break-after (link) or page-break-before (link) CSS properties. Pretty obviously, these create a page break after or before the element that they are applied on.


Here are a couple of examples of their use:

page-break-after

CSS style

.newpage {
    page-break-after:always;
}

HTML code

<p class="newpage">This text is on a page. The text will be split after this paragraph.</p>

<p>This text is on the following page, after the split.</p>

page-break-before

CSS style

.newpage {
    page-break-before;
}

HTML code

<p>This text is on a page. The text will be split after this paragraph.</p>

<p class="newpage">This text is on the following page, after the split.</p>

As you can see, they accomplish the same thing with a small difference (where you should put the property itself); depending on the situation, one could be more appropriate than the other.

I tested it with Calibre internal reader and on a Kobo Glo device, and it works in both of them.

  • I changed page-break-after to page-break-before and it does exactly what I wanted. ;) – WordBear Jan 27 '17 at 18:41
  • On second glance, I see that your solution is fine as is; I guess there are two different ways of accomplishing the same thing. – WordBear Jan 27 '17 at 19:05
  • Yes, they both do the same thing, the only difference is where you should put the styling. Anyway, I've expanded my answer to include also a page-break-before example. – Sekhemty Jan 27 '17 at 19:43
  • Another tip: I just learned about a second rule "for future devices." I don't know any details, but here it is: new-page { page-break-before: always; break-before: always; /* for future devices */ } – WordBear Jan 27 '17 at 22:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.