How to set landscape orientation?

Question

vivekgalatage 0 Newbie Poster

20 Years Ago

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.

javascript

15 Contributors
26 Replies
22K Views
11 Years Discussion Span
Latest Post 8 Years Ago Latest Post by Sara_14

tgreer 189 Made Her Cry

20 Years Ago

The CSS Print Profile specification may help:

http://www.w3.org/TR/2004/CR-css-print-20040225/#section-properties

Dani 4,329 The Queen of DaniWeb

20 Years Ago

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.

tgreer 189 Made Her Cry

20 Years Ago

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.

Dani 4,329 The Queen of DaniWeb

20 Years Ago

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

tgreer 189 Made Her Cry

20 Years Ago

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.

Reply to this topic

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.

scandal_uk 0 Newbie Poster · Answer 1 · 2005-01-07T15:18:40+00:00

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

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

.portrait {page: port;}

.landscape {page: land;}

</style>

So there.

jasbrown 0 Newbie Poster · Answer 2 · 2005-02-14T21:58:27+00:00

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?

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

</head>

greenbirdweb 0 Newbie Poster · Answer 3 · 2005-03-22T04:51:55+00:00

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:

gangireddy 0 Newbie Poster · Answer 4 · 2005-04-29T03:35:11+00:00

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

aarti_ap 0 Newbie Poster · Answer 5 · 2005-06-29T00:15:18+00:00

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

tgreer 189 Made Her Cry Team Colleague · Answer 6 · 2005-06-29T01:07:54+00:00

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.

Danne 0 Newbie Poster · Answer 7 · 2006-03-22T04:14:15+00:00

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.

tgreer 189 Made Her Cry Team Colleague · Answer 8 · 2006-03-22T09:47:44+00:00

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?

Danne 0 Newbie Poster · Answer 9 · 2006-03-22T19:52:06+00:00

My question is:

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

rutigold 0 Newbie Poster · Answer 10 · 2006-12-18T14:01:31+00:00

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:

mohammad20001 0 Newbie Poster · Answer 11 · 2007-02-12T21:25:25+00:00

Use the css on the http://home.tampabay.rr.com/bmerkey/examples/landscape-test.html

:)

rutigold 0 Newbie Poster · Answer 12 · 2007-02-13T14:34:45+00:00

Use the css on the http://home.tampabay.rr.com/bmerkey/examples/landscape-test.html
:)

thanks a lot!

you are the first to give me answer that it's possible,

i'll try it later..

have a good day:lol:

rutigold 0 Newbie Poster · Answer 13 · 2007-02-14T19:08:29+00:00

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

MidiMagic 579 Nearly a Senior Poster · Answer 14 · 2007-02-16T12:11:32+00:00

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.

rutigold 0 Newbie Poster · Answer 15 · 2007-02-18T00:01:26+00:00

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

anyutka 0 Newbie Poster · Answer 16 · 2007-04-20T04:21:32+00:00

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 :) ...

MidiMagic 579 Nearly a Senior Poster · Answer 17 · 2007-04-23T10:48:40+00:00

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.

anyutka 0 Newbie Poster · Answer 18 · 2007-04-23T12:49:26+00:00

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

MidiMagic 579 Nearly a Senior Poster · Answer 19 · 2007-04-24T14:23:01+00:00

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.

Hossein_1 0 Newbie Poster · Answer 20 · 2015-03-23T11:21:46+00:00

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>');" />

Sara_14 0 Newbie Poster · Answer 21 · 2016-06-22T05:31:50+00:00

hi,
Am facing the same problem,
Link->Use the css on the http://home.tampabay.rr.com/bmerkey/examples/landscape-test.html is not getting
Please help