Yes, I Still Print Webpages

It’s been years since I had to make a print version of a webpage and support for page-break-before and page-break-after in Chrome seems to have improved in the mean time–even if I’m really supposed to switch to break-after (support for that seems to be lacking in Chrome, Edge, Safari and Internet Explorer).

I knew floats could cripple page breaks but I wasn’t using any floats so I wasn’t sure why it wasn’t working…

As it turns out, display: flex also breaks page break functionality. And I guess it makes sense, considering page-break-* only works on block level elements 🙂

What: a reasonable facsimile of what I’m using:

@media print {
    div {
        display: block !important;
        width: 100% !important;
    }
    .no-print,
    .mainnav,
    .menu-toggle,
    .entry-footer,
    #footer,
    #wpadminbar {
        display: none !important;
    }
    #masthead,
    #content {
        padding: 0;
        position: static;
    }
    .pagebreak {
        page-break-before: always;
    }
    a:link:after,
    a:visited:after {
        content:"" !important;
    }
}

Why: I make a lot of manuals for the people I make WordPress websites for, manuals that are supposed to make it easier for people to update their own website. At first I used to sit next to people and show them and they’d ooh and ah about how easy it was and then promptly forget all of it.

So then, for years I made manuals in Word-documents. The most common things they might want to change in their website, I wrote down in long lists of step-by-step instructions, and then I’d turn them into PDFs and email them to my clients.

More recently, I’ve been putting these long lists of instructions on a private page inside their website. This means they can’t lose it and I can update it more easily if something in WordPress changes or they have more questions that I need to answer.
But I know some of them still like a PDF or even something printed on paper as they work through the steps and I don’t want to keep two versions of the manual up-to-date, in WordPress and Word, so I’ve been putting a print button on their private manual page and then they can choose whether they print it at all, as a PDF or on paper.

The .pagebreak and .no-print classes I’m adding manually to elements on the page.

Also, the one place in my CSS where I use !important 😲

EDIT: A nice long read about printing pages updated in 2020 from SitePoint: How to Create Printer-friendly Pages with CSS

---