How to print HTML in landscape?
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 answer1 is deprecated2. 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.
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
Answer
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>