Discussions

Not all browsers and printers are equal

Tags:
+
0 Votes
Locked

Not all browsers and printers are equal

edbrandon
It doesn't matter what browser and operating system you like to work with, when publishing to the web, you need to support the majority of platforms used.

As with the screen, printing doesn't always work the same way from browser to browser, and it is essential to try things out on several browsers.

Here is what I test:

On Windows:
- Firefox
- Internet Explorer 6, 7 and 8 (which requires 3 computers or VM. In my organization, I have one user still on IE 6 and one on IE7, intentionally!
- Opera
- Chrome
- Safari

On Mac OS:
- Safari

This identifies many surprises. Here are two examples:

1. It is normal for browsers, by default, to not print background colours and images. But Opera does, if they are defined in the style sheets. I solve this by:
- Normal style sheet: .left-nav { background: url('xxx.xx.xx') ...;
- Print style sheet: .left-nav { background: none;
Indeed, this is always a good idea, in case background printing is turned on.

2. Safari 5.x for Windows does not print images! Really! It's a bug, of course, and I've seen comments on this, but I've never seen a fix. Another good reason to use the 'alt' attribute in <img> statements, since the space is reserved for the image, and the alt text is inserted there.

Don't forget to turn off printing on parts of the page that are not related to the subject at hand (navigation, legal links, etc.). Use the CSS command display: none; in the print style sheet to accomplish this.

You may need to redefine the width of blocks (usually DIVs), so that things fit on a page. Allow for some variation in margins; different printers behave differently. Even allow for a slightly narrower paper size (A4, used in most of the world, about a quarter in narrower then letter size paper in North America). It is also a good idea to remove any left padding and margins from the left edge of the page, and similarly right margins and padding from elements at the right edge.

I usually define the appearance of all anchors to match the rest of the text (same colour, font, no underlining). But this is a matter of taste. Links of course cannot be clicked on a sheet of paper.

Finally, you may want to add some items that appear on printed material but not on the screen. I usually ensure that our organization's logo appears (although I have disabled everything that normally appears at the top of our screen pages), and likewise a copyright statement in the footer. This is best done in the page template's HTML, using classes or ID?s that are normally turned off (display: none;) in the screen CSS, but turned on (display: block; etc.) in the print CSS.