Home/ Questions/Q 3301570
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T20:45:52+00:00

I’m thinking of using a print style sheet to fill out a preprinted paper

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0