Solved

Forcing a Page to Print Landscape

Posted on 2004-04-29
18
46,823 Views
Last Modified: 2011-08-18
I have a rather long form that is generated dynamically and one section of it needs to be printed landscape as it is a chart of info.  Id like to make the page print landscape and maybe scale it to 90% if possible.

Im quite sure this could be done with the @media / @ print attributes but have been unsuccsessful so far...
and i dont know how to do scaling if thats possible?

The layout is similar to the following :

<body>
<table>
<tr><td>

<table>
-- section 1 --  * should be portrait
</table>

</td></tr>
<tr><td>

<table>
-- section 2 -- *** would like this to be landscape
</table>

</td></tr>
<tr><td>

<table>
-- section 3 --  * should be portrait
</table>

</td></tr>
</table>
</body>

-------------------------------------------------------------------
Thanks,
~Stu
0
Comment
Question by:stu215
  • 8
  • 4
  • 2
  • +4
18 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 10953155
I don't believe it's possible to switch it like that although it might be possible... See here: adapted from http://home.tampabay.rr.com/bmerkey/examples/landscape-test.html. The method here for IE5.5\Win+ is not effective for tables. If you need only IE6 to see the tables, do this:

<!--[if gte IE 6]>
Table Code
<![endif]-->

Try this (it should work for IE6+): I am not sure if this can make tables switch on one page, but it may be possible.

<html>
<head>
<style>
div.page {
   writing-mode: tb-rl;
   height: 80%;
   margin: 10% 0%;
}
div.page table {
   margin-right: 80pt;
   filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
}
</style>
</head>
<body>
<div class="page">
<!--[if gte IE 6]>
<table>
-- section 2 -- *** would like this to be landscape
</table>
<![endif]-->
</div>

If this does not work, add this to the div.page style:
div.page {
   writing-mode: tb-rl;
   height: 80%;
   margin: 10% 0%;
   page-break-after:always;
   page-break-before:always;
}



This only works for IE6+ at least for tables...

--Zyloch
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10953451
You can't print landscape without activeX, and I doubt you are going to be able to do a mix of portrait and landscape even with active X.  

If it can be done you will need something like this:

http://www.meadroid.com/scriptx/index.asp

Cd&
0
 
LVL 10

Author Comment

by:stu215
ID: 10953906
This is what i currently have and it doesnt seem to work...

It prints the 1st page, and 3rd -- the 2nd page comes out completely blank...

-- Your code does print landscape for 1 page with no tables..  however it prints nothing with tables...
and im Using IE v6.0.28

-- Idealy it would be nice for this to work on both the newest versions of IE , & NS or some macintosh browser
such as Safari or Camino
------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<STYLE type="text/css">
      @media print{
         table#MainTable{visibility:hidden}
         .phantom{visibility:visible;page-break-after:always;}
         .page {
               writing-mode: tb-rl;
               height: 80%;
               margin: 10% 0%;
               visibility:visible;
               page-break-after:always;
            }

            .page table {
               margin-right: 80pt;
               filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
            }
        
      }

      .links { color: white; Text-Decoration: None; font-size:10pt;}
      .myLinks { color: #006666; Text-Decoration: None; font-size:10pt;}
      .myText {font-size:10pt;}
      .myHeader {font-size:24pt;}
</style>


<body>
<table id="MainTable">
<tr><td>

<div id="printData1" class="phantom">
<table id='Tab1'>
<tr><td>
asdadsadasdasddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddd
</td></tr>
</table>
</div>

</td></tr>
<tr><td>

<div class="page">
<!--[if gte IE 6]>
<table id='Tab2'>
<tr><td>
asdadsadasdasddddddddddddddddddddddddddddddddddddd<br>
<br>
PRINT LANDSCAPE<br>
<br>
ddddddddddddddddddddddddddddddddddddddddddd
</td></tr>
</table>
<![endif]-->
</div>

</td></tr>
<tr><td>

<div id="printData3" class="phantom">
<table id='Tab3'>
<tr><td>
asdadsadasdasddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddd
</td></tr>
</table>
</div>

</td></tr>
</table>
</body>
</html>
0
 
LVL 10

Author Comment

by:stu215
ID: 10953952
-- the method i posted will allow me to switch back and fourth but i cant get it to print the landscape stuff which is the part im having the problem with ...

I think if i could print a single page with tables that i shuold be able to do it in the above method by adding the attributes...

~Stu
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 150 total points
ID: 10977026
Hi Stu...

As others have said, you'll have limited cross browser success with this.
Just a couple of points as to why what you have isn't working.
1. You can't nest tables and switch orientation at the same time. It's one or the other :-)
2. You need to add a text element - even an insvisible one, before the landscape table to force it to generate properly.

If it was just IE, you "may" be able to get away with it... and I can't stress the word may enough.

