Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<!-- This is a reference case for a "2-pages-per-sheet" scenario. The width and
height of each "swatch" is 0.625 the width and height of the page. That
0.625 scale-factor comes from the fact that, when rendering the testcase,
we'll need to scale the page-width (8in) down enough to fit side-by-side
into half of the page height (10in/2 = 5in), on a rotated sheet. So we've
got to scale 8in to fit into 5in, which is a scale factor of 0.625. -->
<style>
html { height: 100%; }
body {
height: 100%;
margin: 0;
box-sizing: border-box;
/* The testcase (rendered at 2-pages-per-sheet) will have 1.75in of extra
space in the vertical axis, which will be distributed equally with 0.875in
on the top and the bottom of the page grid. We mock that up as padding
here: */
padding: 0.875in 0;
/* We lay out the body as a row-oriented flex container, with two
side-by-side children which correspond to the two pages per sheet: */
display: flex;
}
.swatch {
box-sizing: border-box;
/* This represents the 240px border in the testcase, scaled down 0.625x: */
border: 150px solid;
/* Share the width equally among the swatches. (The height will be
automatically set to the flex container's row height, via default
'align-self' behavior.) */
flex: 1;
}
.swatch:nth-child(1) { border-color: cyan; }
.swatch:nth-child(2) { border-color: pink; }
</style>
<div class="swatch"></div>
<div class="swatch"></div>