asked on

Forcing a Page to Print Landscape

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

Zyloch

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:



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">

</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

COBOLdinosaur

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&

stu215

ASKER

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">

</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>

stu215

ASKER

-- 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

ASKER CERTIFIED SOLUTION

seanpowell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

stu215

ASKER

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

stu215

ASKER

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

~Stu

seanpowell

~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

stu215

ASKER

Still trying to get it to print alternating portrait / landscape :-(

~Stu

COBOLdinosaur

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&

cxtaylor

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!!

COBOLdinosaur

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&

stu215

ASKER

-- 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 :-(

stu215

ASKER

At the moment Im having to print the one page seperately and replacing the one in the document.

~Stu

COBOLdinosaur

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&

foxyshadis

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.

stu215

ASKER

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 :-(

jf_rocha

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 ;)