Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Precise printing using CSS for filling forms purposes

My APP should fill a form putting the data exactly inside the boxes



3:33 pm on Apr 12, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

Hi webmasters, I created a solution for managing data (forms) and works great. Now I need to print it (easy) but instead of drawing the form and printing the data, I need to fill an already printed form, one page at a time: clic the print button, there goes your page (no multipage printing).

1. Is there a way to get precise printing compatible with all major browsers? or do I have to be browser specific?
I've worked hard to make this app work perfect on FF, IE, Op and SF to respect my clients personal preferences, but it seems I can only get precise printing via CSS being browser specific, so, one CSS for each browser?

Win - Mac - Linux specific too?
Now I'm worried about compatibility across Windows and Mac too, not only web browsers. I guess FF won't print the same on Win as in Mac.

I battled with CSS a week ago filling and creating labels with products codes and some other data combined. Gave up on CSS as it didn't work as expected respecting the margins of the paper even as I played with the browser margins manually. Diff browser, diff results. I needed milimetric precision.
    Solution for the labels? went the PDF way. Absolutely precise on Adobe Acrobat and even on Foxit PDF Reader. In this case after clicking submit the page automatically sends the PDF for you to download or open it. You choose and then you print. That's fine here, in this scenario the circumstances of label printing are more relaxed in time.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

But now in this print-the-form page I need to avoid clicks as it is in front of the customers and I need it to be "on the go". Fill, review, print, next!. After researching I found webmasters who setted up a server where the pdf creating and sending to print takes place (the user won't have the printer plugged in) but this extra computer is not an option here.

What I'm just tested.
  • I created a web page with CSS for screen and for print.
  • Created a grid of 1x1 cm each cell that fills most of the page
  • Sent to print from Firefox, IE, Opera and Safari
  • Tried Doctype XHTML 1.0 transitional and also HTML 4 STRICT
  • Manually configured the margins of each browser to the same value
  • Then compared the prints

My results so far:
  • All the browsers allowed me to configure the margins except from Safari.
  • Every output looks as the screen except from Firefox where horizontal block have diff amount of boxes (+1), is still a grid but the number of horizontal boxes doesn't match the screen.
  • Safari adjusted the % of the page (width and height), it looks like 90% of the original document.
  • Opera: love it but useless control of the margins
  • Safari: can't control the margins or the adjustments of the percentage of the document
  • FF and IE worked better but the pages are different. There is a variation of one box per line and the whole thing varies in size (width and height) in like 0.5% - 1%.

I see there is no other option other than going straight to PDF again but decided to ask for help. Am I missing something?

Thanks in advance.


6:28 pm on Apr 12, 2011 (gmt 0)

WebmasterWorld Senior Member topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

won't different printers print differently as well, certainly they can have different settings.

... is this for general use or will you have control over the computers/printers that are doing the printing?

...i don't know the answer to your problem, i do know that i did a similar thing (printing addresses on a very precise part of the page) using css - in the end i gave up on cross browser compatibility and worked with firefox only, however this was several years ago and print css support may have moved on a little since then.


11:09 am on Apr 13, 2011 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I'd step away from browsers as much as you can: too many dependencies and settings you'll have no control over, or far too limited to get it right.

If you can generate e.g. a pdf and let them print that on top of an existing form: that might be the best way to have a somewhat reliable positioning.

Do take into account that different parts of the world use different sized paper - don't know if it applies here, but it is a common error. E.g. US created software assuming people in Europe have "letter" or even worse "legal" sized paper.


3:44 pm on Apr 13, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

Best solution: PDF

Thanks for your comments. Yes topr8, true. I won't have control over so much settings but as a seller of the program I will have access to the computers and printers of my clients. Thought about what you did, configuring and working specifically around one browser is possible, but after "calibration", it will be a mess if they change browser, printer or if a browser update from version to version changes the way it prints.

Right swa66, I'm already generating PDFS of other stuff and working just fine. The PDF format (milimiter by milimiter) is respected.

In this case ("print on the fly") I'll go after inserting the resulting PDF on an IFRAME, in this case there won't be any downloads or unneeded clicks. Just "GO" and then click on print (on the inserted PDF). Won't open the pdf on extra window as many users go after CTRL + W on windows to close it but that won't work on FF with an already opened PDF, so it means one more click.

I'm going to PDF.


2:55 pm on Apr 15, 2011 (gmt 0)

10+ Year Member

Is your backend PHP or ?


3:17 pm on Apr 15, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

I'm using PHP but mostly Perl. For the PDF generation I use ImageMagic, except for some cases where I use PHP functions to convert some HTML to pdf, but that's fine as I don't need precision positioning for those conversions, only for filling printed forms.

In my case it doesn't matter so much what the backend is as I'm not doing a conversion from any format to pdf for the form filling on print. I just want to generate a precise way of printing. Now I'm pretty sure PDF is the solution, so I create the PDF with precision on the server and then send it to the user. The pdfs are printing just fine with great precision no matter what browser I use. Adobe Acrobat and Foxit PDF Reader are printing the PDF just as it is, exactly the same.


3:41 pm on Apr 15, 2011 (gmt 0)

10+ Year Member

If you have the forms in HTML already, TCPDF has functions to convert to PDF. Personally, though, I don't like them much and create the PDF's on my own using straight PHP.


5:45 pm on Apr 15, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

Thanks, very true, is very ugly to do so. In this case I work directly via imagemagic to produce exactly what I want. I would like an easier way but theres no alternative for milimetric results.

Featured Threads

Hot Threads This Week

Hot Threads This Month