Correct WebGL book page projection

public/js/book-page-format-module.js

@@ -9,16 +9,16 @@ class BookPageFormatModule extends BaseModule {
         super('book-page-format', 'Book Page Format');
         this.dependencies = [];
         this.format = Object.freeze({
-            id: 'us-mass-market-hardcover',
+            id: 'us-mass-market-paperback',
             trim: Object.freeze({
                 widthIn: 4.25,
-                heightIn: 6.375
+                heightIn: 6.87
             }),
             margins: Object.freeze({
                 topIn: 0.46,
                 bottomIn: 0.58,
-                innerIn: 0.62,
-                outerIn: 0.86
+                innerIn: 0.56,
+                outerIn: 0.44
             }),
             typography: Object.freeze({
                 fontFamily: '"EB Garamond", "EB Garamond 12", serif',
@@ -69,6 +69,16 @@ class BookPageFormatModule extends BaseModule {
             width: Math.max(1, width - margins.outer - margins.inner),
             height: Math.max(1, height - margins.top - margins.bottom)
         };
+        const contentBySide = {
+            left: {
+                ...content,
+                x: margins.outer
+            },
+            right: {
+                ...content,
+                x: margins.inner
+            }
+        };
         const linesPerPage = Math.max(1, Number(this.format.typography.linesPerPage || 25));
         const typographyLineHeightPx = content.height / linesPerPage;
         const bodyFontSizePx = typographyLineHeightPx / Math.max(1, Number(this.format.typography.bodyLineRatio || 1.5));
@@ -78,6 +88,7 @@ class BookPageFormatModule extends BaseModule {
             aspectRatio: this.getAspectRatio(),
             margins,
             content,
+            contentBySide,
             linesPerPage,
             bodyFontSizePx,
             typographyLineHeightPx,