How to print HTML in landscape?

html printing landscape

31,096

Kind of hacky and I only tested on CHrome ... inspired by Different page orientation for printing HTML

As I noted in the comments above, for a one page solution this would probably work out for you. You can adjust some of the sizes and such.

<html>

<head>
  <style type="text/css">
    h3 {
      text-align: center;
    }
    .receipt {
      height: 8.5in;
      width: 33%;
      float: left;
      border: 1px solid black;
    }
    .output {
      height;
      8.5in;
      width: 11in;
      border: 1px solid red;
      position: absolute;
      top: 0px;
      left: 0px;
    }
    @media print {
      .output {
        -ms-transform: rotate(270deg);
        /* IE 9 */
        -webkit-transform: rotate(270deg);
        /* Chrome, Safari, Opera */
        transform: rotate(270deg);
        top: 1.5in;
        left: -1in;
      }
    }
  </style>

</head>

<body>
  <div class="output">
    <div class="receipt">
      <h3>Cashier</h3>
    </div>
    <div class="receipt">
      <h3>Customer</h3>
    </div>
    <div class="receipt">
      <h3>File</h3>
    </div>
  </div>
</body>

</html>

31,096

Author by

mistertodd

Any code is public domain. No attribution required. జ్ఞా <sup>🕗</sup>🕗 Yes, i do write i with a lowercase i. The Meta Stackexchange answer that I am most proud of

Updated on April 26, 2020

Comments

mistertodd about 4 years
This question has been asked, and answered, but the heavily upvoted accepted answer both:
- doesn't explain how to do it
- does not work
The reason, of course, is that the accepted answer¹ is deprecated². And the W3C has not come up with any standard replacement. Which leaves me with a problem, as I have actual things that need to get done.

How to tell browsers to print content in landscape?

Example that doesn't work

I threw together an example that contains every snippet of chewing gum that i could find.
```
<!DOCTYPE html>
<HEAD>
<STYLE type="text/css">

/* https://stackoverflow.com/a/1392794/12597 */
@page
{
size: landscape;
}

/* http://www.devx.com/tips/Tip/32962 */
@media print{
@page {
	size: landscape
}
}

/* https://stackoverflow.com/a/16655216/12597 */
@media print{
.class-name{
    @page{
        size:landscape;
    }
}
}
</STYLE>


<STYLE type="text/css" media="print">
  @page { size: landscape; }
</STYLE>

</HEAD>

<BODY>
Hello, landscape.
</BODY>

</HTML>
```
Can anyone come up with something that does work?

Assume Chrome, IE11 or Edge.

Background

The reason i'm doing this, of course, is that i need to print landscape. In my particular case i will be using the rich markup and layout services available in HTML to print on an 8.5x11" piece of tri-perforated paper:

I want to go down the strips vertically, except that means having to have the text, images, and layout, be horizontal on the page:

Bonus Reading
mistertodd almost 9 years

The problem is that it's not a user that will be printing the web-page. It will be an embedded browser (e.g. Chromium embedded, MSHTML) that will be printing to a printer. I would rather design the printout using rich HTML markup (and utilize the existing 20 year old concept of rendering HTML in landscape), than open a printer device context myself and issue manual GDI drawing commands to a printer DC.
unrivaledcreations almost 9 years

Thanks for the clarification. I agree with your approach, too: Using a rendering engine to interpret your markup is a very easy way to create output. It must be terribly frustrating because in your case, a non-standard standard got pulled right out from under you, by the looks of it! Hopefully, someone can come along and figure out how to move that output from your embedded framework to the printer in landscape programmatically. Sorry I misunderstood the question and I hope someone else can be of more help.