I'm using -webkit-transform: rotate(90deg) to rotate text. This text is in a banner that is 500px wide.
When I right align the banner on the edge of the desired page width, the pdfcrowd rendered page is allowing for the non-rotated banner and is appearing smaller than intended.
I have tried setting the banner to be in the middle of the page (i.e. more than 500 pixels from the edge) and the rendering works as expected.
Is there a workaround that you can think of for this?
I tried setting the left position from the middle of the page to the right side of the page using javascript but the same thing happened. The rendered page was mis-scaled.
.banner {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
-webkit-transform: rotate(90deg);
-webkit-transform-origin: bottom left;
-moz-transform: rotate(90deg);
-moz-transform-origin: top left;
-o-transform: rotate(90deg);
-o-transform-origin: top left;
-ms-transform: rotate(90deg);
-ms-transform-origin: top left;
transform: rotate(90deg);
transform-origin: top left;
font-size: 24px;
height: 60px;
padding-left: 20px;
padding-top: 10px;
position: absolute;
left: -500px;
top: -60px;
width: 500px;
}
Note: When I set left: 25px in the right most grid column on the page then the page mis-renders.