{"id":545,"date":"2019-08-30T22:44:03","date_gmt":"2019-08-31T02:44:03","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=545"},"modified":"2020-10-27T09:29:28","modified_gmt":"2020-10-27T13:29:28","slug":"yes-i-still-print-webpages","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2019\/yes-i-still-print-webpages\/","title":{"rendered":"Yes, I Still Print Webpages"},"content":{"rendered":"\n\n\n

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<\/a> (support for that seems to be lacking in Chrome, Edge, Safari and Internet Explorer).<\/p>\n\n\n\n

I knew floats could cripple page breaks but I wasn’t using any floats so I wasn’t sure why it wasn’t working…<\/p>\n\n\n\n\n\n\n\n

As it turns out, display: flex<\/code> also breaks page break functionality. And I guess it makes sense, considering page-break-* only works on block level elements \ud83d\ude42<\/p>\n\n\n\n

What<\/strong>: a reasonable facsimile of what I’m using:<\/p>\n\n\n\n

@media print {\n    div {\n        display: block !important;\n        width: 100% !important;\n    }\n    .no-print,\n    .mainnav,\n    .menu-toggle,\n    .entry-footer,\n    #footer,\n    #wpadminbar {\n        display: none !important;\n    }\n    #masthead,\n    #content {\n        padding: 0;\n        position: static;\n    }\n    .pagebreak {\n        page-break-before: always;\n    }\n    a:link:after,\n    a:visited:after {\n        content:\"\" !important;\n    }\n}\n<\/code><\/pre>\n\n\n\n
Why<\/strong>: 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
The .pagebreak and .no-print classes I’m adding manually to elements on the page.<\/p>\n\n\n\n
Also, the one place in my CSS where I use !important \ud83d\ude32<\/p>\n\n\n\n
EDIT: A nice long read about printing pages updated in 2020 from SitePoint: How to Create Printer-friendly Pages with CSS<\/a><\/p>\n\n\n\n
\n\n\n\n
Photo credit: \u00a9 Naomi Blindeman<\/div>\n","protected":false},"excerpt":{"rendered":"
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 … <\/p>\n
Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[19,17,51,50,49,117],"class_list":["post-545","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-browser-support","tag-css","tag-manuals","tag-mdn","tag-printing","tag-sitepoint","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=545"}],"version-history":[{"count":2,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/545\/revisions"}],"predecessor-version":[{"id":1103,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/545\/revisions\/1103"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}