10

I have created a CSS style sheet which can print an HTML page in landscape mode using the following @media rule:

   @media print{
      @page {size: landscape;}
    }

I do not want to print all HTML pages which load this style sheet in landscape mode. Ideally, I'd like to be able to specify a landscape class which would do this.

As the HTML is generated, I could always create a separate landscape.css file and append it to the header as needed, but I was hoping that there might be a cleaner way to do this with classes.

As a follow-up, I also tried the following with no luck:

@page rotated {
  size: landscape;
}
@media print{
  .rotate {
    page: rotated;
  }
}

I am probably just beating my head against a wall for a solution that only appears to work in webkit based browsers. The @page size: landscape setting does not appear to work in Firefox or (surprise, surprise) ie10.

Alan Krause
  • 181
  • 2
  • 8
  • Check out http://stackoverflow.com/questions/138422/landscape-printing-from-html for your answer. May be a duplicate question... – CoderOfHonor May 20 '13 at 17:28
  • 1
    Consulted that question already, and I do not see that it answers the question of how to apply @page rules to a certain CSS class when the media is "print". – Alan Krause May 20 '13 at 17:35
  • Oh, ok. Didn't read the question properly. – CoderOfHonor May 20 '13 at 17:45
  • at.page rotated { size: landscape; } at.media print{ .rotate { page: rotated; } } What does this do? (have removed @ and replaced with at.) – Asim K T May 24 '16 at 11:18
  • If what you are looking is to print the pages that are in landscape view you can use @media print and (orientation:landscape) { .print-landscape{ //styles here} } – T04435 May 25 '16 at 08:11

5 Answers5

3

Unfortunately, we are currently unable to utilize page type selectors for media queries beyond the supplied :left, :right, :first, and :blank pseudo-classes.

https://www.w3.org/TR/css3-page/#page-selector-and-context

The W3C is however considering the addition of other page pseudo-classes for future levels of CSS [@page :nth(4) { ... } or @page (.class) { ... }]. I'm not sure why named pages were not able to work, but as of Jan 26, 2016, level 4 media queries (including the @page at-rule) may include ranges, negation, and custom media queries using scripting. Further, the size property is currently only supported in Chrome.

https://www.w3.org/TR/mediaqueries-4/

This is the closest I was able to get using just HTML and CSS, which applies landscape orientation to even-numbered pages. I know this isn't an exact solution, and it only works in Chrome.

<html>
    <head>
        <style>
            .landscape {
                page-break-before: always;
            }
            @page :left {
                size: landscape;
            }
        </style>
    </head>
    <body>
        <p>This is a normal paragraph.</p>
        <p class="landscape">This is in landscape form, following a page break.</p>
    </body>
</html>
srbrills
  • 1,451
  • 2
  • 13
  • 33
  • 1
    It looks as if the `@page (.class) { ... }` construct is what I was hoping to find supported. Thanks very much for your detailed answer! – Alan Krause May 27 '16 at 22:27
  • Glad I could be of some help! And when I say supported in Chrome, I mean to say 'WebKit' based browsers, including Opera. – srbrills May 29 '16 at 05:55
1

I don't really understood what you did with:

@page rotated {
  size: landscape;
}
@media print{
  .rotate {
    page: rotated;
  }
}

Anyway, you want to print some pages in landscape mode while other pages should be in default (portrait) mode. So I propose this:

@media print {
    body.special-page {
        transform:rotate(180deg);
        -webkit-transform: rotate(91deg);
        -moz-transform: rotate(10deg);
        -ms-transform:rotate(20deg);
    }
}

And we'll add .special-page for body.(Through JS maybe) like:

<body class="special-page">
  <p>
  Lorem ipsum dolor sit amet, his mucius sensibus omittantur 
 et, ex cum nemore iuvaret. Voluptua constituam ad nam. Est ei etiam 
 labitur, instructior definitiones ad sit. Ut probo assum 
 scribentur pro. Dicant epicuri ea pri.
  </p>
</body>

Checkout this jsbin

What we doing is writing specific styles for print mode of a page through @media print, and we are rotating whole page 180deg so that it will work as in landscape mode if the body contains .special-page class.

I couldn't find another way using @page and classes.

Community
  • 1
  • 1
Asim K T
  • 16,864
  • 10
  • 77
  • 99
0

I would think that the best way to accomplish this would be to do the following:

@media print{
    .class-name{
        @page{
            size:landscape;
        }
    }
}

I haven't tested this, so correct me if I'm wrong. Good luck!

CoderOfHonor
  • 741
  • 7
  • 17
  • Tried that, but no go. I also tried @page.class-name (which seemed somewhat intuitive to me), which also doesn't work. Thanks for the attempt, though. – Alan Krause May 20 '13 at 17:54
  • This looks invalid to me, in CSS2 at least. – Knu May 20 '13 at 18:29
  • I've edited the question above to include another valid CSS attempt, with similar results. – Alan Krause May 20 '13 at 18:41
  • I had hoped that would work for me too. It didn't. have one php module that prints mailing labels (portrait with custom margins) or a members' list (landscape). But I have the option of using two different php modules depending on what the user clicks on in the referrer. – BryanT Mar 23 '18 at 15:38
0

The trick is in the media attribute set that to print like this:

<style media="print"></style>

Then use this CSS inside of that style element:

@page {
  size: landscape;
}

Here is a working example that allows you to print in both directions:
(Tested and working on Chrome, Edge & Firefox.)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Sorry for using so much Lorem ipsum O:)</title>
  <style media="print">
    /* this prints the page in landscape by default. */
    @page {
      size: landscape;
    }
    /* If you would like to rotate the body element: */
    /*body {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
    }*/
    /* If you would like to rotate the body element in the other direction: */
    /*body {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }*/
  </style>
</head>
<body>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
</body>
</html>

Good luck and all the best.

  • 1
    Hehe, [this doesn't work really well](http://i.stack.imgur.com/xeeTu.png). Result is rotated text still in portrait and with a massive amount of whitespace or when changed to landscape manually [it is sideways](http://i.stack.imgur.com/FnQpq.png)... – misterManSam May 27 '16 at 06:13
  • @misterManSam I thought the OP wanted the *page contents* to be rotated and **not** the *page to be in landscape*, haha thanks for letting me know. I have updated my answer :) –  May 27 '16 at 06:21
0

I created a blank MS Document with Landscape setting and then opened it in notepad. Copied and pasted the following to my html page

<style type="text/css" media="print">
@page Section1
{size:11 8.5in;
margin:.5in 13.6pt 0in 13.6pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;

  • List item

    mso-paper-source:4;} div.Section1 {page:Section1;}

    put text / images / other stuff

The print preview shows the pages in a landscape size. This seems to be working fine on IE and Chrome, You can see this also

Gajendra Singh
  • 164
  • 13