Widowed (Orphaned?) Header

[SigilBear]

I'm working on an epub in Sigil. 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, so the header doesn't wind up all alone on the preceding page?

Thanks.

[Turtle91]

You can try the "page-break-inside:avoid" style in your div or "page-break-before:always" in your h4 styling. Unfortunately, there's no guarantee that all readers/apps/devices will honor that.

The only way to guarantee that a header will be at the top of a page is to make it the first part of a new html page.

[SigilBear]

I'll give that a try, but I don't want these headers to be at the top of the page. Rather, they're part of the flow and can appear anywhere. I just want to make sure that they're "glued" to the first paragraph following the header. If the paragraph is on the next page, then I'd like the header to be on that page, too.

I'll give your suggestions a try. Thanks.

To clarify, each chapter's header is wrapped in h2 tags. Subheadings (if any) are wrapped in h3 tags. The state headers are in h3 tags. Some of the state descriptions are as short as a single paragraph, so there could be three state headers on one page.

[jhowell]

You can use "page-break-inside: avoid", but it isn't universally supported.

(Ninja'd)

[SigilBear]

Ah, page-break-inside: avoid works great. Thanks for the tip.

[RbnJrg]

Originally Posted by SigilBear

I'm working on an epub in Sigil. 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, so the header doesn't wind up all alone on the preceding page?

Thanks.

What you should use is the property "page-break-after: avoid". Don't use "page-break-inside: avoid". Something like:

h4 {
     page-break-after: avoid;
}

However, that code only will work for ereaders based on RMSDK (ADE). For ereaders based on webkit, you won't be able to avoid a header resting on the bottom of a page.

Regards
Rubén

[Notjohn]

Not what you want to hear, I suppose, but I think anyone who has read more than one or two e-books will not be put off by seeing a breakhead at the bottom of a "page."

Will these h4 headings actually be in the TOC? If not, shouldn't you use a paragraph style?

[SigilBear]

Originally Posted by Notjohn

Not what you want to hear, I suppose, but I think anyone who has read more than one or two e-books will not be put off by seeing a breakhead at the bottom of a "page."

Will these h4 headings actually be in the TOC? If not, shouldn't you use a paragraph style?

No, they won't be in the TOC.

Good tip about the paragraph style; I'm used to using headers on my web pages, but I guess turning me headers into paragraphs would automatically avoid this problem.

And if I do decide to keep my headers, I stumbled across another CSS style that might work:

display: inline-block

Any idea if it's universally supported? I have a hunch it should be more popular.

[Tex2002ans]

Originally Posted by Turtle91

You can try the "page-break-inside:avoid" style in your div or "page-break-before:always" in your h4 styling. Unfortunately, there's no guarantee that all readers/apps/devices will honor that.

I agree. I would go with the "page-break-before: always;" solution if this bothers you. (Or maybe there is other CSS cruft you may have throughout your book that is exacerbating this problem?)

Originally Posted by Notjohn

Not what you want to hear, I suppose, but I think anyone who has read more than one or two e-books will not be put off by seeing a breakhead at the bottom of a "page."

I agree.

Originally Posted by SigilBear

Good tip about the paragraph style; I'm used to using headers on my web pages, but I guess turning me headers into paragraphs would automatically avoid this problem.

No, absolutely not. Headers are important semantics, and are extremely important for devices such as Screen Readers (being able to hop around the book much more easily).

Originally Posted by Notjohn

Will these h4 headings actually be in the TOC? If not, shouldn't you use a paragraph style?

Come on Notjohn... you have been here long enough to hear the arguments on why going from proper <h#> -> <p class="styling"> is a poor idea (I definitely know me + Hitch have discussed this extensively over the years).

You even posted in one of the latest times this was brought up!

https://www.mobileread.com/forums/sh...21#post3403721

[SigilBear]

Originally Posted by Tex2002ans

You have been here long enough to hear the arguments on why going from proper <h#> -> <p class="styling"> is a poor idea.

LOL - That's one of the reasons I got fed up with InDesign. Besides producing bloated code and denying you access to the HTML, it's insanely reliant on paragraph styles, as if headers don't exist. I find that so bizarre.

I haven't had a chance to check out iBooks Author yet, but I hope it doesn't have those same problems.

[Hitch]

Originally Posted by Tex2002ans

Come on Notjohn... you have been here long enough to hear the arguments on why going from proper <h#> -> <p class="styling"> is a poor idea (I definitely know me + Hitch have discussed this extensively over the years).

You even posted in one of the latest times this was brought up!

https://www.mobileread.com/forums/sh...21#post3403721

Tex, no. NJ is right about this, this time. The OP is apparently using an h4 class for something that isn't structural, as near as I can tell. I believe that's what NJ was referring to--that if the OP is using H4, for the appearance of an element, he should be using a paragraph class instead. The OP said that he isn't using these h4 tags, on the TOC. While that in and of itself is not dispositive, it's indicative.

If the H4 elements are structural--in other words, if you were using an outline, and these would indicate a class of element, below h3, then they should remain headings. But if they are not--if they are used solely for stylistic purposes--they should be demoted to paragraphs.

I believe, Tex, that that is what all three of us--you, me and NJ--meant.

Hitch

[SigilBear]

Originally Posted by Hitch

The OP said that he isn't using these h4 tags, on the TOC. While that in and of itself is not dispositive, it's indicative.

I excluded h4 headings from the TOC because I don't want a bloated TOC.

The master TOC - or whatever you call the TOC that consists of regular pages - is another story. There I can go into greater detail.