6

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?

KimHafr
  • 2,922
  • 3
  • 26
  • 28
  • I don't think it's reasonably possible to use CSS to print in landscape, especially not cross-browser. It's probably easier to change the paper orientation in the the printer settings. – RoToRa Aug 26 '11 at 07:59
  • check your IE9's browser mode to ensure it isn't falling into compatibility mode. The `filter` style shouldn't work in IE9 because they've replaced it with standard CSS3 styles, but it will still work in IE8 or IE7 compatibility mode. But other things may not work in these modes, so you're more likely to have success with this if you're in standard IE9 mode. – Spudley Aug 26 '11 at 08:40
  • possible duplicate of [Landscape printing from HTML](http://stackoverflow.com/questions/138422/landscape-printing-from-html) – John Nov 02 '11 at 11:53
  • I think it might be rotation issue in ie9 like [HERE](http://stackoverflow.com/questions/4865167/css3-transform-rotate-in-ie9) – Gatekeeper Aug 26 '11 at 07:56

3 Answers3

4

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.

KimHafr
  • 2,922
  • 3
  • 26
  • 28
  • In IE this works for me by canceling the print dialog, and then selecting the print preview dialog and selecting "Landscape" and "View Full Width" and then printing. – RetroCoder Jun 27 '12 at 14:38
2

try:

@media print{@page {size: landscape}}
Luca C.
  • 11,714
  • 1
  • 86
  • 77
0

In addition to your answer, Kim, I would state that interfering with, or 'hyjacking' standard browser functionality should be avoided. People know their browser and rely on it working in a standard way. Especially people with disabillities might not be able to understand the "handy feature" given to them in good faith. To give another example people used to give ways to scale pages with a "handy" scaling button. The result was that the user scaled with that button and then used the native function or vice-versa resulting in strange behaviours.

Wilbert
  • 13
  • 3