Hey,
I am trying to use metric units to print from HTML page to a A4 portrait paper. The HTML pages contains three tables with equal left margin. A variable margin exists between one table and the other. The problem lies in the cross browser compatibility of the printing. I have noticed that the margins on paper differ widely between Firefox, Safari and Google Chrome. Aren’t metric units supposed to be rendered the same across the different browsers ? What is the best mean of printing from an HTML page to a A4 paper?.
Kindly find below an image which illustrates what I am trying to achieve.
Thanks.
I’m not quite sure what the problem is, so you might need to explain it more or give us a link to a live page. But, a few thoughts…
You can’t rely on people having any particular page margins on their printers. Different browsers will have different defaults. Different printers can give different defaults. Some people change the default themselves. So, just like designing for the screen, when designing for print you should allow some flex in the layout.
Yes, all browsers should render elements that are set in physical measurements (cm, pt, in) at the same size - assuming they can fit them on the page.
In terms of the width, I think the best thing to do is to set the width of the table to 100%, and the width of each column to 33% - that will ensure that the table always scales to the available space. You could also put a max-width on of (for example) 18cm, which would ensure at least a 1.5cm margin on both sides (assuming you centre it).
If you want the tables at the top, middle and bottom of the page then your best bet is to absolutely position them. For the first table, position:absolute; top:0;. For the third table, position:absolute; bottom:0;. So far, so funky. Unfortunately, the middle table is not quite so easy, because absolute positioning doesn’t allow you to centre an element vertically within its parent. So what I would do is something along the lines of position:absolute; top:50%; margin-top:-5em;, where the margin-top is negative, and equal to (roughly) half the height of the table. It will be difficult to get this point-perfect, but I doubt anyone will measure the output with a ruler to find out why the gaps are a few millimetres different. (To find the height of the actual table in ems, you’ll just have to do a bit of experimenting).
CSS Print properties for a CSS print media file would be your best bet albeit they aren’t too accurate because the browsers don’t have to honour them.
The ‘paged media’ in CSS covers some aspects such as suggest page-margins. Also like Stevie said the print drivers and printers differ with their settings too and because of this CSS altered somewhat in its ideas because there were too many variables.
To give you a better idea of what I am trying to do, please take a look at this PDF file.
http://goo.gl/aklpn
.It shows the A4 page that I am trying to print on (with the blue areas that I have added for illustration purposes). I am trying to print the tables (with three rows each) on the blue areas. The location of the tables (blue areas) doesn’t have to be exact, however they should not appear on the top of text.
I know that PDF is my best shot, I have already done it using mPDF, however a lot of clients were frustrated with the fact that it takes some time to generate the PDF file.
Any ideas would be appreciated.
Thanks!
I think you’ll struggle to achieve that level of precision with HTML+CSS - because you can’t control the print margins that are set within the browser, you need a tolerance of about 2cm in the placement, and you just haven’t got enough space for that. With PDF, that isn’t an issue - and with a bit of luck, the tables will line up even if the surfer has “fit to printer margins” selected (although it may be worth putting a note that they should use “page scaling:none” for best results).