printpreview_pps2_ref.html (1490B)
1 <!DOCTYPE html> 2 <!-- This is a reference case for a "2-pages-per-sheet" scenario. The width and 3 height of each "swatch" is 0.625 the width and height of the page. That 4 0.625 scale-factor comes from the fact that, when rendering the testcase, 5 we'll need to scale the page-width (8in) down enough to fit side-by-side 6 into half of the page height (10in/2 = 5in), on a rotated sheet. So we've 7 got to scale 8in to fit into 5in, which is a scale factor of 0.625. --> 8 <style> 9 html { height: 100%; } 10 body { 11 height: 100%; 12 margin: 0; 13 box-sizing: border-box; 14 15 /* The testcase (rendered at 2-pages-per-sheet) will have 1.75in of extra 16 space in the vertical axis, which will be distributed equally with 0.875in 17 on the top and the bottom of the page grid. We mock that up as padding 18 here: */ 19 padding: 0.875in 0; 20 21 /* We lay out the body as a row-oriented flex container, with two 22 side-by-side children which correspond to the two pages per sheet: */ 23 display: flex; 24 } 25 .swatch { 26 box-sizing: border-box; 27 28 /* This represents the 240px border in the testcase, scaled down 0.625x: */ 29 border: 150px solid; 30 31 /* Share the width equally among the swatches. (The height will be 32 automatically set to the flex container's row height, via default 33 'align-self' behavior.) */ 34 flex: 1; 35 } 36 .swatch:nth-child(1) { border-color: cyan; } 37 .swatch:nth-child(2) { border-color: pink; } 38 </style> 39 <div class="swatch"></div> 40 <div class="swatch"></div>