Landscape printing from HTML

Question

I have a HTML report  which needs to be printed landscape because of the many columns  It there a way to do this  without the user having to change the document settings   And what are the options amongst browsers

User · Answer

You can also use the non-standard IE-only css attribute writing-mode  div page          writing-mode  tb-rl

User · Answer

I created a blank MS Document with Landscape setting  and then opened it in notepad  Copied and pasted the following to my html page   lt style type  text css  media  print  gt      page Section1      size 11 8 5in      margin  5in 13 6pt 0in 13 6pt      mso-header-margin  5in      mso-footer-margin  5in      mso-paper-source 4   div Section1      page Section1    lt  style gt      lt div class  Section1  gt  put  text   images   other stuff   lt  div gt    The print preview  shows the pages in a landscape size  This seems to be working fine on IE and Chrome  not tested on FF

User · Answer

This also worked for me    media print and  orientation landscape

User · Answer

The size property is what you re after as mentioned  To set both the the orientation and size of your page when printing  you could use the following      ISO Paper Size     page     size  A4 landscape        Size in mm         page     size  100mm 200mm landscape        Size in inches         page     size  4in 6in landscape      Here s a link to the  page documentation

User · Answer

-webkit-transform  rotate -90deg   -moz-transform rotate -90deg        filter progid DXImageTransform Microsoft BasicImage rotation 3     not working in Firefox 16 0 2 but it is working in Chrome

User · Answer

You might be able to use the CSS 2  page rule which allows you to set the  size  property to landscape

User · Answer

Try to add this your CSS    page     size  landscape

User · Answer

I tried to solve this problem once  but all my research led me towards ActiveX controls plug-ins  There is no trick that the browsers  3 years ago anyway  permitted to change any print settings  number of copies  paper size    I put my efforts into warning the user carefully that they needed to select  landscape  when the browsers print dialog appeared  I also created a  print preview  page  which worked much better than IE6 s did  Our application had very wide tables of data in some reports  and the print preview made it clear to the users when the table would spill off the right-edge of the paper  since IE6 couldnt cope with printing on 2 sheets either    And yes  people are still using IE6 even now

User · Answer

lt style type  text css  media  print  gt   landscape        width  100        height  100        margin  0  0  0  0   filter  progid DXImageTransform Microsoft BasicImage Rotation 1        lt  style gt    If you want this style to be applied to a table then create one div tag with this style class and add the table tag within this div tag and close the div tag at the end   This table will only print in landscape and all other pages will print in portrait mode only  But the problem is if the table size is more than the page width then we may loose some of the rows and sometimes headers also are missed  Be careful   Have a good day   Thank you  Naveen Mettapally

User · Answer

My solution    lt style type  text css  media  print  gt       page            size  landscape            body            writing-mode  tb-rl         lt  style gt    This works in IE  Firefox and Chrome

User · Answer

