> -----Original Message----- > From: Govinda [mailto:govinda.webdnatalk@xxxxxxxxx] > Sent: Sunday, December 05, 2010 1:33 PM > Cc: 'PHP-General List' > Subject: Re: desire your recommendation for our specific HTML -> PDF > project > > > IIRC, the browser rendering difference should only be on the screen > > and with available fonts on the client. > > I am finding just the opposite of what you are saying. The page looks the > same in the browsers.. but when I print from different browsers I get > different results on paper. Like just for starters - the top and left > whitespace margin introduced by the browser.. (which is *outside* any > margin I have set (or not set) with HTML/CSS) is different. Also the scaling is > different... as though I am using zoom/scaling in one print dialogue but not > the other (even when I am not using any scaling options, while printing, in > any of the print dialogues). > That's because each browser has the a different page setup for printing, margin, header & footer (including date, time, url, etc.). You'll have similar problems with PDF. I have a few Word documents with 1/4 inch margins saved as PDFs, via Acrobat Pro, to send out some folks. When they try to print w/o checking the configuration, Acrobat would just try to scale and center, essentially reducing the overall size. Either way, the user has to check the configuration prior to printing just as they would have to set the page layout in the word processor. The only way I see around this is to actually generate Word type document, where the user doesn't need to do check the configuration. Since Word format is proprietary, you'll might some problems getting the code. > > But for print, if you use pt, it should be accurate. The only issue I > > see with print is the font difference on printer and in the client's > > system, that's the printer driver problem. If you use some special > > fonts, then you'll have to create a PDF so acrobat can attempt to > > rasterize it. > > > Another option is just generate each label as a picture via GD, > > ImageMagick, etc..., then no problems with browser differences or font > > issues :D. If you do generate pics or PDF, beware of the quality of > > printer's dpi vs. visual screen. Any decent printer should be able to > > print > > 1200 dpi, or at least 600 dpi. > > that is not a bad idea, in this case. I enjoy exploring and getting good at lots > of different solutions.. In the end, I'll have to defer to client and budget. So > far we are just gathering ideas before committing to trying something. > Budget is such that we need to do this only once if at all possible. > I too like to do things right the first time :) > > Here's the sample CSS print media since 1pt = 1/72 inch, assuming > > you're using Avery labels with 1/4 inch margins: > > > > body { width: 100%; min-width: 756pt; text-align: center; } > > div.container { width: 576pt /*8 / (1/72) */; height: 756pt /* 10.5 > > inch / > > (1/72) */; overflow: hidden; } > > div.label { float: left; width: 192pt /*576 / 3 columns */; height: > > 72pt /* > > 1 inch height label */; overflow: hidden; } > > Each label contains within it layered (z-index) divs, tables, graphics.. > I did used pt for the font sizes (or em on top of a pt base font size).. and I > used inches as the length/width units.. so it was intuitive for layout on > paper. > IIRC, if you used em, it relies on each browser's font configuration. So you'll have to pt with !important. > It looks great on screen (easy to line up with an AVERY template).. > but now we just need to pin down the print method so the client's client can > print reliably.. without needing to be technically involved. > I really appreciate your effort to help conceptualize. Now if you feel like it, > and have time.. try laying out a single letter-size page to print 30 address > labels and then actually print that page from different browsers and see > what you get. Does your page's data cells (now printed on paper) exactly > line up with the Avery template which you modeled after? Are the tests > from different browsers producing the exact same printout? > > -Govinda Yup on the HP 2015 at 1200 dpi. The only browsers that didn't print out correctly (on Windows) are Chrome & Safari, both are web toolkit... which I can't seem to find the scaling on the print configuration. Apparently, I'm not the only person with the printing issue [1]. IE 8 (w/o compatibility - shrink to fit off), Firefox 3.16 (shrink to fit off), and Opera 10.63 (fit to paper width off and scale print to 100%) have scaling capability. All have margins at 1/4 inch or .635 cm. This is from my template a while back. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title></title> <style type="text/css"> @media all { body { font: 11pt Arial, Helvetica, sans-serif !important; line-height: 1.25em; margin: 0; padding: 0;} div { margin: 0; padding: 0; } body { width: 100%; min-width: 576pt; text-align: center; } div.container { width: 576pt /*8 / (1/72) */; height: 756pt /* 10.5 inch / (1/72) */; overflow: hidden; } div.label { float: left; width: 190pt /*576 / 3 columns -2 (adjusted for border) */; height: 72pt /* 1 inch height label */; overflow: hidden; border: 1px solid #999; border-bottom-color: #333; border-left-color: #333; } } </style></head> <body> <div class="container"> <div class="label">address 1</div> <div class="label">address</div> <div class="label">address</div> <div class="label">address 2</div> <div class="label">address</div> <div class="label">address</div> <div class="label">address 3</div> <div class="label">address</div> <div class="label">address</div> <div class="label">address 4</div> <div class="label">address</div> <div class="label">address</div> <div class="label">address 5</div> <div class="label">address</div> <div class="label">address</div> <div class="label">address 6</div> <div class="label">address</div> <div class="label">address</div> <div class="label">address 7</div> <div class="label">address</div> <div class="label">address</div> <div class="label">address 8</div> <div class="label">address</div> <div class="label">address</div> <div class="label">address 9</div> <div class="label">address</div> <div class="label">address</div> <div class="label">address 10</div> <div class="label">address</div> <div class="label">address</div> </div></body></html> Anyway, we're totally off-topic :)) Perhaps we should take this off-list, unless others are interested in this also. Forgot to mention that with this, there should be no waste as the user can specify to start printing at which label #, counting left to right then top to bottom. IIRC, Avery has a lot of different address and return address labels size (I used to work there a long time ago), ranging from 1/2 to 3 inches height. Regards, Tommy > > > For the font size, you should use pt also - 10 or 11 pt is readable on > > the > > print out. Each label is inside the div and it should fit nicely. > > If you > > do with CSS, you can permit the users to change size of label, as > > their need may change, with calculations from PHP to get dimensions > > (width & height of the label). If anyone can tell visually the > > difference of 1pt or fractions thereof, that person isn't normal :)) > > > > Regards, > > Tommy > [1] http://www.google.com/support/forum/p/Chrome/thread?tid=4c903fafce998918&hl= en -- PHP General Mailing List (http://www.php.net/) To unsubscribe, visit: http://www.php.net/unsub.php