<html>
<head>
<style type="text/css">

@media print
{
.MainTable
      {
      visibility:hidden;
      }
#printData1
      {
      visibility:visible;
      page-break-after:always;
      }
#printData3
      {
      visibility:visible;
      page-break-after:avoid;
      }
div.page
      {
      writing-mode: tb-rl;
      height: 80%;
      page-break-after:always;
      }
#Tab2
      {
      margin-right: 80pt;
      filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
      }
}

</style>
</head>
<body>

<table class="MainTable">
  <tr>
    <td>
    <div id="printData1">
    <table id='Tab1' border="1">
      <tr>
        <td>This is the first table, printed in portrait</td>
      </tr>
    </table>
    </div></td>
  </tr>
</table>


<div class="page">

<!-- This will generate the landscape table in print mode -->
<span>&nbsp;</span>

<table id='Tab2' border="1">
  <tr>
    <td>This is the second table, printed in landscape</td>
  </tr>
</table>

</div>

<table class="MainTable">
  <tr>
    <td>
    <div id="printData3">
    <table id='Tab3' border="1">
      <tr>
        <td>This is the third table, printed in portrait</td>
      </tr>
    </table>
    </div></td>
  </tr>
</table>

</body>
</html>

0
 
LVL 10

Author Comment

by:stu215
ID: 11092814
If it only works in IE thats fine with me, its for part of an administrative interface that only one user will be accessing and i can put IE as their primary browser.

-- If I can't nest and switch orientation is it possible to have this load into an invisible frame (iframe?) w the correct format and to print from there switching orientation?

~Stu
0
 
LVL 10

Author Comment

by:stu215
ID: 11092821
and mebbe make a button w print function that will call that other format(frame) when clicked on but not show the user?

~Stu
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11154292
~Stu,

I'm just going through some older questions and saw this one. I'm not quite sure about your last comments - can you advise what your current status on this is?

Thanks,
Sean
0
 
LVL 10

Author Comment

by:stu215
ID: 11154318
Still trying to get it to print alternating portrait / landscape :-(

~Stu
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11154543
And I'm still trying to win the lottery... I have a better chance than you do.  Time to close the question it is just taking up space, and this is not a news group where threads are left open forever because someone refuses to recognize the limits of the technology.

Cd&
0
 

Expert Comment

by:cxtaylor
ID: 11179060
COBOLdinosaur - I was always told that it was impossible to have page breaks in html but I found a way to do it. Limits of technology are there to be broken or worked around!!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11187429
cxtaylor,

Page breaks have been available for years.  Are you trying to make some point there, or did you just feeel a ned to add noise to the thread?

Cd&


0
 
LVL 10

Author Comment

by:stu215
ID: 11283007
-- Id appreciate if you could maybe help me come up with some alternate solution at this point ???

Scaling the one page that isnt printing right to %90 works for getting it on a portrait size paper.

I dont know much about IFRAMES, but would it be possible to make an invisible frame containing the printable version of this
and to make a button the user could click on to make it print?

~Stu :-(
0
 
LVL 10

Author Comment

by:stu215
ID: 11283023
At the moment Im having to print the one page seperately and replacing the one in the document.

~Stu
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11284319
If you have alternate styling for printing then just put it in like this:

<style>
@media print
   { #idofthepage
      { your stlyes
       }
   }
</style>

And when you print it will send that section using the print style, but the printer setting can still mess it up.

Cd&
0
 
LVL 1

Expert Comment

by:foxyshadis
ID: 11294246
Why not just have one page generated for online viewing, and two pages for printing? Or two for viewing. For instance, where the middle page would go, just put in a link that opens to a pop-up page which you can print separately (perhaps with javascript code in there for automated landscape). If you still want them in that order, recollate them by hand.

At this point, finding the best workaround is probably your only option, short of (say) generating pdf files dynamically.
0
 
LVL 10

Author Comment

by:stu215
ID: 11440869
Giving the points to  seanpowell  as he came the closest to answering the original question ...

It didnt work out right due to the margins, not being able to flip back to portrait after landscape, and left an obscene amount of space at the header of page ...

-- The document was canned and a new one created that conforms to portrait format.

-- Cobol, you should try the code sean pasted as it showed you CAN print landscape (via CSS) just not very well
(and not the way i needed it to).

>>You can't print landscape without activeX, and I doubt you are going to be able to do a mix of portrait and landscape even with active X.  


Thanks for making the attempt to help me to print landscape Sean
~Stu :-(
0
 

Expert Comment

by:jf_rocha
ID: 12542143
The main diference between portrait and landscape is that the page.with becames the page.height, and vice versa, ... so if you store this 2 values and then change them in a javascipt code block, you can change from portrait to landscape any time you want, by simply call your javascipt function on the onbeforeprint event ;)
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now