Hi Guys,

I m writing one HTML page where i wanted the page orientation to be set to LANDSCAPE through Javascript or CSS. So when I click on Print button or anyways on the HTML page, the print window will pop-up so now in that orientation property should be set to LANDSCAPE.

So does anyone know how to accomplish this?

Thanks in advance.

I'm confused how one can set the page orientation of a website. One can simply stretch a browser window to any shape and size they want and if relative values are used for tables and such, the text will stretch along with the window.

I'm confused how one can set the page orientation of a website. One can simply stretch a browser window to any shape and size they want and if relative values are used for tables and such, the text will stretch along with the window.

Dani,

You can apply CSS style rules to create a custom-sized print box. What you cannot do is force the Print Dialog box to default to landscape. CSS and/or JavaScript cannot reach into the system resources.

Oh I see what you're saying. Use JavaScript to load the print dialog box. Gotcha there ;)

No, not quite. The CSS specification allows you to set styles that come into play when the user Prints. So the site may display one way, but when you print, certain elements will be excluded, etc.

The CSS for this is simple (just use class="landscape"):

<style type="text/css" media="print">

@page port {size: portrait;}
@page land {size: landscape;}

.portrait {page: port;}

.landscape {page: land;}

</style>

So there.

scandal_uk,

I am trying to test out your CSS code for Landscape Orientation but I cannot seem to be able to make it work. I have created a test page with the following code. What am I doing wrong?

<html>
<head>

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css" media="print">
@page port {size: portrait;}
@page land {size: landscape;}
.portrait {page: port;}
.landscape {page: land;}
</style>

</head>

<body class="landscape">
<table width="95%" border="0" class="landscape">
<tr class="landscape">
<td class="landscape">1</td>
<td class="landscape">2</td>
<td class="landscape">3</td>
<td class="landscape">4</td>
<td class="landscape">5</td>
<td class="landscape">6</td>
<td class="landscape">7</td>
<td class="landscape">8</td>
<td class="landscape">9</td>
<td class="landscape">10</td>
<td class="landscape">11</td>
<td class="landscape">12</td>
<td class="landscape">13</td>
<td class="landscape">14</td>
<td class="landscape">15</td>
<td class="landscape">16</td>
<td class="landscape">17</td>
<td class="landscape">18</td>
</tr>
</table>
</body>
</html>

I have been attempting the same CSS implementation, but I read in a book today that Opera 6/7 is the only browser which supports the property which sets the orientation. :sad:

Hi vivekgalatage,
Did you find a way to do this?. thanks....

I tried the code mentioned above in the css but it doesnot work. Is there any other way to do this?

There is no way to do this. Print orientation is something the USER specifies, via their print dialog box. You cannot and should not want to control this. The answer is to specify a print style sheet that formats the document in such a way that landscape orientation is not required.

This falls into the same category of developers wanting to "disable" the user's Back button. That's a no-no. That's part of the USER interface. The proper way to handle the situation is to assume they MIGHT press BACK, and write code to handle that eventuality.

You cannot FIX a problem by BREAKING user functionality.

There is no way to do this. Print orientation is something the USER specifies, via their print dialog box. You cannot and should not want to control this. The answer is to specify a print style sheet that formats the document in such a way that landscape orientation is not required.

This falls into the same category of developers wanting to "disable" the user's Back button. That's a no-no. That's part of the USER interface. The proper way to handle the situation is to assume they MIGHT press BACK, and write code to handle that eventuality.

You cannot FIX a problem by BREAKING user functionality.

I think you are assuming this is for a wrongly designed page. In my case I need landscape printing of a print version of a page. The client requires this.

So I have come to the conclusion that this works in firefox:

@page land {size: landscape;}

While this is suppose to work in IE:

.land{filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)}

HTML:

<BODY class="land">

My problem is IE. It looks great in the preview, but it just doesn't send it to the printer.

You're posting in a thread that's over a year old... and I don't see a question in your post. Would you mind starting a new thread, and ask your question, if you have one, there?

My question is:

What is wrong since it doesn't print, but shows the page the way I want in the browserpreview (IE)?

hi, my name is Mikalush
i have the same problem,
and i'm looking for a resault for few days
if anyone know what to do, i'll be very happy!

:idea:

OK I try it and it's really works!!

but - the quality of the print is not very good, the write is not so clear,
and also the table is not printing on all the width of the page.

any help?

:rolleyes:

thanks!!

This function belongs to the user, not the webmaster. If the user wants a landscape print, he can open the file menu and select it.

Remember that some users have printers which don't do landscape orientation.

this reply I got at the begining, and I don't agree with this answer,
for example - in my web - the page I want to print landscape - is a page that only few people use it and they print the report for daily use, and its realy uncomfatable for them - each time they print to get into the print advance option and set the landscape orientaion.

and as I wrote before - the link that I got lead me to CSS way of ordering landscape print - and its works but not so in good quality..

hope you understand the meaning..

hello :) ...
Please help , i have the same problem

If anybody can give a full code in javascipt how to set landscape orientation by the code while user press on button print ...If i have any access to change the settings of print that sets by deafult as portrait in the code ?

thanks :) ...

This setting belongs to the owner of the computer, NOT TO YOU. You have no right or ability to access it.

It is actually found in his printer driver.

The settings are found in completely different windows with different printers. All the browser's "Page Setup" button does is open the printer driver's own setup page.

The only thing you can do is tell the user to set his browser to print landscape, using the Page Setup button.

thank uuuuuuuu :)
But i still think that has to be any way to do it !

Nope. Such changes are purposely banned by the W3C for security reasons. The following are not allowed:

- The website cannot read or change properties or objects which did not originate on its own server.

- Websites cannot set properties on file uploads.

- User confirmation is required for a website to send an email or post a message.

- The website is not allowed to close windows it did not create without user confirmation.

- The website is not allowed to snoop in the cache or the rest of the user's computer.

- The website cannot create windows which are not visible, or windows without a title bar.

- The website cannot alter computer settings without user permission.

- The website cannot change security settings.

its not very hard, as i explained here, you can do it with an small js trick

<div style="display: none;" id="styleholder"> <label for="portrait">PORTRAIT</label> <input type="radio" name="printlayout" id="portrait"  onclick="jQuery('#styleholder').html('<style>@page{size: portrait;}</style>');" /> <label for="landscape">LANDSCAPE</label> <input type="radio" name="printlayout" id="landscape" onclick="jQuery('#styleholder').html('<style>@page{size: landscape;}</style>');" /> 
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.