printpreview_pps_uw4_ref.html (2265B)
1 <!DOCTYPE html> 2 <!-- This is a reference case for a "4-pages-per-sheet" scenario. This file is 3 a mockup of a sheet with 4 pages, with the pages all having a 0.4x 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.6in; 25 margin-right: 0.1in; 26 margin-bottom: 0.4in; 27 margin-left: 0.3in; 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.4x: */ 42 border: 48px 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.4x. The extra 0.1in accounts 52 for the centering of each page in its grid cell. */ 53 margin-top: 0.24in; 54 margin-right: calc(0.04in + 0.1in); 55 margin-bottom: 0.16in; 56 margin-left: calc(0.12in + 0.1in); 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(2) > .swatch:nth-child(1) { border-color: pink; } 61 .row:nth-child(2) > .swatch:nth-child(2) { border-color: orange; } 62 </style> 63 <div class="row"> 64 <div class="swatch"></div> 65 <div class="swatch"></div> 66 </div> 67 <div class="row"> 68 <div class="swatch"></div> 69 <div class="swatch"></div> 70 </div>