Transfer from Chunker

.babelrc

+{
+  "presets": ["env"],
+	"plugins": ["transform-runtime"]
+}

.gitignore

+.DS_Store
+node_modules
+dist
+lib

LICENSE

+The MIT License (MIT)
+
+Copyright (c) 2015 Pagedmedia.org
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

+Paged.js - Paged Media Polyfill
+===========
+
+Chunks up a document into paged media flows and applies print styles.
+
+Process the first 50 pages of Moby Dick: [https://s3.amazonaws.com/pagedmedia/chunker/index.html](https://s3.amazonaws.com/pagedmedia/chunker/index.html).
+
+## Setup
+Install dependencies
+```sh
+$ npm install
+```
+
+## Development
+Run the local webpack-dev-server with livereload and autocompile on [http://localhost:8080/](http://localhost:8080/)
+```sh
+$ npm start
+```
+## Deployment
+Build the current application
+```sh
+$ npm run build
+```

examples/assets/styles/index.css

+// Apply a natural box layout model to all elements
+// but allowing components to change
+// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
+html {
+    box-sizing: border-box;
+}
+*, *:before, *:after {
+    box-sizing: border-box;
+}
+
+:root {
+    --width: 8.5in;
+    --height: 11in;
+    --margin: 1.2in;
+}
+
+@page {
+  size: var(--width) var(--height);
+  margin: 0;
+  padding: 0;
+
+  @top-left {
+    content: "Hamlet";
+  }
+  @top-right {
+    content: "Page " counter(page);
+  }
+}
+
+/* section {
+  break-before: column;
+} */
+
+@media screen {
+
+  body {
+    background-color: whitesmoke;
+  }
+
+  .scaled {
+    transform: scale(.6);
+    transform-origin: 0 0;
+  }
+
+  .page {
+    background-color: #fdfdfd;
+    margin-bottom: calc(var(--margin) / 2);
+    flex: none;
+  }
+
+  .pages {
+    width: calc(var(--width) * 2);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    transform-origin: 0 0;
+  }
+
+  .pages > .section {
+    width: calc(var(--width) * 2);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  #controls {
+    margin: 20px 0;
+    text-align: center;
+  }
+}
+
+@media print {
+  body {
+    width: var(--width);
+    height: var(--height);
+    margin: 0;
+    padding: 0;
+  }
+
+  .pages {
+    width: var(--width);
+    flex-direction: column;
+    transform: none !important;
+  }
+
+  .page {
+    margin-bottom: 0;
+    flex: none;
+    page-break-before: always;
+  }
+
+  #controls {
+    display: none;
+  }
+
+}
+
+.page {
+  /* border: 1px solid black; */
+  width: var(--width);
+  height: var(--height);
+  overflow: hidden;
+  position: relative;
+  display: grid;
+  grid-template-columns: [left] var(--margin) [center] calc(var(--width) - var(--margin) * 2) [right] var(--margin);
+  grid-template-rows: [header] var(--margin) [page] calc(var(--height) - var(--margin) * 2) [footer] var(--margin);
+}
+
+.page.right_page {
+  grid-template-columns: [left] calc(var(--margin) * 1.4) [center] calc(var(--width) - var(--margin) - calc(var(--margin) * 1.4)) [right] var(--margin);
+}
+
+.page.left_page {
+  grid-template-columns: [left] var(--margin) [center] calc(var(--width) - var(--margin) - calc(var(--margin) * 1.4)) [right] calc(var(--margin) * 1.4);
+}
+
+.right_page .left, .right_page .top .top-left-corner, .right_page .bottom .bottom-left-corner {
+  width: calc(var(--margin) * 1.4);
+}
+
+.left_page .right, .left_page .top .top-right-corner, .left_page .bottom .bottom-right-corner {
+  width: calc(var(--margin) * 1.4);
+}
+
+.top {
+  width: var(--width);
+  height: var(--margin);
+  display: flex;
+  grid-column: left / right;
+  grid-row: header;
+}
+
+.top .top-left-corner,
+.top .top-right-corner {
+  width: var(--margin);
+  height: var(--margin);
+  flex: none;
+}
+
+.top > div {
+  flex-grow: 1;
+}
+
+.right {
+  height: calc(var(--height) - (var(--margin) * 2));
+  width: var(--margin);
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  right: 0;
+  grid-column: right;
+  grid-row: page;
+}
+
+.right > div {
+  flex-grow: 1;
+}
+
+.bottom {
+  width: var(--width);
+  height: var(--margin);
+  display: flex;
+  grid-column: left / right;
+  grid-row: footer;
+}
+
+.bottom .bottom-left-corner,
+.bottom .bottom-right-corner {
+  width: var(--margin);
+  height: var(--margin);
+  flex: none;
+}
+
+.bottom > div {
+  flex-grow: 1;
+}
+
+.left {
+  height: calc(var(--height) - (var(--margin) * 2));
+  width: var(--margin);
+  top: var(--margin);
+  display: flex;
+  flex-direction: column;
+  grid-column: left;
+  grid-row: page;
+}
+
+.left > div {
+  flex-grow: 1;
+}
+
+.page > .area {
+  grid-column: center;
+  grid-row: page;
+  width: 100%;
+  height: 100%;
+}
+
+
+
+@media screen {
+  .top .top-left-corner,
+  .top .top-right-corner {
+    border: 1px dotted tomato;
+  }
+
+  .top > div {
+    border: 1px dotted teal;
+  }
+
+  .right > div {
+    border: 1px dotted mediumseagreen;
+  }
+
+  .bottom .bottom-left-corner,
+  .bottom .bottom-right-corner {
+    border: 1px solid orange;
+  }
+
+  .bottom > div {
+    border: 1px dotted darkblue;
+  }
+
+  .left > div {
+    border: 1px dotted sienna;
+  }
+}

examples/assets/styles/mody-dick.css

+@font-face {
+font-family: 'Stix';
+font-weight: normal;
+font-style: normal;
+}
+
+@font-face {
+font-family: 'Stix';
+font-weight: bold;
+font-style: normal;
+}
+
+@font-face {
+font-family:'Stix';
+font-weight: normal;
+font-style: italic;
+}
+
+@font-face {
+font-family:'Stix';
+font-weight: bold;
+font-style: italic;
+}
+
+
+body {
+font-size: 1em;
+line-height: 1.33em;
+font-family: 'Stix', serif;
+font-variant-numeric: oldstyle-nums;
+}
+
+p {
+padding: 0;
+margin: 0;
+text-align: justify;
+}
+
+header + p:first-line {
+text-transform: lowercase !important;
+font-variant: small-caps;
+font-size: 1.1em;
+}
+
+p + p {
+text-indent: 1.33em;
+}
+
+.decoration-rw {
+text-align: center;
+padding-top: 1em;
+padding-bottom: 1em;
+padding-left: 0em;
+padding-right: 0em;
+}
+
+.copyright-rw {
+font-size: .8em;
+line-height: 1em;
+text-align: left;
+padding-top: 2em;
+}
+
+.copyright-rw p {
+margin-bottom: 1em;
+text-indent: 0;
+}
+
+.dedication-rw p {
+text-align: center;
+text-indent: 0;
+}
+
+.Dedication-rw {
+margin-top: 3em;
+}
+
+.leading-line-rw {
+height: 1.33em;
+}
+
+.fp-rw {
+text-indent: 0;
+}
+
+
+
+h1 {
+font-size: 1.5em;
+line-height: 1.33em;
+text-align: center;
+padding-bottom: 0em;
+text-align: center;
+text-transform: uppercase;
+font-weight: normal;
+letter-spacing: 4px;
+}
+
+h2 {
+text-align: center;
+font-size: 1.33em;
+line-height: 1.2em;
+text-align: center;
+padding-bottom: 0em;
+text-align: center;
+text-transform: uppercase;
+font-weight: normal;
+letter-spacing: 3px;
+}
+
+.title-author-rw {
+text-align: center;
+font-size: 1.5em;
+text-indent: 0;
+}
+
+.title-num-rw {
+text-align: center;
+font-size: 1.5em;
+text-indent: 0;
+margin-top: 1em;
+margin-bottom: 1em;
+}
+
+.title-sub-rw {
+text-align: center;
+font-size: 1.5em;
+text-indent: 0;
+}
+
+.imprint-rw {
+text-align: center;
+}
+
+.extract-verse-rw {
+margin-top: 1.33em;
+margin-bottom: 1.33em;
+padding-left: 20pt;
+}
+
+.extract-rw {
+margin-top: 1.33em;
+margin-bottom: 1.33em;
+padding-left: 20pt;
+}
+
+.extract-verse-rw p {
+text-align: left;
+text-indent: -20pt;
+margin-left: 20pt;
+}
+
+.epigraph-rw {
+margin-top: 1.33em;
+margin-bottom: 1.33em;
+padding-left: 20pt;
+padding-right: 20pt;
+}
+
+.sc-rw {
+font-size: 75%;
+}
+.block-rw {
+margin-top: 1em;
+margin-bottom: 1em;
+margin-left: 20pt;
+margin-right: 20pt;
+}
+
+span.dropcap-rw {
+float: left;
+font-size: 2.7em;
+line-height: .87em;
+}
+
+
+.signature-rw {
+margin-left: 50%;
+text-align: left;
+text-indent: 0;
+}
+
+.AdCard-rw h4 {
+text-align: center;
+}
+
+.AdCard-rw p {
+text-align: center;
+text-indent: 0;
+}
+
+.FrontSales-rw h4, .FrontSales-rw h2 {
+text-align: center;
+}
+
+.FrontSales-rw p {
+text-indent: 0;
+}
+
+
+
+/* NAVIGATION */
+
+a {
+color: black !important;
+}
+
+#toc ol {
+list-style-type: none;
+margin: 0 0 0 2em;
+padding: 0 0 0 0;
+}
+
+#toc ol ol {
+list-style-type: none;
+margin: 0 0 0 1em;
+padding: 0 0 0 0;
+}
+
+
+
+
+
+#toc ol li {
+margin: 0 0 0 0;
+padding: 0 0 0 0;
+}
+
+#toc ol li a {
+text-decoration: none;
+font-family: sans-serif;
+}
+
+.toc-short ol li a {
+text-decoration: none;
+font-family: sans-serif;
+}
+
+
+.toc-short ol {
+list-style-type: none;
+margin: 0 0 0 2em;
+padding: 0 0 0 0;
+}
+
+
+#guide {
+display: none;
+}
+
+
+header {
+padding: 3em 0 2em 0;
+}
+
+header a {
+text-decoration: none;
+color: black;
+}
+
+
+
+
+
+.center {
+text-align: center;
+text-indent: 0;
+}
+
+img {
+max-width: 100%;
+max-height: 100%;
+}
+
+
+
+.title-other-rw {
+text-align: center;
+text-indent: 0;
+margin-top: .5em;
+}
+
+.dateline-rw {
+text-align: left;
+text-indent: 0;
+margin-top: 1.33em;
+margin-bottom: 1.33em;
+}
+
+
+.frontmatter-rw h1 {
+font-size: 1.5em;
+}
+
+.backmatter-rw h1 {
+font-size: 1.5em;
+}
+
+
+
+   .direction-rw {
+   text-align: center;
+   text-indent: 0;
+   font-style: italic;
+   margin: 1em 0 1em 0;
+   }
+
+    .source-rw {
+margin-bottom: 0em;
+text-align: right !important;
+font-variant: small-caps;
+text-transform: lowercase;
+font-size: 1.1em;
+page-break-before: avoid;
+}
+
+div.block-rw {
+border-top: 2px solid #EEE;
+border-bottom: 2px solid #EEE;
+padding: 6pt 0 6pt 0;
+}
+
+.list-simple-rw p {
+text-indent: 0;
+text-align: left;
+}
+
+.headline-rw p {
+text-indent: 0;
+text-align: center;
+padding-top: 6px;
+}
+
+div.photo {
+margin-top: 1em;
+padding-top: 2em;
+text-align: center;
+
+}
+
+div.photo p {
+text-align: center;
+padding: 6px;
+font-style: italic;
+
+
+
+}
+
+
+
+
+
+.-epub-media-overlay-active {
+    background-color: #abc;
+}
+
+
+@media all and (orientation:portrait) {
+p { font-family: serif; }
+}
+
+
+@media all and (orientation:landscape) {
+p { font-family: sans-serif; }
+
+}

