Different page orientation for printing HTML

Question

Code:

I try to make the following simple HTML page work:

<html>
  <head>
    <style type="text/css">     
    @media print
    {               
      @page port { size: portrait; }
      .portrait { page: port; }

      @page land { size: landscape; }
      .landscape { page: land; }                

      .break { page-break-before: always; }
    }
    </style>
  </head>
  <body>
    <div class="landscape">
      <p>This is a landscape page.</p>
    </div>
    <div class="portrait break">
      <p>This is a portrait page.</p>
    </div>
  </body>
</html>

Question:

I want to print the first div's content onto the first page, with landscape orientation, and the second one with portrait mode. However, all browsers (Chrome, Opera, Safari, IE10) print two portrait pages. Did I miss something or do none of the browsers support this kind of feature yet? In the latter case is there any alternative to achieve that result?

score 8 · Accepted Answer · edited May 23 '17 at 11:54

8

A quick and dirty hack would be to rotate the div that is meant to be in landscape by 90 degrees using CSS3 or filters. The following would work:

-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

There is currently no easy way to do this in any other way, as the size CSS directive is only implemented by one browser (Opera), but is nevertheless part of the current drafts ( Is @Page { size:landscape} obsolete? for the deprecation, http://www.w3.org/TR/css3-page/#page-size for the spec).

The next cheapest hack is what I mentioned above: lay your HTML out on a portrait...and rotate by 90 degrees using CSS3.

edited May 23 '17 at 11:54

Community

1
1

answered May 16 '13 at 19:53

Sébastien Renauld

19,203
2
46
66

This might be reasonable, but if you have more than one pages in your report, you will have to add top margin because the rotation with transform will be from center of the element, not from the top right corner, which would be nice :) – povilasp May 17 '13 at 11:13
@povilasp: nothing prevents you from using `position:absolute` to offset it by 40% in addition to a rot. – Sébastien Renauld May 17 '13 at 11:54
@povilasp: Just checked and will update my answer shortly with a fiddle that may make it easier. Please note that it has severe assumptions built into it, however... Still easier than PDF generation. – Sébastien Renauld May 20 '13 at 18:30
Actually. Just thought of a way to do it - https://raw.github.com/niklasvh/feedback.js/master/feedback.js combined with Canvas combined with the Rotation hack. – Sébastien Renauld May 20 '13 at 18:39
OK, your answer confirmed what I thought. Your hack is pretty interesting and it really works, however it will be a portrait page in printing. I mean, the header and footers placed on the top and bottom (or on the left and right if see as a landscape document) of the page by the browser . – tungi52 May 27 '13 at 19:26
@tungi52: indeed. It will, however, print as a landscape - the orientation on the page when using print preview will be portrait, which, sadly, there is currently no client-side alternative :-( – Sébastien Renauld May 27 '13 at 20:22

score 1 · Answer 2 · answered May 16 '13 at 21:58

1

The size property is not used (anymore), so I wouldn't rely on that. The most pragmatic way would be to generate PDF's on the server before printing.

The rotating solution provided by Seéastien would also work, but only in browsers that support it.

answered May 16 '13 at 21:58

Reinier Kaper

1,079
1
8
17

It is never a wise thing to rely on a plug-in when you can rely on a navigator feature. Rotations are supported natively using the code I provided by IE6 onwards (Through the use of `filter`). Plus if he is using media queries, he isn't using IE5.5. – Sébastien Renauld May 17 '13 at 02:25
Generating PDFs is not that easy if you have complex logic in a page you want to print. And if you have PHP environment, you don't have much choice there too. Also, why generate PDF if you don't need that actual file - you only need to print the page and that's that – povilasp May 17 '13 at 06:32

Different page orientation for printing HTML

Code:

Question:

2 Answers2

Linked