How to print HTML in landscape?

Asked 12/8, 2015 at 15:10 Answered 13/8, 2015 at 19:48

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://mcmap.net/q/55113/-landscape-printing-from-html */
@page
{
size: landscape;
}

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

/* https://mcmap.net/q/1104213/-how-can-i-define-a-css-class-to-set-the-printed-page-in-landscape-mode */
@media print{
.class-name{
    @page{
        size:landscape;
    }
}
}
</STYLE>

<!--https://mcmap.net/q/295008/-print-in-landscape-format-duplicate -->
<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

Sanalda answered 12/8, 2015 at 15:10 Comment(4)

Maybe tricky but at least it's an option: #14903927 – Beset 12/8, 2015 at 15:17

Is it a one page print requirement? From the example it doesn't seem content flows down columns to other pages. Is that a correct assumption? – Abvolt 13/8, 2015 at 17:47

@KevinBrown Oh god; i hadn't considered that. Right now these receipts come out on 4.25"x10.5" (half of 8.5x11"), 3-ply, carbon-copy, dot-matrix, pin-feed paper. And if there is not enough space on one page, it does a form-feed and continues on the next page. So there may be more than one page; but assume for this question that there is only one page. – Sanalda 13/8, 2015 at 19:36

Well, I would have solved it as @Beset above suggests in that linked article. If it is a one page solution, you can just use rotation to accomplish the task. I know, sounds hacky to me too. I did a few tests and it would work fairly easy. You do have to beware as stated that you will need some top, left offset to the rotation. – Abvolt 13/8, 2015 at 19:40

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>

Abvolt answered 13/8, 2015 at 19:48 Comment(0)

You're welcome to preformat output from your application optimized for landscape view printing, but you will not likely see an implementation of software that allows a markup language to control peripheral hardware in the manner you described. This is because doing so could be potentially risky, owing to the proximity of a printer "driver" to "ring-0" (the kernel, in x86 architecture).

The only safe solution (from a security standpoint) is to offer instructions to your users to print using their landscape setting in their print dialogues. Using CSS, you could create a portrait view of your output optimized as such (i.e., "hiding" columns that wouldn't fit; doing "...'s" for long data items to make them squeeze in and fit, etc.); but with a VERY noticeable "WARNING: Landscape view required, please select landscape when printing"-type message; but that's more a UI/UX concern than a technical one.

Ordain answered 12/8, 2015 at 16:36 Comment(2)

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. – Sanalda 12/8, 2015 at 16:50

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. – Ordain 12/8, 2015 at 17:28

Example that doesn't work

Background

Bonus Reading

Recommended topics

Hot tags