page-props-101.xht (1768B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 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>