Using CSS for print media (pdf)

HTML & CSS
1

I need to create a bunch of templates for reports that can be displayed on the screen and can also be converted to pdf files so users can print them. I’m decent/average with CSS on the web but have never used it for print. What things do I need to know when using CSS for print?

2

Firstly, create a print-specific style sheet:

<link type=“text/css” media=“screen” rel=“stylesheet” href=“/css/main.css”>
<link type=“text/css” media=“print” rel=“stylesheet” href=“/css/print.css”>

Then copy and paste the main styles and change any sections you don’t want to print as display:none. Alter other styles to suit.

There are many other nice things you can do on a print style sheet, like print URLs after a link. Here are some useful references:

http://www.koodoz.com.au/klog/web-design-html-xhtml-css-cascading-style-sheets-hyper-text-markup-language-javascript-flash-php/working-with-print-style-sheets-an-introduction/
http://evolt.org/node/22225
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
http://davidwalsh.name/optimizing-structure-print-css
http://davidwalsh.name/optimizing-content-print-css
http://davidwalsh.name/css-page-breaks
http://net.tutsplus.com/tutorials/html-css-techniques/10-challenging-but-awesome-css-techniques/
(item 9)

3

Normally when doing print stylesheets you want to hide any navigation bars/anything else but content. The user doesn’t really often want anything else other then that :).

4

Thanks. This list will keep me busy for awhile. :slight_smile:

5

If your print media is PDFs then the PDF already contains all of the styling within itself.

CSS is only used for styling HTML and XHTML.

6

We’re creating reports from database queries - the results will be printed on the screen but we also want the user to be able to convert them into PDF files so they can print them. So I have to write the CSS for that, right? And that’s part of what gets converted to the PDF? I’ve never done this before so may not be asking the right questions but basically, we need a way to create and format the PDFs.

7

You can’t create pdfs with CSS, though you can do it with PHP. Does the information change from one viewer to the next? If not, you could offer a pdf version for download, or allow the user to print out the on-screen information. (There is sometimes the option to “Save as a PDF”–at least on Macs–which I use often.)

8

Yes - we’re using PHP to create the PDFs although I don’t know the particulars. The developer has told me he’s going to use one of the utilities available but I don’t know which one. My job is to come up with HTML prototypes and formatting for the various reports. This is for an online application so each user’s experience/info will be unique in that they’ll each have their own information in the DB. Also, even “intra-user”, they’ll be given choices over the variables that get included in the reports so yes, the content will vary each time. For the most part, our users will not be particularly sophisticated and most will be Windows users so we need to be able to make it easy for them. I’m not opposed to just having them print out the on-screen information if there’s a way to maintain at least some formatting control over it. Some of the reports will be medical billing statements, etc., so they need to have a consistent look and feel to them and look somewhat professional.

9

That’s certainly where the CSS print style sheet comes into its own.

10

Would that give us as much control as generating a PDF?

11

Well, you can certainly make it look very nice. I’m not sure how much style and prettiness can be added to a pdf created on the fly, but I would think that CSS could do a much nicer job. (Of course, a PDF created from something like InDesign could look a not nicer, but that’s not the situation here.)

12

Yes, from what the developer tells me, the styles will need to be pretty straightforward. Another reason I thought we needed PDFs is that the users may want to save some of the reports. How would we manage that if we were relying on creating a print stylesheet and having users print from that?

13

Hmm, that sounds more like a PHP/database issue to me. Not my area, unfortunately.

14

I realize this thread is two months old but I am suffering the same thing. I AM a PHP developer and I am pretty decent with CSS, but I have never made a print css file. Here’s what I have:

which is printing like:

Here’s my print.css file:



#outerwrap {
    width: auto;
	border: 0;
	margin: 0 5%;
	padding: 0;
	float: none !important;
  }

#innerwrap {
   	width: auto;
	border: 0;
	margin: 0 5%;
	padding: 0;
	float: none !important;

  }

#main {
    width: auto;
	border: 0;
	margin: 0 5%;
	padding: 0;
	float: none !important;
  }

.breadcrumbs {
   visibility: hidden;
  }

  #header {
    visibility: hidden;
  }

  .navbar {
    visibility: hidden;
  }

  .sidebar {
    visibility: hidden;
  }

  #footer {
    visibility: hidden;
}

.checkoutinfo_1, .checkoutinfo_2, .checkoutinfo_3 {
	display: inline;
}

I have no idea where to start, since it is a pretty complex layout with floated DIVs etc… do i set a width of like 600px or 7in for my main wrap, and then display: inline the three address columns and the shopping cart rows? Help?

Anyone who can help me on this I can help back with PHP / MySQL / jQuery etc!

15

Well, you might get rid of the elements that don’t have any use on print, like the submit button and search field. Also make sure the content spans the full width of the paper: you can do that by giving all containing elements the following code:


#container, #container2, #content {width: 100%; margin: 0; float: none;}
16

Hi, to add what Luki siad also remove navigation bars and links that don’t contribute to content.

I would keep basically the same CSS file you have for screen, but remove the parts not neccessary. You seem to be doing a lot of hcanges in the print file but it’s not really neccessary :slight_smile:

17

I did get rid of the search field and I got rid of the drop down too after I posted that, but setting the containers to the code you specified doesn’t work, maybe because each row has child divs inside them that are displayed inline?

Ryan, look at my code, the navbar, sidebar, header, footer etc. are all set to invisible already. They don’t show up in the printed page.

18

wait, what changes? My screen css file is 970 lines, my print css file is like 40 lines, I hardly changed anything except made things i don’t need invisible :confused2

19

Can you post a link to the site where this is at? Bit hard without any HTML and the full CSS (we would rather have hte link then full posted code, well … me anyway :))

Edit:

I don’t know your HTML structure so just from the snippet above, you seem to be doing a lot

20

No, sorry… it’s an admin panel for a huge shopping site. I can save a specific instance of that page as html as post that on my server though, give me ten minutes.