Keeping a header on one page when printing

Question

I am designing a web page which I would like to be printable. The layout looks acceptable, except for one point: Headers sometimes get split (vertically) between different pages:

I obtained this example by trying to print https://www.craftinginterpreters.com/evaluating-expressions.html (which is a terrific read, by the way).

What causes this ugly artifact? Is there anything I can do in CSS, HTML, or otherwise to prevent this kind of splitting?

score 1 · Answer 1 · answered Oct 05 '19 at 18:58

1

Try this:

@media print  
{
    div{
        page-break-inside: avoid;
    }
}

Found it here: https://stackoverflow.com/a/907719/1195615

answered Oct 05 '19 at 18:58

thingEvery

3,368
1
19
25

1

Thanks for your answer! There is no actual page break inside the element, so this does not apply. – Ruben Dec 21 '19 at 16:02

score 1 · Accepted Answer · answered Dec 21 '19 at 16:01

In the CSS for the header, there is the following line:

font: 600 30px/24px "Crimson", Georgia, serif;

The 30px/24px means that the font size is 30px, while the line height is only 24px.

The header is split based on the line-height, which is usually about 20% bigger than the font size. In this case, it is smaller, which can cause the header to exceed the line height and split between pages.

Simply deleting the line height from the CSS works:

font: 600 30px/24px "Crimson", Georgia, serif;

In this case, the default is used. It is also possible to increase the font height manually.

Keeping a header on one page when printing

2 Answers2