About page-break

[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?

[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;
}

[JSWolf]

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]

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

[icearch]

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]

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]

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]

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.

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]

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:

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:

.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

   <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:

   break-after: avoid-column

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

.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]

Originally Posted by RbnJrg

You should use:

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]

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]

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]

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:

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

or

   
   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).

Like, who in the hell would thought of that?

It's quite common nowadays

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

Ok, no problem with that.

Thank you very much for your detailed explanation!

You are welcome

[Turtle91]

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.

[icearch]

Originally Posted by Turtle91

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.

I think class really doesn't take that much space, so no harm to use when needed. If I want to not use this feature, there would just be more hassle I think.

In fact, just to my own preference, even most p in my book needs 2em indent, I still use class to let them indent, just because i need some p to be not affected.