
: How can I prevent a widowed/orphaned header? I have a chapter that has brief information for each of the 50 states. Each section begins with a state's name in a h4 tag. When I preview my
I have a chapter that has brief information for each of the 50 states. Each section begins with a state's name in a h4 tag.
When I preview my book, I sometimes see a header resting on the bottom of a page, with the following paragraph on the next page.
I tried wrapping the header and following paragraph in a div, like this...
<div class="Widow">
<h4 class="State" id="me">Maine</h4>
<p>This is a paragraph.</p>
</div>
Then applying this style:
div.Widow { widows: 3; }
I also changed widows: 3 to orphans: 3, just to make sure I didn't have it backwards. But it doesn't work.
Can anyone suggest another strategy for gluing a paragraph to a header?
Free books android app tbrJar TBR JAR Read Free books online gutenberg
More posts by @BetL

: Can I use bold and italics tags? I'm new to epubs; I'm wading through the InDesign tutorials and will then have to learn how to work with iBooks Author (and perhaps Sigil as well). Anyway,

: Automating Footnote Links I'm working with Dreamweaver, InDesign and BBEdit, so a solution that works with any of these programs would be great. I'm converting a book that's in the public domain
2 Comments
Sorted by latest first Latest Oldest Best
I would use
h4 {page-break-after: avoid;}
p {
widows: 2;
orphans: 2;
}
I think this works for Kindles as well as epubs. This is just example code. My guess is that this is structured content you would want to use a special class for the paragraphs below the h4.
I would not be surprised if the Kindle e-ink devices do not support this css property when it is used inside a divs -- only for h1 or p.
Last time I checked Google Play Books doesn't seem to render this css property correctly (I haven't checked recently though).
Sekhemty's solution probably works too, but it was used when epub readers and kindle devices didn't support these css properties. Now they do.
Read more on this topic in this article medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219#.tzhyw83kh (about 2/3 of the way down).
Free books android app tbrJar TBR JAR Read Free books online gutenberg
According to this blog article, you should use the display: inline-block property on a div selector that encloses your header and paragraph.
Here is an excerpt from the said article:
If you set the display property for a div to be inline-block,
iBooks will display the contents of the entire div together on a
single page, skipping to a new page if necessary, unless the entire
div can't fit on a page by itself, in which case it will be divided
across pages.
It's simple and very powerful: div {display: inline-block}
Here's a short document with no inline-block display. Notice how the
header is separated from the paragraph that follows it, and even how a
bit of the background bleeds through to the following page. Icks. The
image and caption are likewise separated. Terrible!
Here's the exact same document with one div enclosing the header and
paragraph and second div enclosing the image and caption. Both
divs were set to display:inline-block. The result? Goodbye widows
and orphans:
Where can you use this? As shown here, if you have a series of
illustrations with captions, use inline-block to keep the caption
right under the illustration.
If you want a header to never appear alone at the bottom of the page,
but always be followed by at least one paragraph, just enclose the
header and the paragraph in an inline-block div.
The article that I have linked also contains two epub files that can be used as a reference for these examples.
Free books android app tbrJar TBR JAR Read Free books online gutenberg