Fix turning pages with an odd count of columns (#206)

For an EPUB reflowable resource, having an odd number of columns when displaying two columns per screen causes snapping and page turning issues. To fix this, we insert a blank virtual column at the end of the resource.

CHANGELOG.md

@@ -11,6 +11,10 @@ All notable changes to this project will be documented in this file.
 
 * A new `translate` EPUB and PDF editing action is available for iOS 15.
 
+### Fixed
+
+* Fixed turning pages of an EPUB reflowable resource with an odd number of columns. A virtual blank trailing column is appended to the resource when displayed as two columns.
+
 
 ## [2.1.0]
 

r2-navigator-swift/EPUB/Assets/Static/scripts/readium-fixed.js

@@ -4704,6 +4704,7 @@ function log() {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "getColumnCountPerScreen": () => (/* binding */ getColumnCountPerScreen),
 /* harmony export */   "isScrollModeEnabled": () => (/* binding */ isScrollModeEnabled),
 /* harmony export */   "scrollToId": () => (/* binding */ scrollToId),
 /* harmony export */   "scrollToPosition": () => (/* binding */ scrollToPosition),
@@ -4746,6 +4747,11 @@ window.addEventListener(
 window.addEventListener(
   "load",
   function () {
+    const observer = new ResizeObserver(() => {
+      appendVirtualColumnIfNeeded();
+    });
+    observer.observe(document.body);
+
     // on page load
     window.addEventListener("orientationchange", function () {
       orientationChanged();
@@ -4756,6 +4762,34 @@ window.addEventListener(
   false
 );
 
+/**
+ * Having an odd number of columns when displaying two columns per screen causes snapping and page
+ * turning issues. To fix this, we insert a blank virtual column at the end of the resource.
+ */
+function appendVirtualColumnIfNeeded() {
+  const id = "readium-virtual-page";
+  var virtualCol = document.getElementById(id);
+  if (isScrollModeEnabled() || getColumnCountPerScreen() != 2) {
+    virtualCol?.remove();
+  } else {
+    var documentWidth = document.scrollingElement.scrollWidth;
+    var pageWidth = window.innerWidth;
+    var colCount = documentWidth / pageWidth;
+    var hasOddColCount = (Math.round(colCount * 2) / 2) % 1 > 0.1;
+    if (hasOddColCount) {
+      if (virtualCol) {
+        virtualCol.remove();
+      } else {
+        virtualCol = document.createElement("div");
+        virtualCol.setAttribute("id", id);
+        virtualCol.style.breakBefore = "column";
+        virtualCol.innerHTML = "​"; // zero-width space
+        document.body.appendChild(virtualCol);
+      }
+    }
+  }
+}
+
 var last_known_scrollX_position = 0;
 var last_known_scrollY_position = 0;
 var ticking = false;
@@ -4810,6 +4844,14 @@ function orientationChanged() {
       : screen.height;
 }
 
+function getColumnCountPerScreen() {
+  return parseInt(
+    window
+      .getComputedStyle(document.documentElement)
+      .getPropertyValue("column-count")
+  );
+}
+
 function isScrollModeEnabled() {
   return (
     document.documentElement.style

r2-navigator-swift/EPUB/Assets/Static/scripts/readium-reflowable.js

@@ -4704,6 +4704,7 @@ function log() {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "getColumnCountPerScreen": () => (/* binding */ getColumnCountPerScreen),
 /* harmony export */   "isScrollModeEnabled": () => (/* binding */ isScrollModeEnabled),
 /* harmony export */   "scrollToId": () => (/* binding */ scrollToId),
 /* harmony export */   "scrollToPosition": () => (/* binding */ scrollToPosition),
@@ -4746,6 +4747,11 @@ window.addEventListener(
 window.addEventListener(
   "load",
   function () {
+    const observer = new ResizeObserver(() => {
+      appendVirtualColumnIfNeeded();
+    });
+    observer.observe(document.body);
+
     // on page load
     window.addEventListener("orientationchange", function () {
       orientationChanged();
@@ -4756,6 +4762,34 @@ window.addEventListener(
   false
 );
 
+/**
+ * Having an odd number of columns when displaying two columns per screen causes snapping and page
+ * turning issues. To fix this, we insert a blank virtual column at the end of the resource.
+ */
+function appendVirtualColumnIfNeeded() {
+  const id = "readium-virtual-page";
+  var virtualCol = document.getElementById(id);
+  if (isScrollModeEnabled() || getColumnCountPerScreen() != 2) {
+    virtualCol?.remove();
+  } else {
+    var documentWidth = document.scrollingElement.scrollWidth;
+    var pageWidth = window.innerWidth;
+    var colCount = documentWidth / pageWidth;
+    var hasOddColCount = (Math.round(colCount * 2) / 2) % 1 > 0.1;
+    if (hasOddColCount) {
+      if (virtualCol) {
+        virtualCol.remove();
+      } else {
+        virtualCol = document.createElement("div");
+        virtualCol.setAttribute("id", id);
+        virtualCol.style.breakBefore = "column";
+        virtualCol.innerHTML = "​"; // zero-width space
+        document.body.appendChild(virtualCol);
+      }
+    }
+  }
+}
+
 var last_known_scrollX_position = 0;
 var last_known_scrollY_position = 0;
 var ticking = false;
@@ -4810,6 +4844,14 @@ function orientationChanged() {
       : screen.height;
 }
 
+function getColumnCountPerScreen() {
+  return parseInt(
+    window
+      .getComputedStyle(document.documentElement)
+      .getPropertyValue("column-count")
+  );
+}
+
 function isScrollModeEnabled() {
   return (
     document.documentElement.style

r2-navigator-swift/EPUB/Scripts/src/utils.js

@@ -25,6 +25,11 @@ window.addEventListener(
 window.addEventListener(
   "load",
   function () {
+    const observer = new ResizeObserver(() => {
+      appendVirtualColumnIfNeeded();
+    });
+    observer.observe(document.body);
+
     // on page load
     window.addEventListener("orientationchange", function () {
       orientationChanged();
@@ -35,6 +40,34 @@ window.addEventListener(
   false
 );
 
+/**
+ * Having an odd number of columns when displaying two columns per screen causes snapping and page
+ * turning issues. To fix this, we insert a blank virtual column at the end of the resource.
+ */
+function appendVirtualColumnIfNeeded() {
+  const id = "readium-virtual-page";
+  var virtualCol = document.getElementById(id);
+  if (isScrollModeEnabled() || getColumnCountPerScreen() != 2) {
+    virtualCol?.remove();
+  } else {
+    var documentWidth = document.scrollingElement.scrollWidth;
+    var pageWidth = window.innerWidth;
+    var colCount = documentWidth / pageWidth;
+    var hasOddColCount = (Math.round(colCount * 2) / 2) % 1 > 0.1;
+    if (hasOddColCount) {
+      if (virtualCol) {
+        virtualCol.remove();
+      } else {
+        virtualCol = document.createElement("div");
+        virtualCol.setAttribute("id", id);
+        virtualCol.style.breakBefore = "column";
+        virtualCol.innerHTML = "​"; // zero-width space
+        document.body.appendChild(virtualCol);
+      }
+    }
+  }
+}
+
 var last_known_scrollX_position = 0;
 var last_known_scrollY_position = 0;
 var ticking = false;
@@ -89,6 +122,14 @@ function orientationChanged() {
       : screen.height;
 }
 
+export function getColumnCountPerScreen() {
+  return parseInt(
+    window
+      .getComputedStyle(document.documentElement)
+      .getPropertyValue("column-count")
+  );
+}
+
 export function isScrollModeEnabled() {
   return (
     document.documentElement.style