printpreview_pps6_ref.html (2949B)
1 <!DOCTYPE html> 2 <!-- This is a reference case for a "6-pages-per-sheet" scenario. This file is 3 a mockup of a sheet with 6 pages, followed by a sheet with another 6 pages, 4 with the pages all having a 0.4x scale factor applied. --> 5 <style> 6 html { height: 100%; } 7 body { 8 height: 100%; 9 margin: 0; 10 box-sizing: border-box; 11 } 12 13 .sheet { 14 height: 100%; 15 16 /* We lay out the body as a column-oriented flex container (whose children, 17 in turn, are rows). */ 18 display: flex; 19 flex-direction: column; 20 } 21 22 .row { 23 /* Give each row an equal share of the available height: */ 24 flex: 1; 25 26 /* ...and render them as row-oriented (by default) flex containers: */ 27 display: flex; 28 } 29 30 .swatch { 31 box-sizing: border-box; 32 33 /* This represents the 120px border in the testcase, scaled down 0.4x: */ 34 border: 48px solid; 35 36 /* Share the width equally among the swatches. (The height will be 37 automatically set to the flex container's row height, via default 38 'align-self' behavior.) */ 39 flex: 1; 40 41 /* The testcase (rendered at 6-pages-per-sheet) will have 0.2in of extra 42 space in the horizontal axis, which will be distributed equally with 43 0.05in to the left and right of each page in the grid. We mock that up as 44 margin here: */ 45 margin: 0 0.05in; 46 } 47 48 .sheet:nth-child(1) > .row:nth-child(1) > .swatch:nth-child(1) { border-color: cyan; } 49 .sheet:nth-child(1) > .row:nth-child(1) > .swatch:nth-child(2) { border-color: yellow; } 50 .sheet:nth-child(1) > .row:nth-child(2) > .swatch:nth-child(1) { border-color: pink; } 51 .sheet:nth-child(1) > .row:nth-child(2) > .swatch:nth-child(2) { border-color: orange; } 52 .sheet:nth-child(1) > .row:nth-child(3) > .swatch:nth-child(1) { border-color: purple; } 53 .sheet:nth-child(1) > .row:nth-child(3) > .swatch:nth-child(2) { border-color: olive; } 54 55 .sheet:nth-child(2) { break-before: always; } 56 .sheet:nth-child(2) > .row:nth-child(1) > .swatch:nth-child(1) { border-color: blue; } 57 .sheet:nth-child(2) > .row:nth-child(1) > .swatch:nth-child(2) { border-color: tan; } 58 .sheet:nth-child(2) > .row:nth-child(2) > .swatch:nth-child(1) { border-color: fuchsia; } 59 .sheet:nth-child(2) > .row:nth-child(2) > .swatch:nth-child(2) { border-color: salmon; } 60 .sheet:nth-child(2) > .row:nth-child(3) > .swatch:nth-child(1) { border-color: lightgreen; } 61 .sheet:nth-child(2) > .row:nth-child(3) > .swatch:nth-child(2) { border-color: navy; } 62 </style> 63 <div class="sheet"> 64 <div class="row"> 65 <div class="swatch"></div> 66 <div class="swatch"></div> 67 </div> 68 <div class="row"> 69 <div class="swatch"></div> 70 <div class="swatch"></div> 71 </div> 72 <div class="row"> 73 <div class="swatch"></div> 74 <div class="swatch"></div> 75 </div> 76 </div> 77 <div class="sheet"> 78 <div class="row"> 79 <div class="swatch"></div> 80 <div class="swatch"></div> 81 </div> 82 <div class="row"> 83 <div class="swatch"></div> 84 <div class="swatch"></div> 85 </div> 86 <div class="row"> 87 <div class="swatch"></div> 88 <div class="swatch"></div> 89 </div> 90 </div>