page-props-101

Right and Left Pages (page area equal)

WeasyPrint

This browser

Flags
paged
Assertion
The right and left pages of a document may use differing margin styles that yield equivalent page area heights.

Source

 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>