printpreview_pps_uw2_no_margin_ref.html (1102B)
1 <!DOCTYPE html> 2 <!-- This is a reference case for a "2-pages-per-sheet" scenario zero 3 unwriteable margins. We're scaling down 8in width to fit 2 in 10in, 4 so the scale factor is (10 / 2) / 8 = 0.625x. --> 5 <style> 6 html { height: 100%; } 7 body { 8 height: 100%; 9 margin: 0; 10 box-sizing: border-box; 11 12 /* The testcase (rendered at 2-pages-per-sheet) will have 8 - (10in * 0.625) 13 * = 1.75in of extra vertical space. */ 14 padding: 0.875in 0; 15 16 /* We lay out the body as a row-oriented flex container, with two 17 side-by-side children which correspond to the two pages per sheet: */ 18 display: flex; 19 } 20 .swatch { 21 box-sizing: border-box; 22 23 /* This represents the 240px border in the testcase, scaled down 0.5x: */ 24 border: 150px solid; 25 26 /* Share the width equally among the swatches. (The height will be 27 automatically set to the flex container's row height, via default 28 'align-self' behavior.) */ 29 flex: 1; 30 margin: 0; 31 } 32 .swatch:nth-child(1) { border-color: cyan; } 33 .swatch:nth-child(2) { border-color: pink; } 34 </style> 35 <div class="swatch"></div> 36 <div class="swatch"></div>