Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Landscape printing with CSS

Tags:

html

css

printing

I have added an CSS file this way:

<link rel="stylesheet" href="style.css" type="text/css" media="screen, print">

The css contains amongst other the following:

.landscape {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%;
filter: progid : DXImageTransform.Microsoft.BasicImage ( Rotation = 3 );
}

The body tag of my html page is set with class=landscape.

Then the question. While viewing the page in IE9 it is rotated 90 degrees (landscape), but when I print the page is still in portrait? Everything else is OK with the page, so it loads the CSS for prints, but it seems like IE9 ignores the landscape for printing. Anyone know why and how I can print it in landscape?

I have also tried the following which seems like it only works in Chrome

@media print { 
  @page{
      size: A4 portrait;
      margin-left:0.0cm;
      margin-right:0.0cm;
  }
}

I have found several "answers" on google, but most of them sums up to the two alternatives I have presented, which doesn't really work for me..

EDIT: As presented below:

-ms-transform: rotate(90deg);

.. doesn't work either. I have a big table which I just want to print in landscape because of the big nr of columns. How hard can it be?

like image 835
KimHafr Avatar asked Aug 26 '11 07:08

KimHafr


2 Answers

Seems like the only way to get a perfect landscape-print is to go through the print dialog and choose landscape from there. Its really hard to do this automatically with success in each browser.

like image 183
KimHafr Avatar answered Oct 10 '22 02:10

KimHafr


try:

@media print{@page {size: landscape}}
like image 38
Luca C. Avatar answered Oct 10 '22 02:10

Luca C.