Print vs. web styles

I’m creating a series of reports that will be able to be viewed on the web and also printed. I had planned to use somewhat different styles - probably with most of the styles in default.css and then just the ones that change for printing in print.css. I know that for sizing issues, you generally use px, em or % on the web and pt, in, etc. for print. But are those differences important enough to merit changing? For example, do I use something like this for the web:

#statement {
width:720px;
margin:20px auto;
font-size:12px;
}

And change it to this for print?

#statement {
width:6.25in;
margin:1.5in auto;
font-size:11pt;
}

Or do I just pick one and stick with it? And if I pick one, which one?

Use em for defining the font size and % for defining the width - those are applicable to both web and print whereas px is applicable to neither .

[font=verdana]If you expect that some people might want to print pages from your website then it’s usually a good idea to create a separate print stylesheet, unless your layout and formatting is very simple and so works equally on screen and on paper. As felgall says, you can use em and % just the same in print as you can on screen – you can use these to keep text in proportion in both contexts – but you may also want to set a base font size in pt to help get closer to a consistent output.

Bear in mind that if you set your regular stylesheet to media="screen" then you’re starting with a completely blank canvas for the print stylesheet, whereas if you set the regular one to media="all" then you only need to worry about setting rules that are different in print. Either one can work better, depending on your site.

Other things to consider when printing are that background colours and images are not reliable – sometimes they will print but often they won’t, depending on the user’s browser and settings, so any blocks that you want to highlight may need a border as well as a background colour – and that floated and positioned elements are more likely to give headaches, especially if they go across a page break, so it’s much better if you can just linearise the whole thing and not have any floated or positioned blocks.

So from that point of view, there’s far less need to have widths and margins mentioned in print stylesheets (but yes, using physical measurements such as in or cm is definitely better than px if em and % don’t do it for you), because more often than not you’ll just be letting all block elements take a width of 100%.[/font]

Thanks for the replies. I’ve got the no float and background colors covered, I think. This is an accounting program and users will need to print statements, client receipts, etc. on who-knows-what kind of printer so my print measurements will need to be pretty precise to make sure they fit on an 8 1/2 x 11 page. I think I’ll have to define at least a table width because the data tables are dynamically generated from user-entered data so I have no way of knowing how long some of those text strings might be. It makes me a little nervous to try to rely on em and %, to be honest. So if I do use pt and in/cm, do I just put those in the default (media=“all”) stylesheet and let that be it, or will that wreck the web version? I’ve looked at it in modern browsers on a PC and the pt and in version looks fine but I haven’t yet checked older browsers or a mac.

Here’s a related question: We’re also giving users the option of creating pdfs of these reports. So one option for printing is if they create a pdf and print from that. However, I’d also like to let them just print directly from the screen when they don’t want to bother creating a PDF. I’m thinking we can create the PDF from the web stylesheet - so it can include background colors, etc. And only use the print stylesheet for when they print straight from the web. Does that make sense and sound reasonable?

[font=verdana]It’s much better to put the print declarations in a separate print.css – that way you can be sure they won’t cause trouble on screen.

It’s dangerous to rely on fitting something exactly to a specified page size. Depending on your audience, there’s a chance that some of them will be using A4 paper rather than US Letter (it is slightly narrower), or home printers with wider margins than you have anticipated. If you want it to fit exactly to the width of the page then use width:100%; and then you won’t have any problems with it overflowing the printable area and some content disappearing off the side. All too often I try to print pages that have a fixed width set and find that the content won’t fit on my printable area, and there’s no excuse for that.[/font]

Here’s a related question: We’re also giving users the option of creating pdfs of these reports. So one option for printing is if they create a pdf and print from that. However, I’d also like to let them just print directly from the screen when they don’t want to bother creating a PDF. I’m thinking we can create the PDF from the web stylesheet - so it can include background colors, etc. And only use the print stylesheet for when they print straight from the web. Does that make sense and sound reasonable?

[font=verdana]I guess if you’ve got the right software on your server you can generate PDFs straight from the website via the print.css, which might give a suitable output. But equally, it might not, if you’re relying on HTML and CSS to lay out the page and, as you say, there is UGC of unknown size and that can affect the layout. If it’s an option, I would always prefer to go with a dedicated PDF creation that takes the data and puts it directly into a template – you have more control over the output that way.

It’s often painfully obvious when you look at the ‘printable PDF’ on a website and it’s just the web page run through an automated transformation.[/font]

We’ve written a dedicated PDF - that part works fine. I just want to give users the option of printing a report (i.e., statement, receipt, etc.) directly from the app if they don’t want to bother creating the PDF. So it sounds like in print.css, do things like:

html, body {width:100%;font-family:Georgia, “Times New Roman”, Times, serif; font-size:12pt;}

Then for the table (#statement), give it a width:80%; margin:10% auto; - something like that.

Right?

One thing you do need to take into account for print is that the USA uses paper slightly wider and a lot shorter than the paper size used by the rest of the world - so even with print you can’t be certain that a specific sized paper is being used.

Seems like they could make it a bit easier for us, doesn’t it? : )

Actually, the app is for healthcare professionals based in the U.S., so that may help some.

Ok, here’s another question:

The tables are dynamically generated. Some may end up pretty wide because of number of columns plus “single string” text in some columns (i.e., it can’t flow to the next line). Is there a way to make the font-size adjust so the table essentially does a “shrink to fit”? I’ve been experimenting and even when I set the table width at, say 80%, it will expand to fill the whole page if there are too many columns, etc., and can still end up disappearing off the edge of the page.

[FONT=Verdana]No easy way that I can think of. Certainly not something that is within HTML’s capabilities.

What you really need there is something like the way Excel can set a ‘print area’ and then scale the output so that it fits onto a printed page or PDF without changing the native font size in the document.[/FONT]