Fix turning pages with an odd count of columns

CHANGELOG.md

@@ -4,7 +4,14 @@ All notable changes to this project will be documented in this file. Take a look
 
 **Warning:** Features marked as *alpha* may change or be removed in a future release without notice. Use with caution.
 
-<!-- ## [Unreleased] -->
+## [Unreleased]
+
+### Fixed
+
+#### Navigator
+
+* 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.1]
 

readium/navigator/src/main/assets/_scripts/src/utils.js

@@ -19,6 +19,11 @@ window.addEventListener(
 window.addEventListener(
   "load",
   function () {
+    const observer = new ResizeObserver(() => {
+      appendVirtualColumnIfNeeded();
+    });
+    observer.observe(document.body);
+
     window.addEventListener("orientationchange", function () {
       onViewportWidthChanged();
       snapCurrentOffset();
@@ -28,6 +33,35 @@ 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) {
+    if (virtualCol) {
+      virtualCol.remove();
+    }
+  } else {
+    var documentWidth = document.scrollingElement.scrollWidth;
+    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 pageWidth = 1;
 
 function onViewportWidthChanged() {
@@ -44,6 +78,14 @@ function onViewportWidthChanged() {
   );
 }
 
+export function getColumnCountPerScreen() {
+  return parseInt(
+    window
+      .getComputedStyle(document.documentElement)
+      .getPropertyValue("column-count")
+  );
+}
+
 export function isScrollModeEnabled() {
   return (
     document.documentElement.style