Do you use page-break-after and page-break-inside?

[fluoresce]

I have used the following lines of CSS code in my EPUB:

h2, h3, h4, h5, h6 {
page-break-inside: avoid;
page-break-after: avoid;
}

I have heard that using this code can cause problems for people using small screens in landscape mode.

It would be interesting to hear your opinions.

Should I not use this code? Can it cause problems? Is it well supported?

Another question . . .

Do you guys switch off hyphenation?

[RbnJrg]

Originally Posted by fluoresce

I have used the following lines of CSS code in my EPUB:

h2, h3, h4, h5, h6 {
page-break-inside: avoid;
page-break-after: avoid;
}

I have heard that using this code can cause problems for people using small screens in landscape mode.

It would be interesting to hear your opinions.

Should I not use this code? Can it cause problems? Is it well supported?

Another question . . .

Do you guys switch off hyphenation?

Those css properties only will work with RMSDK (ADE) based ereaders (in ereaders based on webkit won't work). I use those properties and so far I didn't find any issue (applied to h1-h6 headers).
And regarding hyphenation, I disable it for <h> tags.

[Toxaris]

Most readers will ignore it though, even if they use RMSDK.

[Turtle91]

Having those in there, on the other hand, shouldn't be a problem. A compliant reader/app should gracefully degrade...meaning if it doesn't understand or support a css command it shouldn't break. If your app is breaking over the code then that should be reported as a bug.

[fluoresce]

Thanks, guys. I shall leave it in there. If I hear of any problems, then I'll remove it. I shall not switch off hyphenation, either.

[AlexBell]

I have these lines in the CSS I use

.avoidbreak { page-break-inside: avoid; }
.breakabove { page-break-before:always; }
.breakafter { page-break-after:always; }

and use them, nearly always as div classes, and find they work on my Sony T3, Kobo Glow, Kindle, iPad, and Samsung tablet. So far as I can tell they've always worked - e.g. a div with the class .breakabove always starts on a new page.

Could you tell me please how you turn off hyphenation? That would be really useful for long titles if it stops a word from breaking.

[Turtle91]

Originally Posted by AlexBell

Could you tell me please how you turn off hyphenation? That would be really useful for long titles if it stops a word from breaking.

probably don't need all of these, but they work for web pages too:

-moz-hyphens: none;
-ms-hyphens: none;
-webkit-hyphens: none;
hyphens: none;

However, I have found that forcing a long title to break (<br />) where I want does a better, or at least more consistent, job of cleaning up hyphens. The problem with turning off hyphens is that some apps will just allow a too-long-word to flow off the side of the page where you can't see it if there is no option to hyphenate. eg "Acknowledgements" in too large of a font on a small screen.

[AlexBell]

Originally Posted by Turtle91

probably don't need all of these, but they work for web pages too:

-moz-hyphens: none;
-ms-hyphens: none;
-webkit-hyphens: none;
hyphens: none;

However, I have found that forcing a long title to break (<br />) where I want does a better, or at least more consistent, job of cleaning up hyphens. The problem with turning off hyphens is that some apps will just allow a too-long-word to flow off the side of the page where you can't see it if there is no option to hyphenate. eg "Acknowledgements" in too large of a font on a small screen.

Thanks. That's what I do also. But I find that what looks good on a Sony does not look so good on an iPad.

[JSWolf]

Originally Posted by AlexBell

Thanks. That's what I do also. But I find that what looks good on a Sony does not look so good on an iPad.

AGAIN STOP WITH THE IPAD IS WHATEVER APP YOU USE! The iPad is not the app. You have to mention the app used on the iPad.

Also, for Sony you have to mention which model as up until the T3, there was no hyphenation and thus, they had gaps in some lines when full justified. So they didn't always look good.

[JSWolf]

Originally Posted by Turtle91

probably don't need all of these, but they work for web pages too:

-moz-hyphens: none;
-ms-hyphens: none;
-webkit-hyphens: none;
hyphens: none;

However, I have found that forcing a long title to break (<br />) where I want does a better, or at least more consistent, job of cleaning up hyphens. The problem with turning off hyphens is that some apps will just allow a too-long-word to flow off the side of the page where you can't see it if there is no option to hyphenate. eg "Acknowledgements" in too large of a font on a small screen.

You can only use whatever passed epubcheck validation. And besides, I find it poor coding to turn off hyphens.

[Turtle91]

Originally Posted by JSWolf

You can only use whatever passed epubcheck validation. And besides, I find it poor coding to turn off hyphens.

It's not "poor coding", just different than what you use. If a publisher wants to turn them off - for whatever their reason - then they would need to use one of those commands.

You can fine tune these commands to only turn off hyphenation for certain parts...just put the tags in the appropriate CSS.

Of course, the reader/app may completely ignore it anyway....

[Turtle91]

Originally Posted by JSWolf

AGAIN STOP WITH THE IPAD IS WHATEVER APP YOU USE! The iPad is not the app. You have to mention the app used on the iPad.

While I don't get over this use, Jon has a point. It's better if you say iBooks if you are disparaging the way a book renders than "iPad". There are several apps that display on iPads that render very well. I use Marvin on all of my iOS devices and it does splendidly!

[AlexBell]

Originally Posted by JSWolf

AGAIN STOP WITH THE IPAD IS WHATEVER APP YOU USE! The iPad is not the app. You have to mention the app used on the iPad.

Also, for Sony you have to mention which model as up until the T3, there was no hyphenation and thus, they had gaps in some lines when full justified. So they didn't always look good.

I humbly beg your pardon, and will try to do better in future.

I use iBooks and Bluefire Reader to test ebooks on my iPad, and they both seem to have wider 'pages' with more words per line for similar font sizes than by Sony and Kobo do.

[dgatwood]

Originally Posted by fluoresce

h2, h3, h4, h5, h6 {
page-break-inside: avoid;
page-break-after: avoid;
}

...

Should I not use this code? Can it cause problems? Is it well supported?

At least in my experience, page-break-inside: avoid; is generally well supported, though readers can ignore it if it is impossible to fit the contents of the block element on a single page.

On the flip side, page-break-after: is almost guaranteed to be completely ignored unless the value is always. There may be certain situations where it works with avoid, but you're probably just wasting bytes.

[GeoffR]

In my experience page-break-after: avoid; has always worked perfectly in the Kobo (Adobe RMSDK 10 based) ePub reader.