I tried Denis s answer and hit some problems  portrait pages didn t print properly after going after landscape pages   so here is my solution    x000D   x000D  body   x000D    margin  0  x000D    background   CCCCCC  x000D    x000D   x000D  div page   x000D    margin  10px auto  x000D    border  solid 1px black  x000D    display  block  x000D    page-break-after  always  x000D    width  209mm  x000D    height  296mm  x000D    overflow  hidden  x000D    background  white  x000D    x000D   x000D  div landscape-parent   x000D    width  296mm  x000D    height  209mm  x000D    x000D   x000D  div landscape   x000D    width  296mm  x000D    height  209mm  x000D    x000D   x000D  div content   x000D    padding  10mm  x000D    x000D   x000D  body  x000D  div  x000D  td   x000D    font-size  13px  x000D    font-family  Verdana  x000D    x000D   x000D   media print   x000D    body   x000D      background  none  x000D      x000D    div page   x000D      width  209mm  x000D      height  296mm  x000D      x000D    div landscape   x000D      transform  rotate 270deg  translate -296mm  0   x000D      transform-origin  0 0  x000D      x000D    div portrait  x000D    div landscape  x000D    div page   x000D      margin  0  x000D      padding  0  x000D      border  none  x000D      background  none  x000D      x000D    x000D   lt div class  page  gt  x000D     lt div class  content  gt  x000D      First page in Portrait mode x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  page landscape-parent  gt  x000D     lt div class  landscape  gt  x000D       lt div class  content  gt  x000D        Second page in Landscape mode  correctly shows horizontally in browser and prints rotated in printer  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  page  gt  x000D     lt div class  content  gt  x000D      Third page in Portrait mode x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Quoted from CSS-Discuss Wiki  The  page rule has been cut down in scope from CSS2 to CSS2 1  The full CSS2  page rule was reportedly implemented only in Opera  and buggily even then   My own testing shows that IE and Firefox don t support  page at all  According to the now-obsolescent CSS2 spec section 13 2 2 it is possible to override the user s setting of orientation and  for example  force printing in Landscape but the relevant  quot size quot  property has been dropped from CSS2 1  consistent with the fact that no current browser supports it  It has been reinstated in the CSS3 Paged Media module but note that this is only a Working Draft  as at July 2009   Conclusion  forget about  page for the present  If you feel your document needs to be printed in Landscape orientation  ask yourself if you can instead make your design more fluid  If you really can t  perhaps because the document contains data tables with many columns  for example   you will need to advise the user to set the orientation to Landscape and perhaps outline how to do it in the most common browsers  Of course  some browsers have a print fit-to-width  shrink-to-fit  feature  e g  Opera  Firefox  IE7  but it s inadvisable to rely on users having this facility or having it switched on

User · Answer

It s not enough just to rotate the page content  Here is a right CSS which work in the most browsers  Chrome  Firefox  IE9     First set body margin to 0  because otherwise page margins will be larger than those you set in the print dialog  Also set background color to visualize pages   body     margin  0    background   CCCCCC      margin  border and background are required to visualize pages   padding must be set to the required print margin  In the print dialog you must set the same margins  10mm in this example    div portrait  div landscape     margin  10px auto    padding  10mm    border  solid 1px black    overflow  hidden    page-break-after  always    background  white      The size of A4 page is 210mm x 297mm  You need to subtract print margins from the size  And set the size of page s content   div portrait     width  190mm    height  276mm    div landscape     width  276mm    height  190mm      I use 276mm instead of 277mm  because different browsers scale pages a little bit differently  So some of them will print 277mm-height content on two pages  The second page will be empty  It s more safe to use 276mm   We don t need any margin  border  padding  background on the printed page  so remove them    media print     body       background  none      -ms-zoom  1 665        div portrait  div landscape       margin  0      padding  0      border  none      background  none        div landscape       transform  rotate 270deg  translate -276mm  0       transform-origin  0 0          Note that the origin of transformation is 0 0  Also the content of landscape pages must be moved 276mm down   Also if you have a mix of portrait and lanscape pages IE will zoom out the pages  We fix it by setting -ms-zoom to 1 665  If you ll set it to 1 6666 or something like this the right border of the page content may be cropped sometimes   If you need IE8- or other old browsers support you can use -webkit-transform  -moz-transform  filter progid DXImageTransform Microsoft BasicImage rotation 3   But for modern enough browsers it s not required   Here is a test page    lt  DOCTYPE HTML gt   lt html gt     lt head gt       lt meta http-equiv  Content-Type  content  text html  charset UTF-8    gt       lt style gt           Copy all styles here         lt  style gt     lt  head gt     lt body gt       lt div class  portrait  gt A portrait page lt  div gt       lt div class  landscape  gt A landscape page lt  div gt     lt  body gt   lt  html gt

User · Answer

If you want to see landscape on the screen before you print  as well as printing  then in your css  you can set the width to 900px  and the height to 612px   OP didn t mention A4 size  I assume it s Letter size in my numbers above

User · Answer

You can try the following    page       size  auto

User · Answer

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    lt style type  text css  media  print  gt       page            -webkit-transform  rotate -90deg         -moz-transform rotate -90deg        filter progid DXImageTransform Microsoft BasicImage rotation 3          lt  style gt    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    lt link media  print  rel  Alternate  href  print pdf  gt    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

[html] Landscape printing from HTML

Examples related to html

Examples related to css

Examples related to printing