10

Currently I am using FireFox latest version and IE8

To change the orientation of printing , I used

@page {
  size: portrait;
}

in my css file. @page reference

Although it claims that the @page is supported in both browsers , after my testing it is not working at all besides Chrome. I would like to know how to print the page in different orientation in FireFox / IE8.

2

6 Answers 6

14
+25

No application should depend on this feature to work cross browser right now because the CSS3 standard on page orientation for printing is still under implementation in most browsers.

For Google Chrome it works just fine: http://dev.activisual.net/test.html

Ultimately the decision of changing the orientation relays on the user during the printing process (even if it works), so you could simply let the users know that they should print the page in landscape or portrait, but in general there won´t ever by a way to prevent the users from changing the orientation while printing on desktop browsers.

Here is a bug report for FF reported very recently: https://bugzilla.mozilla.org/show_bug.cgi?id=851441

You can read the accepted answer on this question for reference: Landscape printing from HTML

1
  • 4
    Ultimately, while the decision lies on the user, there is nothing wrong with the website suggesting a reasonable default that the user can override, if they really want to. You are correct in that you cannot rely on CSS for this at all, at least at the moment. One year later, Chrome is still the only browser that seems to support it. On Firefox, the first bug for supporting @page and orientation was filed in 2001(!) - bugzilla.mozilla.org/show_bug.cgi?id=115199, and is still not implemented. I guess you better not hold your breath?
    – Aaa
    Commented Jun 12, 2014 at 10:12
3

As the MDN reference says:

You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

As far as supplying you with markup that achieves what you want, that would be outside the bounds of what's allowed on SO. In addition, it could be a bit of work since you are wanting a two generation back version of IE to attempt to perform as well as a current generation Firefox.

1
  • 1
    Thanks for your help, why Chrome can specific the printing orientation by the CSS? Do they implement some feature ? Commented Jun 8, 2013 at 3:13
1

Page printing layout is portrait by default, to change to landscape and see the difference try the below.

The the below css code is supported since version 19.0 , try it, it should solve your problem: For IE8 you should use HTML5 directive in your html

<!doctype html>

Css code :

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

Firefox: https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart Firefox support

IE http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx enter image description here

0

It's weird that this

{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

doesn't work for you for the latest version of Firefox as i tested it myself and works fine.

If you can't find anything have a look here even though this isn't exactly the right portrait mode (for printing) but you might get some ideas.

Lastly if you get desperate and u really need to find a way to do this, you can always take a screenshot of the web page with for example html2canvas rotate the image and then print the image instead of the webpage... Not an ideal solution but this way you bypass the browser.

0

I ran into this issue a little wile ago while making a simple form.

Chrome does seem to be the best browser for limiting a users control over the printing process. However it is still limited, and Firefox/other browsers don't support @page.

My solution was to add a @media print to the style sheet to "encourage" the user to print the page in portrait. The @page is just for chrome. display: none; on the header, nav, and footer gets rid of the unwanted browser additions (this only works in chrome and firefox, in ie you still have to select no headers) I have a border:0; on input fields, because it was for a form... Finally I put a width and height on the container div, similar to the size of a standard 8.5 x 11 piece of paper. So it would fit the page nicely.

@media print{
    @page {size: auto; margin: auto;}
    header nav, footer {display: none;}
    input {border: 0px;}
    #container  {width:9.1in; height:10in;}

} 

Ultimately webpage printing is still very browser/user dependent, and there really isn't much that can be done about it. Making @media print helps, but really the only way to get the page to print exactly as you want would be to generate a pdf version of the page that the user could export.

-7

Just go to file, click on page setup and change the orientation. This works for me

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.