How do I prevent this unwanted page break in print (PDF) output?

Help
1

Consider this page from my Jekyll site.

I am using a print media query to modify it for printing. To keep it from shaving or splitting lines at the page breaks, I use

    div#caps > p {
    break-inside: avoid;
    }

in my stylesheet.

Unfortunately, while this fixes splits and shaves, it results in a full page break after the title, author and datestamp:

page_break
page_break1344×876 75 KB

I can’t figure out what is wrong here, but I suspect I’ve got some conflicting HTML and/or CSS somewhere. (break-before: avoid doesn’t help, either.)

This occurs in Firefox, all versions later than 87.0 on Linux.

How do I fix this?

2

While the output may be from Jekyll, I think what you are encountering is a generic html/css issue. While others may be able to help you here, it might be worth posting the question with a little more detail on Stack Overflow.

That said, I do have a thought, which is to use a tool that will generate the PDF for you. For example, I found this tool that outputs Markdown to PDF: GitHub - abeMedia/jekyll-pdf: Create PDFs from Jekyll pages & documents.

I feel like markdown to PDF or eBook might be a better option than rolling your own media queries.

Hope this is helpful and sorry I do not have a better answer for you!

3

Thanks for your input, Bill.

As it happens, I posted this problem to StackOverflow back in April and didn’t get a single response. It’s either too obscure or too difficult to fix (print output is troublesome).

I was really hoping to make printing just work, but I’ll look into rolling my own PDFs if there’s no other way.

4

I can tell you that I went into your website and tried printing to PDF and there was no problem. I know there were artifacts of your website that also printed, but honestly, it looked pretty good.

Unfortunately, I am not familiar enough with CSS media queries to help you with the specific challenge you are having, so hopefully someone else here can help.