Question

I have a golf score card generator. Structurally the page has a div of class .printarea wrapping a 1072px wide table.

I have gradually been getting it so printing presents a single page in landscape orientation in all major browsers.

In Firefox if rotation and scale are specified on BODY then scale fails to work. So I moved the rotation to the DIV containing everything else. This achieved rotation but offset the table so that some cropping occurs on the right side (bottom of table) and top (right side of table).

I attempted to correct this with margins and with absolute positioning but this resulted in small disjointed pieces of the table shunted to a second page. Reducing scale even to tiny proportions never resolves the second page placement.

Playing with origin settings I eventually get to position:absolute; -moz-transform-origin: 400px 900px; This loses part of the top of the table (left side of page) and displaces the last two rows despite the fact that the foot of the table (right side of page) is easily 3 inches from edge of paper. Scaling down even to tiny proportions does not correct the displacement.

Here’s a static copy of one card: http://egolfplan.com/example.html

At end of post I will add screenshots of PDFs from printing.

Current CSS

<style type="text/css" media="print">
    BODY {
        width:100%;
        height:100%;
        -webkit-transform: rotate(-90deg) scale(.68,.68); 
        -moz-transform:scale(.48,.48);
         zoom: 60%;
    }
    .printarea {
        width:100%;
        height:100%;
        -moz-transform:rotate(-90deg);
    }
    @page {margin: 0;}

 </style>

This is scaled to 68%

Scaled to 48%

-moz-transform-origin: 400px 900px;

Answer 1

In general, I believe that rotating via CSS is unreliable given varying browser implementations, especially in your case since you are using browser specific properties.

I would do one of the following.

1. Use a robust javascript library such as jQuery Rotate
   (http://code.google.com/p/jquery-rotate/) instead of CSS.

2. Write some
   server side code that actually generates an image of this score
   card, which can be readily scaled or rotated. PhP can do this for instance.

3. Change your design to
   avoid having vertical text.