headings, always stick to paragraphs

[stellatus]

What to do to make headings always stick to paragraphs? Actually, the idea is that they should be sticked to the first two or three lines of a paragraph. In other words: I would like to prevent the header from breaking the page within a single HTML file. All indications are that CSS instructions are responsible for this:
1) page-break-after: avoid
2) page-break-inside: avoid.
However, they do not work. Why? How to solve this problem?

[JSWolf]

There's no need for page breaks of any kind. If the heading and these paragraphs do break it's because they are (as a whole) too large for the screen. Otherwise, they will be together on the same screen.

[retiredbiker]

Those page-break codes are very unreliable across various readers, I always remove them.

Separate your files so that each html file starts with your header. Then each header will start a new screen on just about any reader, and like JSWolf said, only a huge header, bigger than the screen or with too much spacing, will separate itself from the text.

[stellatus]

@JSWolf, @retiredbiker Thanks for your answers. "Separate your files so that each html file starts with your header. Then each header will start a new screen on just about any reader" That's what I did before I wrote the post. My book has 3 levels of headings: h1, h2 and h3, that is parts -> chapters -> "subchapters". As for h1 and h2, of course this solution is perfect. However, there are a lot of "subchapters" and they are often short. As a result, there are a lot of blank spaces in this book, and it looks very strange

[JSWolf]

Originally Posted by stellatus

@JSWolf, @retiredbiker Thanks for your answers. "Separate your files so that each html file starts with your header. Then each header will start a new screen on just about any reader" That's what I did before I wrote the post. My book has 3 levels of headings: h1, h2 and h3, that is parts -> chapters -> "subchapters". As for h1 and h2, of course this solution is perfect. However, there are a lot of "subchapters" and they are often short. As a result, there are a lot of blank spaces in this book, and it looks very strange

Can you make up a sample ePub that we can have a look at?

[davidfor]

@stellatus: Wrapping a div around the parts you want to keep together with a style that includes "page-break-inside: avoid" should work. That worked on my Kobo with an epub. As the others have said, it isn't supported in all ereaders or apps.

[jhowell]

Is this something you are doing for yourself on a particular device or are you planning to publish?

[Karellen]

Confirming what @davidfor has stated, I have used the following code in two novels which works well reading on my Libra2...

.nopagebreak {
  page-break-inside: avoid;
  margin-left: inherit;
  margin-right: inherit;
}

Then in the body of the text I use...

<div class="nopagebreak">
<h3 id="toc_1">1b</h3>

<p>This is the first paragraph of the sub-chapter. This paragraph should stick to the sub-heading</p>
</div>

[JSWolf]

But you don't need a div with a pagebreak. It's irrelevant because it's at the top of the screen. It's either going to fit together on the screen or it isn't. That depends on the size of the text and the size of the screen. These are variables you cannot control if you are not the one reading the book. And if you are worried about it fitting, don't use a large amount of excess space around the header like most publishers do.

[stellatus]

Originally Posted by JSWolf

Can you make up a sample ePub that we can have a look at?

Here you go sample.epub

[stellatus]

Originally Posted by davidfor

@stellatus: Wrapping a div around the parts you want to keep together with a style that includes "page-break-inside: avoid" should work. That worked on my Kobo with an epub. As the others have said, it isn't supported in all ereaders or apps.

On my Kindle 4.1.3, it doesn't work for sure

[stellatus]

Originally Posted by jhowell

Is this something you are doing for yourself on a particular device or are you planning to publish?

I'm planning to publish it.

[stellatus]

Originally Posted by Karellen

Confirming what @davidfor has stated, I have used the following code in two novels which works well reading on my Libra2...

.nopagebreak {
  page-break-inside: avoid;
  margin-left: inherit;
  margin-right: inherit;
}

Then in the body of the text I use...

Awesome! Good to know

[stellatus]

Originally Posted by JSWolf

But you don't need a div with a pagebreak. It's irrelevant because it's at the top of the screen. It's either going to fit together on the screen or it isn't. That depends on the size of the text and the size of the screen. These are variables you cannot control if you are not the one reading the book. And if you are worried about it fitting, don't use a large amount of excess space around the header like most publishers do.

It looks like that's what I will have to do. But I'm going to leave those page-brake-after instructions, etc. in the CSS because it works on some readers.

[JSWolf]

Originally Posted by stellatus

It looks like that's what I will have to do. But I'm going to leave those page-brake-after instructions, etc. in the CSS because it works on some readers.

But these page breaks are 100% useless. The header and paragraph will fit or they won't fit. A page break avoid will not make something fit that doesn't fit. Because this is at the top of the page, it will split if it has to. If it doesn't fit on the first page of the chapter, it won't fit on any page. So just let it be split if it needs to be instead of something going wrong when a program tries to keep everything together but cannot do so.

It would be like a <pre> when the text is too wide and you cannot see some of it.