homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Precise printing using CSS for filling forms purposes
My APP should fill a form putting the data exactly inside the boxes

WebmasterWorld Senior Member 5+ Year Member

Msg#: 4296214 posted 3:33 pm on Apr 12, 2011 (gmt 0)

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.



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

Msg#: 4296214 posted 6:28 pm on Apr 12, 2011 (gmt 0)

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.


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

Msg#: 4296214 posted 11:09 am on Apr 13, 2011 (gmt 0)

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.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4296214 posted 3:44 pm on Apr 13, 2011 (gmt 0)

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.


5+ Year Member

Msg#: 4296214 posted 2:55 pm on Apr 15, 2011 (gmt 0)

Is your backend PHP or ?


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4296214 posted 3:17 pm on Apr 15, 2011 (gmt 0)

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.


5+ Year Member

Msg#: 4296214 posted 3:41 pm on Apr 15, 2011 (gmt 0)

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.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4296214 posted 5:45 pm on Apr 15, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved