Mini Howto: Printer Friendly CSS

I wanted to create some handouts for an upcoming class I have. I liked my LAML solution, so I wanted to keep them in HTML. But how could I insure that the printed version looked good?

I recalled that CSS supports the concept of media types and that print was one of them. So I did a bit of research in that direction.

It turns out, it's trivial to make printer friendly documents. In my case I wanted to control where the page break were, so I just made use of page-break-after.

 <div style='page-break-after: always'>
   ...the content for one page goes here...
 </div>

That provided me with the page breaks I wanted. To get even fancier, I added:

 <link rel='Stylesheet' href='print.css' 
          type='text/css' media='print'
 />

I then stashed some specific definitions for printer friendly settings in print.css.

You can also use media='screen' to control the content of what is shown on the screen.

I'm really impressed with how easy CSS made this, and how it all Just Works in Firefox.

Oh, and I should plug LAML again here - this whole form thing would have been a cut and paste nightmare if it weren't for LAML. I can simply say:

  (let ((scenario (lambda description
                     ...)))
   (div
    (scenario
     "Find tax software that you would recommend for a person who wants to"
     "do their taxes for the first time.")
    (scenario
     ...)))

Which allows me to define once how a scenario should be rendered, yet call it multiple times. Check out the final document here to see what I mean. For maximal effect, do a print-preview to see the printer friendly style sheet too.