Printing Labels With CSS

I am trying to print values onto a form.  I have a scanned copy of the form, and I would like to set it as my page background so I can see if the values are lining up correctly.  I need to re-size the background image to 8.5 x 11, so it will mirror the real form.  I tried to use the background-image property on a div, but I could not find a way to re-size the image using this property.  What is the best way to accomplish my goal?  I'm attaching a copy of the scanned form.  Please let me know if I need to provide any additional information.  Thanks.  
fleetpost.gif
thedeal56Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

blacksixCommented:
Cant you just resize the image before setting it as a background? I've attached an image resized it to screen resolution 72dpi and 8.5x11 in... does this help?
form.jpg
0
LZ1Commented:
Is this just for testing purposes?  If it is not and you want it to be a permanent solution I would look to setting up an HTML form that mimics your page exactly.  
As blacksix said above, resize the image first.  If you try to resize it using HTML or CSS it's not going to give you the results you want.  I would definitely give try to mimic the exact from in HTML though.  You would have to slice up your image a little bit, but it shouldn't be difficult.
0
thedeal56Author Commented:
That's a good idea.  Thank you very much.  Here's shot of my print preview screen.  It looks like the height is correct, but the width is not.  
form3.JPG
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

LZ1Commented:
Can you post your HTML and CSS code?
0
thedeal56Author Commented:
You're right, LZ1.  That would be the correct way to do it. I've ran out of time on this project, and I was looking for quick solution.  It's totally my fault that I'm trying  to make it work in this awkward way haha.  Thanks a lot for looking into this.  I'm attaching the php file as well as a sample of the html.  
html.txt
php.txt
0
LZ1Commented:
I really hate to say this, but this is going to be a project.  When you try to translate on screen measures(pixels, ems, percentages) into physical measures (inches, mm, etc.) your going to run into problems unless you have time to play with it.  The inline code is a disaster(no offense) and it's going to take a while just to do anything with it.  I'm currently working on a viable solution, but I fear it may take some time.
I would highly recommend making 2 HTMl fomrs.  1 for them to fill out and one to print.
0
thedeal56Author Commented:
No offense taken about the inline code.  This was an old project that I did last year, and when I first opened it up for this go-around, I was like "oh....no...".  In the case of the form, this is something that they buy from the state(I think), and they are using another piece of software to manage the actual data.  I did a quick-and-dirty export from one system / import into a mysql db.  Thanks again for checking into it, I'm sorry for the sloppy code.
0
LZ1Commented:
Don't worry about the sloppy code, we've all been there.  I just think it's going to take a lot of time in order to get everything sorted out and aligned properly.  I dont' think tables would be the way to go in this case.  Still working
0
thedeal56Author Commented:
I seriously can't thank you enough for helping me on this.  That's really cool of you.
0
blacksixCommented:
I agree with LZ1 on that - trying to match everything up is going to be a real pain, considering that browsers render things differently too, a difference in padding  or margin calculation between two browsers could throw your whole form off. You're much better off making a form in html that way at least if something is a hair off its still functional. You can still make it resemble the original form so people are still comfortable with it...
0
thedeal56Author Commented:
I would love to just recreate the form and print it out that way, but these forms are on special paper.  We have to order the forms elsewhere, and the place where we buy them from does not offer any printing solution.  As for the browser, I will be able to control which one is being used.
0
LZ1Commented:
Ok, I wasn't going to offer this as a solution but it did work for special forms for an old company I used to work for.  Also, I think you need a 100% browser solution, but if I'm wrong, feel fere to let me know.
We used Excel and through trial and error we got everything put into the forms.  It was a pain to align at first, but in the end it worked out fine.
 
0
thedeal56Author Commented:
I'd like to stick with the browser solution if that's at all possible. The method you used in the excel sheet is pretty much how I was trying to do it with css.  I actually had pretty good results doing it that way, but here's where everything went south:

