Print me out…

…black on white…

also comes in color…

Easier said than done to create a printable version of a web page. That is; without making a separate version of it.

I wouldn't dream of writing a single separate "printable" version of any page on our site. Instead, I'm preparing them for printout as they are.

No problem if you know a little about CSS, you say. That's right, but few browsers seem to know too much about that same CSS…

support…?

Print-style support isn't all that impressive yet, and the media: printers and software and sheets of paper and all, doesn't provide us with a fixed target. Not too hard to create something that works though – if the provided content is worth the paper it's going to be printed on.

Opera is in the lead once again. Apart from a few known bugs—mostly concerning body-backgrounds, it will come out really fine on paper.

Opera also support projection natively, so it is given a test-version based on print-styling [25.mar.2005].

Mozilla / Firefox / Netscape can make most printers happy, but only if we rearrange the entire page—using CSS. The reason: Gecko will make a mess out of large floats when going to print.

Internet Explorer (for windows) can print something, but don't ask for much. Clap your hands if it stays within the edges.

The above creates the need for some serious negotiations, as I provide slightly different set of print-styles for them. Could have done with one, but CSS is soo fun — so…
No, I won't give each browser its own stylesheet, but there are other ways.

@media print…

I start with plain (x)html, as screen-styles are kept separate in a @media screen { ... } wrapper. Similar wrapping of styles for other media means that there is nothing to correct or counter-act.

I recommend this method, as it will let us optimize our print-styles. It won't work in IE/Mac though, but that can be overcome if we really want to support that old browser.

I'm using these style-options:
  1. Plain no-nonsence styling for IE/win. Including override for IE-expressions (if there are any).
  2. Simplified non-float styling to provide for Gecko-browsers, and most others.
  3. Optimized for CSS3 capable browsers – including Opera. Some progress can be accounted for at this stage – with a little care.

Now, I create a print-style package that will work across the board — in most cases. Avoiding half-supported and non-supported print-styles, or making sure only the right browser sees them (yes, we may have to hack our print-styles slightly too, but not much).

Leaving out everything that isn't doing any good on a sheet of paper, and styling everything on top of a white background.

The rest is well known to web designers, and everyone else will have to live with the results. Turning off CSS or creating separate user-stylesheets, are also available options.

1st attempt…

This page, and the whole section, have proper print-styles now [25.feb.2005]. Nothing advanced, but it should come out just fine on paper via Opera, Gecko and IE/win – and probably elsewhere too.

A few solutions for Internet Explorer are mentioned in my page about IE-expressions. It's all found in a separate stylesheet for print which is imported into the main stylesheets for 2 and 3 columns layouts.

I'll be working on these print-styles for some time to come, to make sure they're optimized. This first attempt is focusing on the main content, and everything else is skipped overboard. Some more will be added later, for those browsers that can handle it.

sincerely  georg; sign

Hageland 01.nov.2004
last rev: 05.may.2009


Print me out…


Print Screen is an option if we want it all out on paper.
Why didn't I think of that?

Section

  • introduction
  • Table of Content

About

  • this is PTL web-design
  • CSS sledgehammer
  • accessibility
  • Print enhanced page
  • Projection enhanced
  • Small Screen enhanced page
  • validity of xhtml and CSS
  • html tidy
  • Opera and me
  • Firefox vs. IE
the usual
  • the author
  • Copyright
the unusual
  • Molly speaks up
the additional
  • Examples
  • Demo pages

Let's print out the entire world wide web.

It would be one huge pile of paper…hmmm.
Ever heard about the paperless office?


about…
…2005 - 2009