如何在横向上打印HTML？ [英] How to print HTML in landscape?
问题描述
这个问题已经被提出并得到解答，但接受了大量接受的答案：
$ b
- 并没有解释如何去做
- 不起作用
原因当然是，接受的答案
我想垂直下去，除了那意味着必须使文字，图像和布局在水平上页面：
奖金阅读
-
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.
<!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.
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
- Landscape printing from HTML
- How can I define a CSS class to set the printed page in landscape mode?
- Print in Landscape format
- W3C CSS Print Profile
- Printing an HTML Page in Landscape Mode
- Is @Page { size:landscape} obsolete?
- CSS Paged Media Module Level 3
解决方案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>这篇关于如何在横向上打印HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
