Paginate a Zine!

paginate.js

/**
 * Dynamically reorder page elements using the flexbox order property.
 */
function paginateZine({ pageSelector }) {
  const pages = document.querySelectorAll(pageSelector)
  const sheets = Math.ceil(pages.length / 4)

  for (let s = 0; s < sheets; s++) {
    const frontLeft = pages.length - 2 * s - 1
    const frontRight = 2 * s
    const backLeft = 2 * s + 1
    const backRight = pages.length - 2 * s - 2;

    [
      [frontLeft, s * 4],
      [frontRight, s * 4 + 1],
      [backLeft, s * 4 + 2],
      [backRight, s * 4 + 3],
    ].forEach(([i, ord]) => {
      const elem = pages.item(i)
      if (elem) elem.style.order = ord
    })
  }
}

paginateZine({ pageSelector: '.page' })

style.css

:root {
  --side-width: 5.5in;
  --side-height: 8.5in;
  --gutter: 0.25in;
  --page-width: calc(50% - 4 * var(--gutter));
  --page-height: calc(var(--side-height) - 2 * var(--gutter));
}

body {
  margin: 0;
  padding: 0;
  font-size: 10pt;
}

@media only print {
  @page {
    size: var(--side-width) var(--side-height);
    margin: var(--gutter);
  }
  .content {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  .page {
    flex: 0 0 var(--page-width);
    padding: var(--gutter);
    width: var(--page-width);
    height: var(--page-height);
    text-align: justify;
  }
}