View Full Version : page-break-before not responded to in any Epub reader


ivanbayross
01-12-2013, 06:36 AM
Hi,

I am using 2 EPub Readers:
1) Kobo
2) Bluefire

At a appropriate point in my Ebook, I have introduced a <div></div> bound to a class named "pageBkBe4".
Eg: <div class="pageBkBe4"></div>

CSS:
.pageBkBe4
{
page-break-before:always;
}

I am wanting to start the content after this <div></div> on a new page.

Both:
1) Kobo
2) Bluefire

ignore this instruction.

Any advice on how to introduce a page break at an appropriate place in an EPub document so that EPub readers like Kobo, Bluefire respond correctly will be very appreciated.

Jellby
01-12-2013, 07:29 AM
Maybe they are ignoring the empty <div>, not the page-break-before.

Try with <div class="pageBkBe4">&nbsp;</div> instead.

mrmikel
01-12-2013, 07:49 AM
Can you use capitalized class names? Most everything else in XHTML has to be lower case.

Jellby
01-12-2013, 10:43 AM
Pre-defined names (element names, pseudo-clasess, pseudo-elements) are mostly lowercase (some entities have uppercase letters too), and XHTML is case-sensitive, but you can use uppercase letters in any custom-defined names (classes, ids, entities).

Arios
01-12-2013, 10:39 PM
Jellby,

Just a question: does the "div." statement has to be indicated in the CSS?

Thus, the declaration of the op should be read as following: "div.pageBkBe4" not simply ".pageBkBe4".

Am I mistaken?

Jellby
01-13-2013, 04:21 AM
The element name is not necessary, but the meaning is slightly different:

div.pageBkBe4 = any <div> with class="pageBkBe4"

.pageBkBe4 = *.pageBkBe4 = any element with class="pageBkBe4"

Arios
01-13-2013, 07:39 PM
Thank you Jellby for the "mise au point".

ivanbayross
01-14-2013, 05:19 AM
Thanks.

Much appreciate the input given.

Will load the <div> with and &nbsp; rather than leaving it empty and check.

Will convert the class name into lowercase and check.

I will try all the suggestions one-by-one and revert on the results shortly.

Thanks people.

JSWolf
01-15-2013, 06:07 PM
It is better to use lower-case style names in the CSS as it's very easy to mistype and get the case incorrect in which case, you cannot be sure that the reading software will not need to be case specific.

As for page breaks, the only place I ever use them is for endnotes so I can have one file and be able to show only one endnote at a time. Otherwise, I prefer splitting the XML flow where you would otherwise have a page break.

I've seen some ePub with chapters merged together and then when the flow is too larger, the text continues into a new flow. Very messy. Besides, with iBooks being a PITA regarding page breaks, it's just easier to start a new XML where the page break would have gone.

katiesommer
01-17-2013, 05:09 PM
Besides, with iBooks being a PITA regarding page breaks,.

Why is iBooks a PITA with page breaks? (I'm a newbie with using ITP and was so proud of myself for just getting the chapter breaks right with InDesign. Gah!)

AlexBell
01-18-2013, 01:49 AM
Why is iBooks a PITA with page breaks? (I'm a newbie with using ITP and was so proud of myself for just getting the chapter breaks right with InDesign. Gah!)

There is a thread about page breaks in iBooks just getting started on the Apple forum which might be helpful.

http://www.mobileread.com/forums/showthread.php?t=203057

dgatwood
01-18-2013, 04:47 PM
The simplest way to force a page break is to use a separate HTML file. Each file always starts on a new page in compliant readers unless you explicitly override page-break-before on the body tag.

ivanbayross
01-19-2013, 02:24 AM
Here is my first reply.

Have changed my page-break code to be:
<div class="pageBkBe4">&nbsp;</div>

.pageBkBe4
{
page-break-before:always;
}

I have introduced the &nbsp; between the <div class="pageBkBe4"></div>

I found this works perfectly in Bluefire Ebook Reader run on the iPad 2.

It is however ignored by Kobo Ebook Reader run on the iPad 2.

Do Ebook Readers work differently?

Has anyone has similar experiences with different Ebook Readers on an iPad or a Laptop?

Would really love to know.

@dgatwood

The simplest way to force a page break is to use a separate HTML file. Each file always starts on a new page in compliant readers unless you explicitly override page-break-before on the body tag.

Could you explain this a bit more please.

How does one place separate HTML files within Sigil to get appropriate EPub output?

Can anyone help explain this ?

I have always created separate HTML files per Chapter but flowed this as a single XHTML file in Sigil when converting to EPub.

What am I doing wrong?

ivanbayross
01-19-2013, 02:28 AM
Here is my second reply:

I have not know CSS processors any where to require CSS IDs or Classes to be named in lowercase exclusively.

Hence I am curious to understand why I should change CSS IDs or Classes names to lowercase.

Does any one have any information about EBook Reader such as Kobo, Bluefire, requiring CSS IDs or Classes in lowercase?

Would welcome any input.

Jellby
01-19-2013, 04:52 AM
Do Ebook Readers work differently?

Sure. Welcome to the jungle.

dgatwood
01-19-2013, 06:06 PM
Here is my first reply.

Have changed my page-break code to be:
<div class="pageBkBe4">&nbsp;</div>

.pageBkBe4
{
page-break-before:always;
}

I have introduced the &nbsp; between the <div class="pageBkBe4"></div>

I found this works perfectly in Bluefire Ebook Reader run on the iPad 2.

It is however ignored by Kobo Ebook Reader run on the iPad 2.

Do Ebook Readers work differently?

Has anyone has similar experiences with different Ebook Readers on an iPad or a Laptop?

Would really love to know.



Could you explain this a bit more please.

How does one place separate HTML files within Sigil to get appropriate EPub output?


Apparently:

<hr class="sigilChapterBreak" />


and then choose Tools -> Split on SGF Chapter Markers.

That said, I don't use Sigil, so I can't say for sure.

JSWolf
01-19-2013, 07:33 PM
Even easier with Sigil...

With the file(s) to be split loaded, move the cursor to just after the last character where you want the split to be and hit control-enter. Everything in front of the cursor goes into a new file and everything after stays in the same file. Don't forget to rename the files so you know what's what by looking at the names.