CODEWITHSUNDEEP
csspdfprintingmedia-queries
Baumr
Baumr

Reputation: 6284

Separate stylesheets for printing and PDFing?

Using CSS media query for print stylesheets can be a great way to make websites more print-friendly:

p { color: grey; }

@media print {
    p { color: black; }
}

For one project, we find that creating PDF files from webpages to send to clients is very efficient (better than starting from scratch).


For PDFing purposes, we've applied a few simple CSS rules via @media print to make the webpages more friendly in that format — remove navigation, certain footer elements, etc.

(Some people may want to download and print the PDFs at a later date, and that's fine. There will also be a link on each page to access the PDF we've created.)


However, it seems that for the general public's printing needs, it's advised to create stylesheets without much formatting: remove backgrounds, increase contrast, optimize font-size, and so on.

We haven't done that yet. Can there be more than one set of print rules — one applied when PDFing, and the other when printing to a printer? Or if not, what workarounds are there?

Upvotes: 0

Views: 189

Answers (2)

Baumr
Baumr

Reputation: 6284

I haven't found a way to specify via CSS if the browser is printing to a physical printer, or to a PDF format. (In addition to various browsers, it would also have to compatible on multiple operating systems.)

There are two solutions I've come up with:

  1. Have two print stylesheets, and when creating PDFs, include the PDFing one, and/or comment out the one for the public. (Or have one stylesheet, and comment out relevant lines of code.)
  2. Have two versions of the HTML document, e.g. index.php and pdf.html, each with different print rules. In this case, you would access the latter when you want to create a PDF, and the former would be the default. The issue will be managing two sets of content, so unless you can automate it, this wouldn't be advised.

Upvotes: 0

klewis
klewis

Reputation: 8350

When the end user decides to print, they should have the option to also print to PDF if they have some type of PDF software already installed on their machine. For you to determine that for them, and know how it's configure on their machine and what software company they are going though, and version, is probably not the best idea for you to determine from a CSS perspective. I would personally simply rely on your print style-sheet as a main source for both avenues.

Some people will want to print these PDFs, and that's fine...

True, and if they really want to, they should already know that they have a PDF software app already installed on their machine. Let them choose how they should print, when they get to the print-preview window. But you can perhaps market/brand a creative help guide on how to print to PDF and where to they can get a free PDF software app to download.

Regards

Upvotes: 1

Related Questions