My "test page" was actually just a copy of the original form.  I aligned everything trial-and-error-style to the test page, and it printed out fine.  I then went to print on one of the real forms, and the alignment was messed up.   So, I took one of the real forms, scanned it, and you know the rest from there.  
0
Dave BaldwinFixer of ProblemsCommented:
Where are these forms being printed?  If it's in your office under your control, you might consider just collecting the data in the web browser and exporting it to program more suited to printing like Microsoft Word or PDF.
0
thedeal56Author Commented:
They are being printed in a place where I could supervise everything, but I think I would run into alignment issues with any method I used.  The reason that I would like to keep it browser based is because I would like to eventually tie it in with the source data(MSSQL).  I would also like to tack on a simple UI with a few different options.  
0
Dave BaldwinFixer of ProblemsCommented:
I put up a test page at http://www.dibsplace.com/ft/Formalign.html .  Because it's been my experience that different combinations of browsers, monitors and adaptors cause things not to align the same, you might want to take a look at this page on the different systems you're expecting to use your page.  I do know that IE8 and Firefox 3.6 align slightly differently.
0
blacksixCommented:
lines up for me in chrome...
0
thedeal56Author Commented:
Wow, thank you very much. I'm going to try to adapt that to my php script right now.
0
thedeal56Author Commented:
I think I can make that work.  I'm going to hold off on assigning the points right now, because I think LZ1 might still be working on something.  Thank you to all who chipped in!
0
thedeal56Author Commented:
I don't know why I didn't think of this when I first saw your example, Dave, but I noticed that the form image is centered in the middle of the page.  The form's height is actually an entire 8.5 x 11 sheet of paper.  What I want to do is line everything up on the dummy background image, and then remove the image and print on the real forms.  To fix the images height and width, I just need to resize the actual image, right?
0
Dave BaldwinFixer of ProblemsCommented:
I really doubt that you can use the same page and image for printing.  Things aren't measured the same for screen and paper.  And most browsers don't print the back ground image unless you tell them to.

Have you tried printing what I gave you yet?
0
thedeal56Author Commented:
I did a print preview on the page that you made, but the background image appeared to be in the center of the page.  What I am trying to do is use the scanned form as a background image just for alignment purposes.  I do not want to actually print the scanned form.  I just want to print the text, because I will have the real forms in the printer at time.  In order to do this, the scanned image has to scale exactly to 8.5 x 11. It seems like if the scanned form were the same scale as the actual form, then lining up the text on the scanned form should print well on the actual form.  I think I've explained myself poorly, and I apologize for that.  Please let me know if I need to go into greater detail.  Thanks again.  
0
Dave BaldwinFixer of ProblemsCommented:
There isn't any direct correlation between the screen and the paper.   In IE, "Print background images and colors" is in Internet Options on the Advanced Tab.  In Firefox, it's under "Page Setup" on the File menu.
0
thedeal56Author Commented:
Are you saying that as long as I stop the image from printing, the actual text will still align correctly on the real form?
0
thedeal56Author Commented:
Here's the basic idea of what I wanted to do:

I have a set of real, tangible sheets of paper that I need to print on

I scanned one of the real sheets of paper, hoping to use it as a background image to align my text on

I was then going to remove the background image and print my text on the real forms.  

If the alignment was done correctly on the screen, then I thought everything would print correctly on the real form.

If I'm understanding you correctly, you are saying that there is no exact way to make the scanned sheet mimic the real sheet inside of a browser.    If that's the case, it's ok.  I'll just got back to the trail and error method of alignment that I was using before.  I was just thinking that there would be a more exact way of doing it.  

0
Dave BaldwinFixer of ProblemsCommented:
I understand what you're trying to do.  I've had to do similar things before.  Browsers try to print whatever, just make sure it prints.  They don't use the same measurements that a print oriented program will use.  And different browsers display type slightly differently.

As I said before, I would use the browser to collect info that will be exported to a program that can read it into a printable format.  In the 'old days', I would write a program in C or Basic that would do the print positioning exactly the way I wanted and needed.  I don't know how to do that with current versions of Windows.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
thedeal56Author Commented:
I tweaked my original, sloppy script a bit, and I was able to make everything line up correctly. We printed around 270 sheets this morning, and everything went off without a hitch.  Thanks again to everyone who chimed  in on this discussion.  
0
Dave BaldwinFixer of ProblemsCommented:
Glad to hear it worked for you.  At least you didn't have to make it work on a typewriter.  A What?
0
thedeal56Author Commented:
haha!  Some of the people that were hanging around the printer this morning had mentioned how they used to use a typewriter to fill those exact same forms out.  They said it would take them 2-3 days to get it all done.  
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.