printpreview_pps_uw9_ref.html (2774B)
1 <!DOCTYPE html> 2 <!-- This is a reference case for a "9-pages-per-sheet" scenario. This file is 3 a mockup of a sheet with 9 pages, with the pages all having a 0.2x scale 4 scale factor applied. (We end up with that scale factor by subtracting the 5 requested unwriteable margins from the sheet, and dividing up the 6 remaining space equally among the "virtual pages".) --> 7 <style> 8 html { 9 display: flex; 10 height: 100%; 11 margin: 0; 12 } 13 body { 14 /* As a flex item (a child of the html element), fill the available area. */ 15 flex: 1; 16 17 /* We lay out the body as a column-oriented flex container (whose children, 18 in turn, are rows). */ 19 display: flex; 20 flex-direction: column; 21 22 /* These values come directly from the unwriteableMargin values in the 23 testcase's configuration code in printpreview_helper.xhtml. */ 24 margin-top: 0.2in; 25 margin-right: 0.8in; 26 margin-bottom: 0.4in; 27 margin-left: 1.2in; 28 } 29 30 .row { 31 /* Give each row an equal share of the available height: */ 32 flex: 1; 33 34 /* ...and render them as row-oriented (by default) flex containers: */ 35 display: flex; 36 } 37 38 .swatch { 39 box-sizing: border-box; 40 41 /* These represent the 120px borders in the testcase, scaled down 0.2x: */ 42 border: 24px solid; 43 44 /* Share the width equally among the swatches. (The height will be 45 automatically set to the flex container's row height, via default 46 'align-self' behavior.) */ 47 flex: 1; 48 49 /* These values come directly from the unwriteableMargin values in the 50 testcase's configuration code in printpreview_helper.xhtml, with 51 each measurement scaled down by exactly 0.2x. The extra 0.5667in accounts 52 for the centering of each page in its grid cell. */ 53 margin-top: calc(0.04in + 0.5667in); 54 margin-right: 0.16in; 55 margin-bottom: calc(0.08in + 0.5667in); 56 margin-left: 0.24in; 57 } 58 .row:nth-child(1) > .swatch:nth-child(1) { border-color: cyan; } 59 .row:nth-child(1) > .swatch:nth-child(2) { border-color: yellow; } 60 .row:nth-child(1) > .swatch:nth-child(3) { border-color: pink; } 61 .row:nth-child(2) > .swatch:nth-child(1) { border-color: orange; } 62 .row:nth-child(2) > .swatch:nth-child(2) { border-color: purple; } 63 .row:nth-child(2) > .swatch:nth-child(3) { border-color: olive; } 64 .row:nth-child(3) > .swatch:nth-child(1) { border-color: blue; } 65 .row:nth-child(3) > .swatch:nth-child(2) { border-color: tan; } 66 .row:nth-child(3) > .swatch:nth-child(3) { border-color: fuchsia; } 67 </style> 68 <div class="row"> 69 <div class="swatch"></div> 70 <div class="swatch"></div> 71 <div class="swatch"></div> 72 </div> 73 <div class="row"> 74 <div class="swatch"></div> 75 <div class="swatch"></div> 76 <div class="swatch"></div> 77 </div> 78 <div class="row"> 79 <div class="swatch"></div> 80 <div class="swatch"></div> 81 <div class="swatch"></div> 82 </div>