About page-break

icearch · Yesterday, 04:24 AM

page-break-after
page-break-before
page-break-inside

How well are they supported in epub3 and 2 now? I have used them in some case but they tend to fail.

The only certain way I know to let content start in a new page is creating a new xhtml file. But some web novel can have 1000 chapters, it's tedious to have 1000 xhtml files.

So how well are they work exactly now? How can I guarantee a page break?

Karellen · Yesterday, 05:37 AM

Those tags are deprecate:
https://developer.mozilla.org/en-US/...e-break-inside

Should use:
https://developer.mozilla.org/en-US/...s/break-inside

Though the Libra2 does not recognise the newer tag and still prefers the deprecated tag.

Use both tags in your CSS. Something like this...
.nopagebreak {
break-inside: avoid;
page-break-inside: avoid;
}

JSWolf · Yesterday, 06:18 AM

Quote:

Originally Posted by icearch

page-break-after
page-break-before
page-break-inside

How well are they supported in epub3 and 2 now? I have used them in some case but they tend to fail.

The only certain way I know to let content start in a new page is creating a new xhtml file. But some web novel can have 1000 chapters, it's tedious to have 1000 xhtml files.

So how well are they work exactly now? How can I guarantee a page break?

Instead of doing a page break before or after, just split the HTML where you want the page break. That way the page break will 100% work.

icearch · Yesterday, 06:40 AM

The tutorial I see is so old...
I'm going to try break before and after later. Thank you.

icearch · Yesterday, 06:41 AM

Quote:

Originally Posted by JSWolf

Instead of doing a page break before or after, just split the HTML where you want the page break. That way the page break will 100% work.

Bro, do you read other's post or not?

icearch · Yesterday, 08:42 AM

Quote:

Originally Posted by Karellen

Those tags are deprecate:
https://developer.mozilla.org/en-US/...e-break-inside

Should use:
https://developer.mozilla.org/en-US/...s/break-inside

Though the Libra2 does not recognise the newer tag and still prefers the deprecated tag.

Use both tags in your CSS. Something like this...
.nopagebreak {
break-inside: avoid;
page-break-inside: avoid;
}

Sadly, break-before: always; and break-before: page; does absolute nothing.
At least in Sigil's readium plugin.
Does this have something to do with the plugin? Or it will happen in other readers out there?

icearch · Yesterday, 08:55 AM

And more test, yes, lot's of reader software does not work. Some do though.
Why it is so hard to put such basic and simple function to work?

j.p.s · Yesterday, 12:13 PM

Quote:

Originally Posted by JSWolf

Instead of doing a page break before or after, just split the HTML where you want the page break. That way the page break will 100% work.

Quote:

Originally Posted by icearch

Bro, do you read other's post or not?

Very long history of not, despite numerous complaints from numerous people..

RbnJrg · Yesterday, 01:42 PM

Quote:

Originally Posted by icearch

page-break-after
page-break-before
page-break-inside

How well are they supported in epub3 and 2 now? I have used them in some case but they tend to fail.

The only certain way I know to let content start in a new page is creating a new xhtml file. But some web novel can have 1000 chapters, it's tedious to have 1000 xhtml files.

So how well are they work exactly now? How can I guarantee a page break?

You should use:

Code:

page-break-after: always|avoid; /* This is for epub2 (ADE RMSDK) */
break-after: always|avoid; /* This is for epub3 */
-webkit-column-break-after: always|avoid; /* This is for epub3, for ereaders that use webkit rendering engine */

The same for break-before and break-inside. So, if for example you want to avoid a break after a h* tag, then you should use the following style:

Code:

.break_avoid {
   page-break-after: avoid; /* This is ignored by epub3 */
   break-after: avoid; /* This is ignored by epub2 */
   -webkit-column-break-after: avoid; /* This is ignored by epub2 */
}

and

Code:

   <h2 class="break_avoid">This is a Title</h2>

   <p>Blah, blah, blah... (a long paragraph)</p>

Try this code in Calibre, Thorium, ADE, Sigil's plugins (Readium, BibiReader, JSReader), KOReader, Kobo for Android, Lithium, Reasily, PocketBook, Cantook, Infinity Reader. BookFusion.

If you don't want to use -webkit-column-break-after: avoid, then use:

Code:

   break-after: avoid-column

but your style must have one of them. Of that way, an alternative style would be:

Code:

.break_avoid {
   page-break-after: avoid; /* This is ignored by epub3 */
   break-after: avoid; /* This is ignored by epub2 */
   break-after: avoid-column; /* This is ignored by epub2 */
}

icearch · Yesterday, 07:22 PM

Quote:

Originally Posted by RbnJrg

You should use:

Code:

page-break-after: always|avoid; /* This is for epub2 (ADE RMSDK) */
break-after: always|avoid; /* This is for epub3 */
-webkit-column-break-after: always|avoid; /* This is for epub3, for ereaders that use webkit rendering engine */

