Skip to content

Commit 9e63ad8

Browse files
mickael-menumickael-menu
authored
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. Former-commit-id: cdb3363
1 parent c81c9ef commit 9e63ad8

File tree

6 files changed

+131
-2
lines changed

6 files changed

+131
-2
lines changed

‎navigator/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ All notable changes to this project will be documented in this file.
1111

1212
* A new `translate` EPUB and PDF editing action is available for iOS 15.
1313

14+
### Fixed
15+
16+
* 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.
17+
1418

1519
## [2.1.0]
1620

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4704,6 +4704,7 @@ function log() {
47044704
"use strict";
47054705
__webpack_require__.r(__webpack_exports__);
47064706
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4707+
/* harmony export */ "getColumnCountPerScreen": () => (/* binding */ getColumnCountPerScreen),
47074708
/* harmony export */ "isScrollModeEnabled": () => (/* binding */ isScrollModeEnabled),
47084709
/* harmony export */ "scrollToId": () => (/* binding */ scrollToId),
47094710
/* harmony export */ "scrollToPosition": () => (/* binding */ scrollToPosition),
@@ -4746,6 +4747,11 @@ window.addEventListener(
47464747
window.addEventListener(
47474748
"load",
47484749
function () {
4750+
const observer = new ResizeObserver(() => {
4751+
appendVirtualColumnIfNeeded();
4752+
});
4753+
observer.observe(document.body);
4754+
47494755
// on page load
47504756
window.addEventListener("orientationchange", function () {
47514757
orientationChanged();
@@ -4756,6 +4762,34 @@ window.addEventListener(
47564762
false
47574763
);
47584764

4765+
/**
4766+
* Having an odd number of columns when displaying two columns per screen causes snapping and page
4767+
* turning issues. To fix this, we insert a blank virtual column at the end of the resource.
4768+
*/
4769+
function appendVirtualColumnIfNeeded() {
4770+
const id = "readium-virtual-page";
4771+
var virtualCol = document.getElementById(id);
4772+
if (isScrollModeEnabled() || getColumnCountPerScreen() != 2) {
4773+
virtualCol?.remove();
4774+
} else {
4775+
var documentWidth = document.scrollingElement.scrollWidth;
4776+
var pageWidth = window.innerWidth;
4777+
var colCount = documentWidth / pageWidth;
4778+
var hasOddColCount = (Math.round(colCount * 2) / 2) % 1 > 0.1;
4779+
if (hasOddColCount) {
4780+
if (virtualCol) {
4781+
virtualCol.remove();
4782+
} else {
4783+
virtualCol = document.createElement("div");
4784+
virtualCol.setAttribute("id", id);
4785+
virtualCol.style.breakBefore = "column";
4786+
virtualCol.innerHTML = "​"; // zero-width space
4787+
document.body.appendChild(virtualCol);
4788+
}
4789+
}
4790+
}
4791+
}
4792+
47594793
var last_known_scrollX_position = 0;
47604794
var last_known_scrollY_position = 0;
47614795
var ticking = false;
@@ -4810,6 +4844,14 @@ function orientationChanged() {
48104844
: screen.height;
48114845
}
48124846

4847+
function getColumnCountPerScreen() {
4848+
return parseInt(
4849+
window
4850+
.getComputedStyle(document.documentElement)
4851+
.getPropertyValue("column-count")
4852+
);
4853+
}
4854+
48134855
function isScrollModeEnabled() {
48144856
return (
48154857
document.documentElement.style

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4704,6 +4704,7 @@ function log() {
47044704
"use strict";
47054705
__webpack_require__.r(__webpack_exports__);
47064706
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4707+
/* harmony export */ "getColumnCountPerScreen": () => (/* binding */ getColumnCountPerScreen),
47074708
/* harmony export */ "isScrollModeEnabled": () => (/* binding */ isScrollModeEnabled),
47084709
/* harmony export */ "scrollToId": () => (/* binding */ scrollToId),
47094710
/* harmony export */ "scrollToPosition": () => (/* binding */ scrollToPosition),
@@ -4746,6 +4747,11 @@ window.addEventListener(
47464747
window.addEventListener(
47474748
"load",
47484749
function () {
4750+
const observer = new ResizeObserver(() => {
4751+
appendVirtualColumnIfNeeded();
4752+
});
4753+
observer.observe(document.body);
4754+
47494755
// on page load
47504756
window.addEventListener("orientationchange", function () {
47514757
orientationChanged();
@@ -4756,6 +4762,34 @@ window.addEventListener(
47564762
false
47574763
);
47584764

4765+
/**
4766+
* Having an odd number of columns when displaying two columns per screen causes snapping and page
4767+
* turning issues. To fix this, we insert a blank virtual column at the end of the resource.
4768+
*/
4769+
function appendVirtualColumnIfNeeded() {
4770+
const id = "readium-virtual-page";
4771+
var virtualCol = document.getElementById(id);
4772+
if (isScrollModeEnabled() || getColumnCountPerScreen() != 2) {
4773+
virtualCol?.remove();
4774+
} else {
4775+
var documentWidth = document.scrollingElement.scrollWidth;
4776+
var pageWidth = window.innerWidth;
4777+
var colCount = documentWidth / pageWidth;
4778+
var hasOddColCount = (Math.round(colCount * 2) / 2) % 1 > 0.1;
4779+
if (hasOddColCount) {
4780+
if (virtualCol) {
4781+
virtualCol.remove();
4782+
} else {
4783+
virtualCol = document.createElement("div");
4784+
virtualCol.setAttribute("id", id);
4785+
virtualCol.style.breakBefore = "column";
4786+
virtualCol.innerHTML = "​"; // zero-width space
4787+
document.body.appendChild(virtualCol);
4788+
}
4789+
}
4790+
}
4791+
}
4792+
47594793
var last_known_scrollX_position = 0;
47604794
var last_known_scrollY_position = 0;
47614795
var ticking = false;
@@ -4810,6 +4844,14 @@ function orientationChanged() {
48104844
: screen.height;
48114845
}
48124846

4847+
function getColumnCountPerScreen() {
4848+
return parseInt(
4849+
window
4850+
.getComputedStyle(document.documentElement)
4851+
.getPropertyValue("column-count")
4852+
);
4853+
}
4854+
48134855
function isScrollModeEnabled() {
48144856
return (
48154857
document.documentElement.style

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@ window.addEventListener(
2525
window.addEventListener(
2626
"load",
2727
function () {
28+
const observer = new ResizeObserver(() => {
29+
appendVirtualColumnIfNeeded();
30+
});
31+
observer.observe(document.body);
32+
2833
// on page load
2934
window.addEventListener("orientationchange", function () {
3035
orientationChanged();
@@ -35,6 +40,34 @@ window.addEventListener(
3540
false
3641
);
3742

43+
/**
44+
* Having an odd number of columns when displaying two columns per screen causes snapping and page
45+
* turning issues. To fix this, we insert a blank virtual column at the end of the resource.
46+
*/
47+
function appendVirtualColumnIfNeeded() {
48+
const id = "readium-virtual-page";
49+
var virtualCol = document.getElementById(id);
50+
if (isScrollModeEnabled() || getColumnCountPerScreen() != 2) {
51+
virtualCol?.remove();
52+
} else {
53+
var documentWidth = document.scrollingElement.scrollWidth;
54+
var pageWidth = window.innerWidth;
55+
var colCount = documentWidth / pageWidth;
56+
var hasOddColCount = (Math.round(colCount * 2) / 2) % 1 > 0.1;
57+
if (hasOddColCount) {
58+
if (virtualCol) {
59+
virtualCol.remove();
60+
} else {
61+
virtualCol = document.createElement("div");
62+
virtualCol.setAttribute("id", id);
63+
virtualCol.style.breakBefore = "column";
64+
virtualCol.innerHTML = "​"; // zero-width space
65+
document.body.appendChild(virtualCol);
66+
}
67+
}
68+
}
69+
}
70+
3871
var last_known_scrollX_position = 0;
3972
var last_known_scrollY_position = 0;
4073
var ticking = false;
@@ -89,6 +122,14 @@ function orientationChanged() {
89122
: screen.height;
90123
}
91124

125+
export function getColumnCountPerScreen() {
126+
return parseInt(
127+
window
128+
.getComputedStyle(document.documentElement)
129+
.getPropertyValue("column-count")
130+
);
131+
}
132+
92133
export function isScrollModeEnabled() {
93134
return (
94135
document.documentElement.style

0 commit comments

Comments
 (0)