content-012-print.html (1247B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-page-3/#page-based-counters"> 4 <meta name="assert" content="Resetting or incrementing counters in margins obscure counters in the page context, and in the document"> 5 <link rel="match" href="content-012-print-ref.html"> 6 <style> 7 html { 8 counter-reset: foo 10; 9 } 10 @page { 11 margin: 4em; 12 counter-reset: foo 5; 13 counter-increment: foo; 14 15 @top-left { 16 width: 50%; 17 text-align: left; 18 vertical-align: top; 19 content: counters(foo, "."); 20 } 21 22 @top-right { 23 width: 50%; 24 text-align: left; 25 vertical-align: top; 26 counter-increment: foo; 27 content: counters(foo, "."); 28 } 29 30 @bottom-center { 31 text-align: left; 32 vertical-align: top; 33 counter-reset: foo 2; 34 counter-increment: foo foo foo; 35 content: counters(foo, "."); 36 } 37 } 38 @page :right { 39 counter-reset: none; 40 @bottom-center { 41 counter-reset: inherit; 42 } 43 } 44 body { 45 margin: 0; 46 } 47 </style> 48 Page 49 <div style="page:something;"> 50 Another page 51 </div> 52 <div> 53 Yet another page 54 </div> 55 <div style="break-before:page;"> 56 Last page 57 </div>