Menu
This question has been asked, and answered, but the heavily upvoted accepted answer both:
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?
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>
<!--https://stackoverflow.com/a/13684191/12597 -->
<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.
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:
510
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>
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
