Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do you apply the @page at rule in your html 1

Status
Not open for further replies.

fchan

MIS
Jul 2, 2001
47
US
Hi,

I'm trying the change the orientation of my html document when its printed to landscape using the @page at rule. I know that you define the @page using the following,
@page [page selector]:[optional pseudoclass] {size:auto landscape}

What I'm not sure of, is how you apply this at-rule in the html of the page. Help!!
 
Thanks Starway, I have seen that web site. But I'm still unsure of how to use the @page at-rule. Taking their example:

@page birthday-card:right { margin-bottom: 3in; margin-left: 2in; margin-right: 2in; margin-top; 1in; }

How would I use this in my HTML. Do I create a <div> tag to contain my entire page and then set it's class attribute to birthday-card, e.g. <div class=&quot;birthday-card&quot;>. I tried this and it is not working for me.
 
Try this:

@page body:right { margin-bottom: 3in; margin-left: 2in; margin-right: 2in; margin-top; 1in; }

or just

@page { margin-bottom: 3in; margin-left: 2in; margin-right: 2in; margin-top; 1in; }

so this rule will be applied to the entire page.

Also, read this:
that description is more detailed.

There are not so many options there, try them all and you'll find solution. The experience you'll get is more important than trying to save time by asking here an exact solution.

good luck
 
starway! I have been looking for a way to do this for a LONG time! where were you a month ago! I had to go through the trouble of having to create a dynamic pdf file generation program!

I guess you get a star anways. Thanks! -gerrygerry
Go To
 
Starway,

Thanks for the info. But I guess I'm still confused with how to use the @page style. If my html page is like so:

<html>
<head>
<style>@page {size: landscape}</style>
</head>
<body>
some text
</body>
</html>

Will my page print in landscape orientation? Because when I try this, it does not work. What am I missing in my html code?

Thanks
 
Hi, I was offline this weekend and now I'm back.

fchan, I read the explanation for @page again and realized that we both did a mistake. Here's what is written about page-selector: &quot;component is a string that is used to provide a unique name for this set of style rules&quot;.
So we have to add it and create smth like this:

[tt]@page mypage:right { size: landscape, ... }[/tt]
I'm pretty sure that in won't work without it, as it is required component.

[tt]size: auto|portrait|landscape [/tt] may not be supported (yet) by any browser. This property is mentioned in W3C recommendation but we don't know about it's actual implementation. I guess that you test in IE, so check what version do you have and search MS documentation for @page support.
As I stated once, I don't recommend to rely on browser support info on DevGuru site, and the only safe way is to test it all yourself and see if it was correct.

Unfortunately I can't test this now in various browsers and tell the result, so do it yourself.

good luck
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top