CSS and Printing: Best Practices

[cssExp]

Hi,

I read several articles regarding css as it relates to printing, but several of the articles were contradicting. The following is what I gathered to be important:

1. Remove Background images
2. Set Background color to white
3. Set text color to black
4. Set serif fonts
5. Remove dimensions from containers (if applicable? or it's a must?)
6. Use static positioning

Alright, these are things I more or less understand, but when it comes to measurements most of the articles were very much contradictory. Some articles says to use pt, others px, em, then absolute measurements such as inches etc.

So could anyone suggest some best practices for printing?

On a side note...I was looking over compatibility charts and found that page-break-before and page-break-after properties are even supported by IE6. Should I be bothered to make use of these?

Thanks in advance.

[Paul O'B]

Hi,

Most of the above is true.

When it comes to text size then paper can't be scaled so pts are more appropriate for text but it doesn't really matter as no one will really know the difference and I would leave them at an appropriate pixel size. You can use absolute measurements because on the printed paper they can be rendered accurately unlike a monitor which has relative sizes and an inch doesn't really compute.

You can use the page-break properties on simple structures and they should work ok but printing is something that is not well supported even by the best browsers.

Keep it simple and don't try to be too clever. Remove all floats and all positioning and set auto widths where possible. Most browsers have trouble with tables so keep them narrow and use table headers and footers for printing so that they get printed on each page.

The best method is trial and error as I rarely find that anything works out of the box and varies between browsers considerably. It seems the web wasn't meant to be printed

[Stevie D]

I read several articles regarding css as it relates to printing, but several of the articles were contradicting. The following is what I gathered to be important:

1. Remove Background images
2. Set Background color to white
3. Set text color to black
4. Set serif fonts
5. Remove dimensions from containers (if applicable? or it's a must?)
6. Use static positioning

Yes to pretty much all of that.

Definitely remove background images and colours - a lot of browsers or setups won't print them anyway, and those that do will annoy people by using up all their colour ink and generally making a mess of the page. If you have blocks that you want to highlight, you can use borders instead.

I would agree with setting the general foreground colour to black, but that doesn't mean to say you can't use other colours to pick out headings or other key elements, as long as it isn't too over the top.

Serif fonts are generally thought to be better for blocks of text in print. However, some people prefer to keep the visual consistency for the site by using the same sans-serif font on screen and in print. It's up to you. Personally, I do different things on different sites, depending on the feel of the site, the 'tone' of the fonts, and how much the content is formed of 'large blocks of text'. Where the content is primarily graphic or tabular, I am less likely to use a serif font than when it consists of long paragraphs.

Get rid of as much positioning and dimensioning as possible. Generally you only need dimensions when you are positioning elements with anything other than 'static', so if you are making everything static you generally won't need dimensions. Certainly don't set a width on the main content (or if you do, make it 100%), as different countries use different sized paper (A4 vs Letter) and everyone has different default margins on their printers.

Alright, these are things I more or less understand, but when it comes to measurements most of the articles were very much contradictory. Some articles says to use pt, others px, em, then absolute measurements such as inches etc.

Print stylesheets are the one time you should use pt to size text. If you are setting any dimensions, you may find it easiest to use cm/in (1in = 72pt), it's just easier to visualise the numbers than pt but no different in nature. You can use em any time you would use it on screen. Don't ever use px for printing, it's a screen measurement and doesn't make any sense for print.

On a side note...I was looking over compatibility charts and found that page-break-before and page-break-after properties are even supported by IE6. Should I be bothered to make use of these?

Definitely. I would always put page-break-after:avoid; on all <h*> that you are using. You don't necessarily want to be slapping page-break-before around too freely though, you might just end up wasting lots of your visitors' paper if you use it where it isn't necessary. (Note, the only browser I've found that respects table {page-break-inside:avoid;} is Opera).

Other things you can do are to put the title tip of any <abbr> or <acronym> elements you've used after them, and likewise the destination URL of any links, using :after. (You might want to only do that for external links). This doesn't work in IE6 but is a useful extra for everyone else.

[AlexDawson]

In addition to the above, I would say that the idea way of examining how your website will look upon printing is to use the Print Preview component included with most browsers. I'm not sure that I would entirely agree with avoiding the use of color in text because users can override those and choose a black and white print if they so wish too (quite easily), as long as the contrast is done tastefully you should be fine. Regarding font's, you should use PT's, you should ensure the font size used is readable (no tiny text) but as for the debate surrounding serifs vs sans, I think you can use any typeface you like as long as it's readable. Arguably Times New Roman and Georgia are the two which most people default too for printing, but don't feel like you can't be creative with print design - that's not the case at all!

PS: One thing you seem to have omitted which is VERY important... anything non-essential to the page should be hidden entirely (using display:none), the biggest issue with printing documents is the amount of wasted paper and ink, by hiding junk like advertisements, navigation or non-content essential components which are useless on the printed page you can help your visitors be more eco friendly and save them a bundle in printing costs - a very important consideration.

[cssExp]

Thanks guys!

However, I have a new doubt now. Should I link main stylesheet as media="screen" and print style as media="print"? But I want other devices to use the main style too. When I link the main style as media="all", most of the things are not following print styles e.g. opera doesn't remove background image even though background was set to none etc..

So what's the best way to link print style?

[Paul O'B]

Thanks guys!

However, I have a new doubt now. Should I link main stylesheet as media="screen" and print style as media="print"? But I want other devices to use the main style too. When I link the main style as media="all", most of the things are not following print styles e.g.

Well you could just list all the media with comma separated values that you want. However, I usually just prefer to cancel things out with the print stylesheet otherwise you have to re-style it again.

opera doesn't remove background image even though background was set to none etc..

It only does this for the body element because the image is propagated to html so you need to set a background color on the html element.

e.g.

html,body{background:#fff}

Also rather saying background:none for the elements just set it to white

background:#fff;color:#000;

That will clear images at the same time and make sure the background is white.

[cssExp]

Another doubt! I placed a h* tag right where the page would end to experiment. When I was using page-break-after: avoid; for h* tags, it seems that it only works in opera. In firefox the h* tag is in the last line of the page, but in opera (it was in last line of the page originally) it's next page when used page-break-after: avoid.

Any suggestions? Or firefox doesn't fully supports it?

[Paul O'B]

Hi,

No I believe avoid is only supported by Opera at the moment (unless it's been added in the very latest releases which I haven't checked yet).

[AlexDawson]

However, I have a new doubt now. Should I link main stylesheet as media="screen" and print style as media="print"? But I want other devices to use the main style too.

There's something worth mentioning that Paul hasn't yet (which may be useful in aiding your choice). All mobile devices while inconsistent with the handheld media type DO distinguish between print and screen effectively. Every web browser as per the CSS specification will automatically default to "screen" as the primary media type if none is declared or if no appropriate alternative exists. In the case of mobile devices, they will not use your print media sheet or references in preference of screen and will ultimately default to the screen main type you want to display (the print only exists for browsers which support the ability to send pages to a printer - which mobile devices don't tend too). As such, there's no point worrying about the impact of screen + print, it'll work fine on handheld devices.

[Stevie D]

No I believe avoid is only supported by Opera at the moment (unless it's been added in the very latest releases which I haven't checked yet).

The page you've linked to implies that it is supported by IE8 as well. A shame it isn't more widely deployed, it's such a useful feature to have.

[Paul O'B]

The page you've linked to implies that it is supported by IE8 as well. A shame it isn't more widely deployed, it's such a useful feature to have.

Sorry - well spotted

Yes a lot of the print stylesheet rules are pretty buggy which is a great shame.

[Ann C]

I create a lot of forms that are used in a document imaging system. Some of these forms are quite lengthy. I have to put page breaks in specific locations, as well as adjust print or line size.

I differentiate my print styles with "pr"
class="line" and class="prLine"
As I read my code, I can quickly tell which styles are used only for print.