Geek Answers Handbook

How to print HTML in a landscape?

This question was asked and answered, but the largely approved answer answered:

  • doesn't explain how to do it
  • does not work

The reason, of course, is that the accepted answer 1 is out of date 2 . And the W3C did not come up with any standard replacement. This leaves me with a problem, as I have actual things to do.

How do I tell the browser to print content in the landscape?

Example that doesn't work

I put together an example containing every piece of chewing gum that I could find.

<!DOCTYPE html> <HEAD> <STYLE type="text/css"> /* /questions/36272/landscape-printing-from-html/264162#264162 */ @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 someone come up with something that works?

Suppose Chrome, IE11, or Edge.

Background

The reason I do this is because I need to print the landscape. In my particular case, I will use the advanced layout and layout services available in HTML for printing on 8.5 x 11 inches three-line paper:

enter image description here

I want to go down the stripes vertically, except that you need to have text, images and layout, to be horizontal on the page:

enter image description here

Reading bonuses

+7
html printing landscape
source share
2 answers

Kind of hacks, and I only tested on Chrome ... inspired by Various page orientations for printing HTML

As I noted in the comments above, for a single page solution this will probably work for you. You can adjust some sizes, etc.

 <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>

enter image description here

+3
source share

You can print output from your application that is optimized for landscape printing, but you are unlikely to see a software implementation that allows the markup language to control peripheral equipment in the way you describe. This is because it can be potentially dangerous due to the proximity of the printer driver to "ring-0" (kernel, in x86 architecture).

The only safe solution (from a security point of view) is to offer instructions for your users to print using the landscape settings in their print dialogs. Using CSS, you can create a portrait view of your output, optimized as such (ie, “Hiding” columns that don't fit, doing “...” for long data items to make them squeeze and fit, etc. ); but with VERY noticeable "WARNING: landscape required, please select landscape when printing" - message type; but this is more about UI / UX than technical.

0
source share

More articles:


All Articles