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

fchan · Mar 28, 2002

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

starway · Mar 28, 2002

read this:

http://www.devguru.com/Technologies/css/quickref/css_atrules_page.html

fchan · Mar 28, 2002

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="birthday-card">. I tried this and it is not working for me.

starway · Mar 28, 2002

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:

http://www.w3.org/TR/REC-CSS2/page.html

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

gerrygerry · Mar 29, 2002

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

http://quickfreewebsite.com!

fchan · Mar 29, 2002

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

starway · Mar 31, 2002

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: "component is a string that is used to provide a unique name for this set of style rules".
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

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!

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

fchan

MIS

starway

Programmer

fchan

MIS

starway

Programmer

gerrygerry

Technical User

fchan

MIS

starway

Programmer

Similar threads

Part and Inventory Search

Sponsor