You are absolutely right. Last night I asked one of my programmer friend. He found out that Readium core does not devied page in the supposed way, they use multi column to do page cut.

Like, who in the hell would thought of that?

Our final solution are just like yours, but add !important after each value, so it can have higher priority.

Thank you very much for your detailed explanation!

icearch · Yesterday, 07:36 PM

By the way, the reader plugins in Sigil are pretty old, like the last update is in 2023, and the whole readium homepage in Github just vanished?

Is there any new / better reader plugin or whole other new ways to verify the file I'm making on the fly?

RbnJrg · Yesterday, 09:33 PM

Quote:

Originally Posted by icearch

By the way, the reader plugins in Sigil are pretty old, like the last update is in 2023, and the whole readium homepage in Github just vanished?

Is there any new / better reader plugin or whole other new ways to verify the file I'm making on the fly?

Test your epubs with the Sigil's plugin if you wish (I do it), don't worry about they are "old"

RbnJrg · Yesterday, 09:43 PM

Quote:

Originally Posted by icearch

You are absolutely right. Last night I asked one of my programmer friend. He found out that Readium core does not devied page in the supposed way, they use multi column to do page cut.

Yes, indeed. And for that reason you need to have in the style:

Code:

   
   break-after: avoid;
   -webkit-column-break-after: avoid; /* This is for ereaders that employ multicolumn to display pages */

or

Code:

   
   break-after: avoid;
   break-after: avoid-column; /* This is for ereaders that employ multi-column to display pages */

In my tests, practically all epub3 ereaders display pages in multi-column mode; for that reason the property "break-after: avoid;" doesn't work there (you need "break-after: avoid-column;" or the webkit's alternative).

Quote:

Like, who in the hell would thought of that?

It's quite common nowadays

Quote:

Our final solution are just like yours, but add !important after each value, so it can have higher priority.

Ok, no problem with that.

Quote:

Thank you very much for your detailed explanation!

You are welcome

Turtle91 · Today, 07:53 AM

The only addition I would make is if you are trying to force/avoid a break after every xxxx element, then just add the code to that element’s css rather than adding a class to all of them. That cleans up your html a bit.

Of course, you could keep the code as its own class as well for those one-off elements that might need it.

Yesterday, 04:24 AM	#1
icearch Connoisseur Posts: 54 Karma: 10 Join Date: Nov 2025 Device: none	About page-break page-break-after page-break-before page-break-inside How well are they supported in epub3 and 2 now? I have used them in some case but they tend to fail. The only certain way I know to let content start in a new page is creating a new xhtml file. But some web novel can have 1000 chapters, it's tedious to have 1000 xhtml files. So how well are they work exactly now? How can I guarantee a page break?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
page-break-before: always;	avresbo	Kobo Reader	1	03-02-2023 09:30 AM
Do you use page-break-after and page-break-inside?	fluoresce	ePub	14	05-24-2017 02:57 AM
No page break for H2	RickAltman	Calibre	2	06-25-2012 12:02 PM
PAGE BREAK	JFS-NMF	Recipes	0	03-04-2011 10:15 AM
Page break before <b>	flowoeB	Calibre	14	04-12-2009 04:05 PM

Yesterday, 05:37 AM	#2
Karellen Wizard Posts: 1,744 Karma: 9501034 Join Date: Sep 2021 Location: Australia Device: Kobo Libra 2	Those tags are deprecate: https://developer.mozilla.org/en-US/...e-break-inside Should use: https://developer.mozilla.org/en-US/...s/break-inside Though the Libra2 does not recognise the newer tag and still prefers the deprecated tag. Use both tags in your CSS. Something like this... .nopagebreak { break-inside: avoid; page-break-inside: avoid; }

Yesterday, 06:40 AM	#4
icearch Connoisseur Posts: 54 Karma: 10 Join Date: Nov 2025 Device: none	The tutorial I see is so old... I'm going to try break before and after later. Thank you.

Yesterday, 08:55 AM	#7
icearch Connoisseur Posts: 54 Karma: 10 Join Date: Nov 2025 Device: none	And more test, yes, lot's of reader software does not work. Some do though. Why it is so hard to put such basic and simple function to work?

Yesterday, 07:36 PM	#11
icearch Connoisseur Posts: 54 Karma: 10 Join Date: Nov 2025 Device: none	By the way, the reader plugins in Sigil are pretty old, like the last update is in 2023, and the whole readium homepage in Github just vanished? Is there any new / better reader plugin or whole other new ways to verify the file I'm making on the fly?

Today, 07:53 AM	#14
Turtle91 A Hairy Wizard Posts: 3,438 Karma: 20456789 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	The only addition I would make is if you are trying to force/avoid a break after every xxxx element, then just add the code to that element’s css rather than adding a class to all of them. That cleans up your html a bit. Of course, you could keep the code as its own class as well for those one-off elements that might need it.