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?

Sekhemty
  • 6,194
  • 5
  • 34
  • 69
WordBear
  • 647
  • 5
  • 12

1 Answers1

3

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.

Sekhemty
  • 6,194
  • 5
  • 34
  • 69
  • 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