MobileRead Forums - View Single Post

hobnail · 08-06-2020, 10:36 PM

If your chapters are each in separate files then you won't get page breaks after the chapter title since it will be at the top of the page. But if you have subsections within a chapter, for example, chapters use h2 and subsections use h3, then it's not so easy to fix. You could try the following:

Code:

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

For a figure with its caption, you could wrap the figure and its caption in a div and then use the above 2 break-inside avoid on the div. And maybe a break-after avoid on the img. Similarly for endnotes, although I've used ol for those.

Those who know more than me also say that it's better to use margin-top instead of margin-bottom for spacing between things. It could be that margin-bottom gives the rendering engine more wiggle and allows a page break there.

08-06-2020, 10:36 PM	#2
hobnail Running with scissors Posts: 1,589 Karma: 14328510 Join Date: Nov 2019 Device: none	If your chapters are each in separate files then you won't get page breaks after the chapter title since it will be at the top of the page. But if you have subsections within a chapter, for example, chapters use h2 and subsections use h3, then it's not so easy to fix. You could try the following: Code: h1, h2, h3, h4 { break-after: avoid; break-inside: avoid; page-break-after: avoid; page-break-inside: avoid; } For a figure with its caption, you could wrap the figure and its caption in a div and then use the above 2 break-inside avoid on the div. And maybe a break-after avoid on the img. Similarly for endnotes, although I've used ol for those. Those who know more than me also say that it's better to use margin-top instead of margin-bottom for spacing between things. It could be that margin-bottom gives the rendering engine more wiggle and allows a page break there. Last edited by hobnail; 08-06-2020 at 10:38 PM.