Using CSS for print media (pdf)

I just need a test case so I can start debugging lol. Printed pages are the hardest to debug for me since I don’t have a printer. But alas, that won’t stop me from trying :).

Okay sorry for the delay. You should be able to get to the html and css here: http://www.tumzee.com/sitepoint/

The site is actually dynamically generated with PHP, all orders are in a database, so we needed a pretty rigit DIV structure to contain it all. So, how do I go about making the print look closer to what’s on the screen?

Well, just clicking print and then “Print Preview” gets you the same result, a messy layout LOL

I use either the Blueprint CSS framework or 960 grid framework on all the sites I build from scratch, and the print css pages that come with those do pretty well. I’d really like to learn how to get pages as close to screen as possible though.

Another way to view the effects of a print style sheet in Firefox is to go to Tools > Web developer > CSS > display css by media type > Print.

However, in this case, the inline background styles make the whole print area black, so it would be better not to have them in the html, although I don’t think printers print the background anyway. Still, it wold be easier to sort out your css using firebug, but you’d have to remove the black background.

As others have said, just use the same style sheet but set some element to display:none; and set the main divs to width: 100%.

I did exactly that and it didn’t work. I set the three main wrapper divs to 100%, set header, footer, sidebar, breadcrumbs etc. to visibility: hidden; and I get the screenshot above. Look at my code. The only thing I changed since that was the width: 100% and nothing changed. That’s why I am asking here because it isn’t working. Everything that isn’t mentioned in the print.css file should inherit its value from the screen.css file, correct? So there’s no reason to retype it in the print file unless it changed, which i did for the main divs and stuff I wanted to hide.

There’s no images, so you can download the css and html to your desktop and try it, no luck for me so far.

No! That’s not right. If you have a print style sheet, that and only that will be called when you go to print. So it must contain all the styling for the printer.

Whoa, okay. Let me do that then! Thanks! They don’t teach us this in PHP school haha

Okay sweet, that got me closer. I changed all of the widths to % because px won’t work for print, right? Or will it interpret it okay?

Hmm, you can, but it’s maybe a little hit and miss. I think there’s a maximum recommended pixel width, but I can’t remember what it is. But then, you don’t know what size users will be printing to, so I prefer to let the device decide. Perhaps something like width: 85% would be better. I haven’t experimented enough with this, though I keep meaning to.

Hi,

As you are modifying the existing stylesheet for print you need to set the first stylesheet to media =“all” otherwise you are not modifying anything.:slight_smile:

e.g.


<link rel="stylesheet" href="style.css" type="text/css"[B] media="all"[/B] />
<link rel="stylesheet" href="print-style.css" type="text/css" media="print" />

Then in the print stylesheet change these rules:


/***********************************************************/
/*  THIS STYLE SHEET IS FOR PRINT FRIENDLY RECEIPTS ONLY   */
/***********************************************************/


/***********************************************************/
/*********** Global CSS PRINT References *******************/
/***********************************************************/
body{
  [B]  background:#fff!important;
    color:#000!important;[/B]
}
#outerwrap {
    width: 600px;
    border: 0;
    margin: 0;
    padding: 0;
    float: none !important;
}
#innerwrap {
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    float: none !important;
}
#main {
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    float: none !important;
}
.breadcrumbs {
    [B]display:none;[/B]
}
#header {
    display:none;
}
.navbar {
    [B]display:none;[/B]
}
.sidebar {
    [B]display:none;[/B]
}
#footer {
    [B]display:none;[/B]
}
.checkoutinfo_1, .checkoutinfo_2, .checkoutinfo_3 {
    display: inline;
}


Visibility:hidden just hides things but they still take space on the page but are invisible. Display:none gets rid of them altogether and they have no effect on the page.

Paul, why 600 px on the outerwrap?

That was in the original and I just left it as it was as it was as it printed out ok for me. It probably should be auto but would need checking as I didn’t test that. :slight_smile:

Ah ok. It would limit the size users would be printing to…

Thanks Paul, the media=“all” is a great tip. I will try these after lunch today and report back. Thanks!