How to provide a stylesheet for rendering PDFs?

Question

Following on from a previous question, I have managed to get the 'screen' version (HTML) of a document into PDF format using the <cfdocument format="pdf"> tag. I need the styling of the PDF to be different to that of the screen version for obvious reasons (e.g. different header styles).

I know that you can use Media Queries in CSS so that different styles are applied for printing, screen, tv etc. But how do I supply a different set of CSS styles to the <cfdocument> tag so that it renders correctly?

My initial solution was to apply a class to the containing div of the <cfdocument> tag called .pdf and then write new styles for the content based on that class inside my main CSS file. So for example a style would be .pdf h1 {font-size:20px;}. The CFML would look like this:

<cfdocument type="pdf">
<link href="/css/mainStyleSheet.css" rel="stylesheet" type="text/css">
 <div class="pdf">
  <h1>Document Title</h1>
  ... {document body here} ...
 </div>
</cfdocument>

Is there a better way to do this at all? Is there anyway to pass a different stylesheet just for PDF rendering? Can it be done with Media Queries perhaps?

Answer 1

How are you generating the PDF, via a parameter in the querystring? Something like index.cfm?page=foo&format=pdf? If you aren't, you could easily add a parameter like that, then in your CFM:

<link href="/css/mainStyleSheet.css" rel="stylesheet" type="text/css">
<cfif structKeyExists(url, "format") AND url.format EQ "pdf">
     <link href="/css/pdfStyleSheet.css" rel="stylesheet" type="text/css">
</cfif>

pdfStyleSheet.css would contain only the CSS overrides for the PDF.