My solution:
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
This works in IE, Firefox and Chrome
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
not working in Firefox 16.0.2 but it is working in Chrome
You can try the following:
@page {
size: auto
}
If you want to see landscape on the screen before you print, as well as printing, then in your css, you can set the width to 900px, and the height to 612px.
OP didn't mention A4 size. I assume it's Letter size in my numbers above.
The size property is what you're after as mentioned. To set both the the orientation and size of your page when printing, you could use the following:
/* ISO Paper Size */
@page {
size: A4 landscape;
}
/* Size in mm */
@page {
size: 100mm 200mm landscape;
}
/* Size in inches */
@page {
size: 4in 6in landscape;
}
Here's a link to the @page documentation.
It's not enough just to rotate the page content. Here is a right CSS which work in the most browsers (Chrome, Firefox, IE9+).
First set body margin to 0, because otherwise page margins will be larger than those you set in the print dialog. Also set background color to visualize pages.
body {
margin: 0;
background: #CCCCCC;
}
margin, border and background are required to visualize pages.
padding must be set to the required print margin. In the print dialog you must set the same margins (10mm in this example).
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
The size of A4 page is 210mm x 297mm. You need to subtract print margins from the size. And set the size of page's content:
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
I use 276mm instead of 277mm, because different browsers scale pages a little bit differently. So some of them will print 277mm-height content on two pages. The second page will be empty. It's more safe to use 276mm.
We don't need any margin, border, padding, background on the printed page, so remove them:
@media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}
Note that the origin of transformation is 0 0! Also the content of landscape pages must be moved 276mm down!
Also if you have a mix of portrait and lanscape pages IE will zoom out the pages. We fix it by setting -ms-zoom to 1.665. If you'll set it to 1.6666 or something like this the right border of the page content may be cropped sometimes.
If you need IE8- or other old browsers support you can use -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). But for modern enough browsers it's not required.
Here is a test page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
...Copy all styles here...
</style>
</head>
<body>
<div class="portrait">A portrait page</div>
<div class="landscape">A landscape page</div>
</body>
</html>
<style type="text/css" media="print">
.landscape {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
}
</style>
If you want this style to be applied to a table then create one div tag with this style class and add the table tag within this div tag and close the div tag at the end.
This table will only print in landscape and all other pages will print in portrait mode only. But the problem is if the table size is more than the page width then we may loose some of the rows and sometimes headers also are missed. Be careful.
Have a good day.
Thank you, Naveen Mettapally.
Quoted from CSS-Discuss Wiki
The @page rule has been cut down in scope from CSS2 to CSS2.1. The full CSS2 @page rule was reportedly implemented only in Opera (and buggily even then). My own testing shows that IE and Firefox don't support @page at all. According to the now-obsolescent CSS2 spec section 13.2.2 it is possible to override the user's setting of orientation and (for example) force printing in Landscape but the relevant "size" property has been dropped from CSS2.1, consistent with the fact that no current browser supports it. It has been reinstated in the CSS3 Paged Media module but note that this is only a Working Draft (as at July 2009).
Conclusion: forget about @page for the present. If you feel your document needs to be printed in Landscape orientation, ask yourself if you can instead make your design more fluid. If you really can't (perhaps because the document contains data tables with many columns, for example), you will need to advise the user to set the orientation to Landscape and perhaps outline how to do it in the most common browsers. Of course, some browsers have a print fit-to-width (shrink-to-fit) feature (e.g. Opera, Firefox, IE7) but it's inadvisable to rely on users having this facility or having it switched on.
You can also use the non-standard IE-only css attribute writing-mode
div.page {
writing-mode: tb-rl;
}
I tried Denis's answer and hit some problems (portrait pages didn't print properly after going after landscape pages), so here is my solution:
body {_x000D_
margin: 0;_x000D_
background: #CCCCCC;_x000D_
}_x000D_
_x000D_
div.page {_x000D_
margin: 10px auto;_x000D_
border: solid 1px black;_x000D_
display: block;_x000D_
page-break-after: always;_x000D_
width: 209mm;_x000D_
height: 296mm;_x000D_
overflow: hidden;_x000D_
background: white;_x000D_
}_x000D_
_x000D_
div.landscape-parent {_x000D_
width: 296mm;_x000D_
height: 209mm;_x000D_
}_x000D_
_x000D_
div.landscape {_x000D_
width: 296mm;_x000D_
height: 209mm;_x000D_
}_x000D_
_x000D_
div.content {_x000D_
padding: 10mm;_x000D_
}_x000D_
_x000D_
body,_x000D_
div,_x000D_
td {_x000D_
font-size: 13px;_x000D_
font-family: Verdana;_x000D_
}_x000D_
_x000D_
@media print {_x000D_
body {_x000D_
background: none;_x000D_
}_x000D_
div.page {_x000D_
width: 209mm;_x000D_
height: 296mm;_x000D_
}_x000D_
div.landscape {_x000D_
transform: rotate(270deg) translate(-296mm, 0);_x000D_
transform-origin: 0 0;_x000D_
}_x000D_
div.portrait,_x000D_
div.landscape,_x000D_
div.page {_x000D_
margin: 0;_x000D_
padding: 0;_x000D_
border: none;_x000D_
background: none;_x000D_
}_x000D_
}<div class="page">_x000D_
<div class="content">_x000D_
First page in Portrait mode_x000D_
</div>_x000D_
</div>_x000D_
<div class="page landscape-parent">_x000D_
<div class="landscape">_x000D_
<div class="content">_x000D_
Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
<div class="page">_x000D_
<div class="content">_x000D_
Third page in Portrait mode_x000D_
</div>_x000D_
</div>You might be able to use the CSS 2 @page rule which allows you to set the 'size' property to landscape.
This also worked for me:
@media print and (orientation:landscape) { … }
Try to add this your CSS:
@page {
size: landscape;
}
I created a blank MS Document with Landscape setting and then opened it in notepad. Copied and pasted the following to my html page
<style type="text/css" media="print">
@page Section1
{size:11 8.5in;
margin:.5in 13.6pt 0in 13.6pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:4;}
div.Section1
{page:Section1;}
</style>
<div class="Section1"> put text / images / other stuff </div>
The print preview shows the pages in a landscape size. This seems to be working fine on IE and Chrome, not tested on FF.
I tried to solve this problem once, but all my research led me towards ActiveX controls/plug-ins. There is no trick that the browsers (3 years ago anyway) permitted to change any print settings (number of copies, paper size).
I put my efforts into warning the user carefully that they needed to select "landscape" when the browsers print dialog appeared. I also created a "print preview" page, which worked much better than IE6's did! Our application had very wide tables of data in some reports, and the print preview made it clear to the users when the table would spill off the right-edge of the paper (since IE6 couldnt cope with printing on 2 sheets either).
And yes, people are still using IE6 even now.
Source: Stackoverflow.com