Printing to a paper form

Question

I'm thinking of using a print style sheet to fill out a preprinted paper form. So lets say you had a piece of paper that looked like this:

Name: ________________________
Address: _____________________
City: ________________________
State: _______________________
Zip: _________________________
Favorite ice cream: __________

I would want my webpage (with a print style sheet) to look like this:

        John Smith
            1 Main St
          Springfield
           MA
          01002

When the user prints the page the information would fill out the paper form, like so:

Name: ___John Smith___________
Address: ___1 Main St_________
City: ___Springfield__________
State: ____MA_________________
Zip: ______01002______________
Favorite ice cream: __________

The reason why we are thinking of doing this is that we already have a large stock of color paper forms that we just want to prefill when possible. We may not have all the information (in the example above we don't have the information about their favorite icecream). So we would want the person we are giving the form to to verify the information we have and add any information that is missing.

Has anyone done this using a print style sheet? Am I just asking for trouble? Should I really just reproduce the entire form in the browser (questions + answers) and print it all out on a blank sheet? Thanks!

Answer 1

David,

What you want to do is definitely more tedious than just printing out the form from scratch, but obviously it's understandable that you don't want to waste the printed resources that you already have.

The 960 grid system (http://960.gs) is fairly popular for laying out websites, and although your use of it wouldn't necessarily be precisely what it was meant for, I think it will help. You can download all of the 960 grid system resources from here.

Once you've downloaded the resources, you'll want to find the PDF version of the sketch sheet document. You can overlay that over your printed form (transparency helps here) and determine how to layout your webpage to match the positioning you desire.

Following that, you can then use the 960 grid system demo code from the resources folder to get your layout started.

Hope that helps somewhat

Answer 2

Guess you are asking for too much trouble, but you are right to use available resources.

In cases like this, a few pixels/dots up or down may turn your printing into a mess... using CSS for that may be quite difficult (it have pixel precision, but it is not page-oriented, don't have page margin control, etc). If I had to do this (yes, it will be tedious), I'd use some pixel-precision report generator (like Jasper) and align fields carefully.

Answer 3

If your happy with the use of absolute positioning of DIV's you could make use of CSS's support for top, left, right, bottom, width and height being specified in Centimetres within a print style sheet.

Ie:

div.name { position:absolute; top:1cm; left:3cm; width:4cm; height:0.7cm; }
div.address1 { position:absolute; top:1.9cm; left:3cm; width:4cm; height:0.7cm; }

You would just need to measure up your forms and then setup all the DIVs to be position where the lines are on your existing forms.

When I was trying to do this myself I just setup a grid of nested unordered lists to mark out a 5mm by 5mm grid to help get the initial alignment on the printed page worked out and then just measured up with a ruler what dimensions to use for each element. Oh and you need to set the page (or a div wrapper) to position relative.

Edit - You may also want to set the div's to set any overflow to be hidden so you don't get any long lines wrapping around into another field.