examples/epub.html

+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Chunking Test - Epub Parser</title>
+    <script>this.ready=new Promise(function($){document.addEventListener('DOMContentLoaded',$,{once:true})})</script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.1/jszip.min.js"></script>
+    <script src="https://unpkg.com/epubjs@0.4.2/dist/epub.min.js"></script>
+    <script src="../dist/paged.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="assets/styles/index.css">
+    <!-- <link rel="stylesheet" type="text/css" href="assets/styles/mody-dick.css"> -->
+</head>
+<body>
+  <script>
+    ready.then(async function () {
+      let preview = true;
+      let url = new URL(window.location);
+      let params = new URLSearchParams(url.search);
+      for(var pair of params.entries()) {
+        if(pair[0] === "preview") {
+          preview = (pair[1] === "true");
+        }
+      }
+
+      let pages = document.querySelector(".pages");
+      let scale = ((window.innerWidth * .9 ) / pages.offsetWidth);
+
+      pages.style.transform = `scale(${scale}) translate(${(window.innerWidth / 2) - ((pages.offsetWidth * scale / 2) ) }px, 0)`;
+
+      let inputElement = document.getElementById("input");
+
+      inputElement.addEventListener('change', function (e) {
+        var file = e.target.files[0];
+        if (window.FileReader) {
+          var reader = new FileReader();
+          reader.onload = openBook;
+          reader.readAsArrayBuffer(file);
+
+          let pages = document.querySelectorAll(".section");
+          for (var i = 0; i < pages.length; i++) {
+            pages[i].remove();
+          }
+        }
+      });
+
+      async function sections(spine) {
+        let text = "";
+        let pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
+        let links = /<link[^>]*rel\s*=\s*["']\s*stylesheet\s*["'][^>]*>/im;
+
+        for (let section of spine) {
+          let href = section.href;
+          let styles = "";
+          let html = await fetch(href)
+            .then((response) => {
+              return response.text();
+            }).then((t) => {
+              let matches = pattern.exec(t);
+              styles = links.exec(t);
+              return matches && matches.length && matches[1];
+            });
+          text += "<paged-body>";
+
+          // if (styles) {
+          //   for (let i = 0; i < styles.length; i++)