Is @Page { Size:Landscape} Obsolete

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). I have not been able to find a report of specific browser/version support, but I get the sense that it is poorly supported (perhaps only by Opera?).

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.

Different page orientation for printing HTML

A quick and dirty hack would be to rotate the div that is meant to be in landscape by 90 degrees using CSS3 or filters. The following would work:

-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

There is currently no easy way to do this in any other way, as the size CSS directive is only implemented by one browser (Opera), but is nevertheless part of the current drafts ( Is @Page { size:landscape} obsolete? for the deprecation, http://www.w3.org/TR/css3-page/#page-size for the spec).

The next cheapest hack is what I mentioned above: lay your HTML out on a portrait...and rotate by 90 degrees using CSS3.

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>

Print in Landscape format

you cannot set this in javascript, you have to do this with html/css:

<style type="text/css" media="print">
  @page { size: landscape; }
</style>

EDIT: See this Question and the accepted answer for more information on browser support: Is @Page { size:landscape} obsolete?

iText landscape orientation and positioning?

You're using PageSize.A4_LANDSCAPE, a variable that was introduced by a contributor and that should have never been added to the main release. Please use PageSize.A4.rotate() instead.

It's not clear what you want to achieve with the lines:

document.left(100f);
document.top(150f);

Those are getters, not setters. It looks as if you're assuming that PDF is similar to HTML. That assumption is wrong.

If you want the image to be put 10 user units from the left and 15 user units from the top (in which case 100 and 150 are the wrong values), you could replace the 0 values in your Document constructor to define a left margin of 10 user units and the top margin 15 user units.

Another way would be to define an absolute position for the image with the method setAbsolutePosition(). In that case, you need to be aware that the coordinate system is oriented in such a way that the lower-left corner of the page has the coordinate x=0 , y=0 for documents created from scratch.

iTextSharp set document landscape (horizontal) A4

You can set the page size to a rotated A4. E.g. (assuming PDF, but should apply regardless):

iTextSharp.text.Document doc;

// ...initialize 'doc'...

// Set the page size
doc.SetPageSize(iTextSharp.text.PageSize.A4.Rotate());

I've done this with PDF without trouble, haven't tried it with other doc types.

Re-sizing @page to landscape 4x6

So after Googling Rotation it tells you that rotation isn't supported by any browser link. I then tried transform link which seems to work. If someone know of an easier way let me know!

@media print {
    @page {
        size: 6in 4in landscape;
        margin: 0in;
    }

    #printable {
        display: block;
        transform:translate(-2.09in,5.65in) rotate(90deg);
        transform-origin: top right;
    }
 }

Is @Page { Size:Landscape} Obsolete