Question

I inserted <style type="text/css"> @page {size: landscape;}</style> in my page to print it by landscape (this page is created only for printing).

It displays as what I want in Chrome's printing preview. However, after I print it to both paper or PDF, the result is really weird. The content is landscape, but page is portrait, so I've got a big white space in the top and bottom of the page and the right side part of content is out of page edge.

My guess is that for some reason the printer doesn't know it is supported to go landscape way. I've tried several printers, and all of them have this issue.

I appreciate if you could give me any advice or potential solution.

Was it helpful?

Solution

The @page { size: tag is CSS3 and as far as I know CSS3 is still not an accepted standard so many of the new tags are not yet supported by any browser. Specifically this tag is not yet supported by most browsers as of Sept. 12, 2012.

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules

The above URL claims IE8 and above support it but I have had no luck using it so far.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top