Landscape printing from HTML
In your CSS you can set the @page property as shown below.
@media print{@page {size: landscape}}
The @page is part of CSS 2.1 specification however this size
is not as highlighted by the answer to the question Is @Page { size:landscape} obsolete?:
CSS 2.1 no longer specifies the size attribute. The current working
draft for CSS3 Paged Media module does specify it (but this is not
standard or accepted).
As stated the size option comes from the CSS 3 Draft Specification. In theory it can be set to both a page size and orientation although in my sample the size is omitted.
The support is very mixed with a bug report begin filed in firefox, most browsers do not support it.
It may seem to work in IE7 but this is because IE7 will remember the users last selection of landscape or portrait in print preview (only the browser is re-started).
This article does have some suggested work arounds using JavaScript or ActiveX that send keys to the users browser although it they are not ideal and rely on changing the browsers security settings.
Alternately you could rotate the content rather than the page orientation. This can be done by creating a style and applying it to the body that includes these two lines but this also has draw backs creating many alignment and layout issues.
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
The final alternative I have found is to create a landscape version in a PDF. You can point to so when the user selects print it prints the PDF. However I could not get this to auto print work in IE7.
<link media="print" rel="Alternate" href="print.pdf">
In conclusion in some browsers it is relativity easy using the @page size option however in many browsers there is no sure way and it would depend on your content and environment.
This maybe why Google Documents creates a PDF when print is selected and then allows the user to open and print that.
How to print HTML in landscape?
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>
Force landscape orientation in CSS
The problem is first you write size: landscape;
but than you write size: A4;
If not provided domPDF is rendering like default portrait, and it overwrites the landscape.
set the second parameter landscape and will work out.
size: A4 landscape;
Landscape printing with CSS
Seems like the only way to get a perfect landscape-print is to go through the print dialog and choose landscape from there. Its really hard to do this automatically with success in each browser.
Related Topics
Put Icon Inside Input Element in a Form
How to Use the "Required" Attribute With a "Radio" Input Field
Custom HTML Tag Attributes Are Not Rendered by Jsf
How to Specify Line Breaks in a Multi-Line Flexbox Layout
Inline-Block Boxes Not Fitting in Their Container
Getting the Source HTML of the Current Page from Chrome Extension
Are Single Quotes Allowed in Html
Masonry-Style Layout Only With Css
Preventing Double Borders in CSS Grid
Change Select Box Option Background Color
How to Create Download Link in Html
Ie7 Does Not Understand Display: Inline-Block
Does Form Data Still Transfer If the Input Tag Has No Name
Ie8 Support For CSS Media Query
Using Margin:Auto to Vertically-Align a Div
Bootstrap 4: Multilevel Dropdown Inside Navigation
Using Flex Order Property to Re-Arrange Items For Desktop and Mobile Views