1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Right and Left Pages (page area equal)</title>
5 <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors">
7 <link rel="help" href="http://www.w3.org/TR/css3-page/#left-right-first">
8 <meta name="flags" content="paged">
9 <meta name="assert" content="The right and left pages of a document may use differing margin styles that yield equivalent page area heights.">
10 <style type="text/css">
11
12 @page :right {
13 margin-left: 33%;
14 margin-right: 7%;
15 }
16 @page :left {
17 margin-right: 33%;
18 margin-left: 7%;
19 }
20 span {
21 color: gray;
22 }
23 div {
24 margin-bottom: 2em;
25 width: 98%
26 }
27 .bordered {
28 border: medium solid blue;
29 background: #ececff;
30 padding: 1%;
31 page-break-after: always;
32 }
33
34 </style>
35 </head>
36 <body>
37 <div>
38 This test produces three pages on paged media.
39 </div>
40 <div class="bordered">
41 This page has a wide left margin and a narrow right margin. This content is completely enclosed by a blue border and has a pale blue background. A page break follows.
42 </div>
43 <div class="bordered">
44 This page has a wide right margin and a narrow left margin. This content is completely enclosed by a blue border and has a pale blue background. A page break follows.
45 </div>
46 <div class="bordered">
47 This page again has a wide left margin and narrow right margin. This content has a blue border on all sides and a pale blue background.
48 </div>
49 </body>
50 </html>