Quote:
Originally Posted by rjwse@aol.com
When I designate break-inside: avoid [...]
|
If you're aiming for EPUB2 + older ereaders, you'd use:
Code:
page-break-inside: avoid
CSS2 = page-break-inside
CSS3 = break-inside
break-inside is a relatively recent renaming, so a lot of older devices/readers won't recognize that.
Quote:
Originally Posted by rjwse@aol.com
I find <h2>heading</h2> at the bottom of pdf pages. [...] this only treats the <h2> tag itself and, of course, does not break, but it is still at page bottom.
|
I think I came up with something. (See below.)
Related Side Note: There are a few bleeding edge things in CSS3 Paged Media that deal with floats (mostly for Images+Captions/Figures/Tables/Sidebars).
It would allow those chunks to move to the top/bottom of next page, while the rest of the text fills the previous page.
I explained some of that here:
"Kindle Previewer 3.40 - 64bit, SVG text, snap-block" (Post #3+)
Quote:
Originally Posted by rjwse@aol.com
Regarding your question:"why not just put a page break before it?
h2 { page-break-before: always }" it is because the h2 segments are extremely short and look wrong if only one is on a page, but look good if bunched together as many as possible per page,
|
If that screenshot is an example of your book... then I'd tackle it like this.
1. Wrap every "little section" in its own
<section>:
Before:
Code:
<h2>Sample Heading</h2>
<p>Short and sweet paragraph.</p>
<p>Another short paragraph.</p>
HTML5:
Code:
<section class="chunk">
<h2>Sample Heading</h2>
<p>Short and sweet paragraph.</p>
<p>Another short paragraph.</p>
</section>
2. Now you can apply CSS to your <section>s:
Code:
section.chunk {
page-break-inside: avoid;
}
That should accomplish what you want, but it would only work in readers that understand <section> (so HTML5 = EPUB3 + newer readers).
And I think this is one of those cases where you can do your best to code it, then it's up to the readers themselves to be using a standards-compliant reader.
