From c6aa13562f3eeaeb7d60d4b0c8feb54f0a0975c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mickae=CC=88l=20Menu?= Date: Mon, 18 Aug 2025 17:54:51 +0200 Subject: [PATCH] Fix overlapping FXL pages in landscape orientation --- CHANGELOG.md | 1 + .../Static/scripts/readium-fixed-wrapper-one.js | 2 +- .../Static/scripts/readium-fixed-wrapper-two.js | 2 +- Sources/Navigator/EPUB/EPUBFixedSpreadView.swift | 14 ++++++++++++-- Sources/Navigator/EPUB/Scripts/src/fixed-page.js | 2 -- Support/Carthage/.xcodegen | 5 ++--- Support/Carthage/Readium.xcodeproj/project.pbxproj | 6 ++---- 7 files changed, 19 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ed7b81585..8402ca779 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ All notable changes to this project will be documented in this file. Take a look * EPUB vertical text in scrolling mode: * [#556](https://github.com/readium/swift-toolkit/issues/556) Fixed reporting and restoring the reading progression. * Added support for decorations (highlights). +* [#635](https://github.com/readium/swift-toolkit/issues/635) Fixed overlapping FXL pages in landscape orientation. ## [3.3.0] diff --git a/Sources/Navigator/EPUB/Assets/Static/scripts/readium-fixed-wrapper-one.js b/Sources/Navigator/EPUB/Assets/Static/scripts/readium-fixed-wrapper-one.js index cb106f70b..a1f95ec21 100644 --- a/Sources/Navigator/EPUB/Assets/Static/scripts/readium-fixed-wrapper-one.js +++ b/Sources/Navigator/EPUB/Assets/Static/scripts/readium-fixed-wrapper-one.js @@ -1,2 +1,2 @@ -(()=>{"use strict";var t={};t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}();var e=function(t){var e=null,n=null,i=null,o=document.getElementById("page");o.addEventListener("load",(function(){var t=o.contentWindow.document.querySelector("meta[name=viewport]");if(t){for(var n,i=/(\w+) *= *([^\s,]+)/g,l={};n=i.exec(t.content);)l[n[1]]=n[2];var a=Number.parseFloat(l.width),s=Number.parseFloat(l.height);a&&s&&(e={width:a,height:s},r())}}));var l=o.closest(".viewport");function r(){if(e&&n&&i){o.style.width=e.width+"px",o.style.height=e.height+"px",o.style.marginTop=i.top-i.bottom+"px",o.style.marginLeft=i.left-i.right+"px";var t=n.width/e.width,l=n.height/e.height,r=Math.min(t,l);document.querySelector("meta[name=viewport]").content="initial-scale="+r+", minimum-scale="+r}}return{isLoading:!1,link:null,load:function(t,e){if(t.link&&t.url){var n=this;n.link=t.link,n.isLoading=!0,o.addEventListener("load",(function i(){o.removeEventListener("load",i),setTimeout((function(){n.isLoading=!1,o.contentWindow.eval(`readium.link = ${JSON.stringify(t.link)};`),e&&e()}),100)})),o.src=t.url}else e&&e()},reset:function(){this.link&&(this.link=null,e=null,o.src="about:blank")},eval:function(t){if(this.link&&!this.isLoading)return o.contentWindow.eval(t)},setViewport:function(t,e){n=t,i=e,r()},show:function(){l.style.display="block"},hide:function(){l.style.display="none"}}}();t.g.spread={load:function(t){0!==t.length&&e.load(t[0],(function(){webkit.messageHandlers.spreadLoaded.postMessage({})}))},eval:function(t,n){var i;if("#"===t||""===t||(null===(i=e.link)||void 0===i?void 0:i.href)===t)return e.eval(n)},setViewport:function(t,n){e.setViewport(t,n)}}})(); +(()=>{"use strict";var t={};t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}();var e=function(t){var e=null,n=null,i=null,o=document.getElementById("page");o.addEventListener("load",(function(){var t=o.contentWindow.document.querySelector("meta[name=viewport]");if(t){for(var n,i=/(\w+) *= *([^\s,]+)/g,l={};n=i.exec(t.content);)l[n[1]]=n[2];var a=Number.parseFloat(l.width),s=Number.parseFloat(l.height);a&&s&&(e={width:a,height:s},r())}}));var l=o.closest(".viewport");function r(){if(e&&n&&i){o.style.width=e.width+"px",o.style.height=e.height+"px",o.style.marginTop=i.top-i.bottom+"px";var t=n.width/e.width,l=n.height/e.height,r=Math.min(t,l);document.querySelector("meta[name=viewport]").content="initial-scale="+r+", minimum-scale="+r}}return{isLoading:!1,link:null,load:function(t,e){if(t.link&&t.url){var n=this;n.link=t.link,n.isLoading=!0,o.addEventListener("load",(function i(){o.removeEventListener("load",i),setTimeout((function(){n.isLoading=!1,o.contentWindow.eval(`readium.link = ${JSON.stringify(t.link)};`),e&&e()}),100)})),o.src=t.url}else e&&e()},reset:function(){this.link&&(this.link=null,e=null,o.src="about:blank")},eval:function(t){if(this.link&&!this.isLoading)return o.contentWindow.eval(t)},setViewport:function(t,e){n=t,i=e,r()},show:function(){l.style.display="block"},hide:function(){l.style.display="none"}}}();t.g.spread={load:function(t){0!==t.length&&e.load(t[0],(function(){webkit.messageHandlers.spreadLoaded.postMessage({})}))},eval:function(t,n){var i;if("#"===t||""===t||(null===(i=e.link)||void 0===i?void 0:i.href)===t)return e.eval(n)},setViewport:function(t,n){e.setViewport(t,n)}}})(); //# sourceMappingURL=readium-fixed-wrapper-one.js.map \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/scripts/readium-fixed-wrapper-two.js b/Sources/Navigator/EPUB/Assets/Static/scripts/readium-fixed-wrapper-two.js index 845f3537f..8ee445d82 100644 --- a/Sources/Navigator/EPUB/Assets/Static/scripts/readium-fixed-wrapper-two.js +++ b/Sources/Navigator/EPUB/Assets/Static/scripts/readium-fixed-wrapper-two.js @@ -1,2 +1,2 @@ -(()=>{"use strict";var t={};function e(t){var e=null,n=null,i=null,o=document.getElementById(t);o.addEventListener("load",(function(){var t=o.contentWindow.document.querySelector("meta[name=viewport]");if(t){for(var n,i=/(\w+) *= *([^\s,]+)/g,r={};n=i.exec(t.content);)r[n[1]]=n[2];var a=Number.parseFloat(r.width),s=Number.parseFloat(r.height);a&&s&&(e={width:a,height:s},l())}}));var r=o.closest(".viewport");function l(){if(e&&n&&i){o.style.width=e.width+"px",o.style.height=e.height+"px",o.style.marginTop=i.top-i.bottom+"px",o.style.marginLeft=i.left-i.right+"px";var t=n.width/e.width,r=n.height/e.height,l=Math.min(t,r);document.querySelector("meta[name=viewport]").content="initial-scale="+l+", minimum-scale="+l}}return{isLoading:!1,link:null,load:function(t,e){if(t.link&&t.url){var n=this;n.link=t.link,n.isLoading=!0,o.addEventListener("load",(function i(){o.removeEventListener("load",i),setTimeout((function(){n.isLoading=!1,o.contentWindow.eval(`readium.link = ${JSON.stringify(t.link)};`),e&&e()}),100)})),o.src=t.url}else e&&e()},reset:function(){this.link&&(this.link=null,e=null,o.src="about:blank")},eval:function(t){if(this.link&&!this.isLoading)return o.contentWindow.eval(t)},setViewport:function(t,e){n=t,i=e,l()},show:function(){r.style.display="block"},hide:function(){r.style.display="none"}}}t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}();var n={left:e("page-left"),right:e("page-right"),center:e("page-center")};function i(t){for(const e in n)t(n[e])}t.g.spread={load:function(t){function e(){n.left.isLoading||n.right.isLoading||n.center.isLoading||webkit.messageHandlers.spreadLoaded.postMessage({})}i((function(t){t.reset(),t.hide()}));for(const i in t){const o=t[i],r=n[o.page];r&&(r.show(),r.load(o,e))}},eval:function(t,e){if("#"===t||""===t)i((function(t){t.eval(e)}));else{var o=function(t){for(const o in n){var e,i=n[o];if((null===(e=i.link)||void 0===e?void 0:e.href)===t)return i}return null}(t);if(o)return o.eval(e)}},setViewport:function(t,e){t.width/=2,n.left.setViewport(t,{top:e.top,right:0,bottom:e.bottom,left:e.left}),n.right.setViewport(t,{top:e.top,right:e.right,bottom:e.bottom,left:0}),n.center.setViewport(t,{top:e.top,right:0,bottom:e.bottom,left:0})}}})(); +(()=>{"use strict";var t={};function e(t){var e=null,n=null,i=null,o=document.getElementById(t);o.addEventListener("load",(function(){var t=o.contentWindow.document.querySelector("meta[name=viewport]");if(t){for(var n,i=/(\w+) *= *([^\s,]+)/g,r={};n=i.exec(t.content);)r[n[1]]=n[2];var a=Number.parseFloat(r.width),s=Number.parseFloat(r.height);a&&s&&(e={width:a,height:s},l())}}));var r=o.closest(".viewport");function l(){if(e&&n&&i){o.style.width=e.width+"px",o.style.height=e.height+"px",o.style.marginTop=i.top-i.bottom+"px";var t=n.width/e.width,r=n.height/e.height,l=Math.min(t,r);document.querySelector("meta[name=viewport]").content="initial-scale="+l+", minimum-scale="+l}}return{isLoading:!1,link:null,load:function(t,e){if(t.link&&t.url){var n=this;n.link=t.link,n.isLoading=!0,o.addEventListener("load",(function i(){o.removeEventListener("load",i),setTimeout((function(){n.isLoading=!1,o.contentWindow.eval(`readium.link = ${JSON.stringify(t.link)};`),e&&e()}),100)})),o.src=t.url}else e&&e()},reset:function(){this.link&&(this.link=null,e=null,o.src="about:blank")},eval:function(t){if(this.link&&!this.isLoading)return o.contentWindow.eval(t)},setViewport:function(t,e){n=t,i=e,l()},show:function(){r.style.display="block"},hide:function(){r.style.display="none"}}}t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}();var n={left:e("page-left"),right:e("page-right"),center:e("page-center")};function i(t){for(const e in n)t(n[e])}t.g.spread={load:function(t){function e(){n.left.isLoading||n.right.isLoading||n.center.isLoading||webkit.messageHandlers.spreadLoaded.postMessage({})}i((function(t){t.reset(),t.hide()}));for(const i in t){const o=t[i],r=n[o.page];r&&(r.show(),r.load(o,e))}},eval:function(t,e){if("#"===t||""===t)i((function(t){t.eval(e)}));else{var o=function(t){for(const o in n){var e,i=n[o];if((null===(e=i.link)||void 0===e?void 0:e.href)===t)return i}return null}(t);if(o)return o.eval(e)}},setViewport:function(t,e){t.width/=2,n.left.setViewport(t,{top:e.top,right:0,bottom:e.bottom,left:e.left}),n.right.setViewport(t,{top:e.top,right:e.right,bottom:e.bottom,left:0}),n.center.setViewport(t,{top:e.top,right:0,bottom:e.bottom,left:0})}}})(); //# sourceMappingURL=readium-fixed-wrapper-two.js.map \ No newline at end of file diff --git a/Sources/Navigator/EPUB/EPUBFixedSpreadView.swift b/Sources/Navigator/EPUB/EPUBFixedSpreadView.swift index fc4264742..589d76a58 100644 --- a/Sources/Navigator/EPUB/EPUBFixedSpreadView.swift +++ b/Sources/Navigator/EPUB/EPUBFixedSpreadView.swift @@ -77,8 +77,18 @@ final class EPUBFixedSpreadView: EPUBSpreadView { guard isWrapperLoaded else { return } - // Insets the bounds by the notch area (eg. iPhone X) to make sure that the content is not overlapped by the screen notch. - let insets = notchAreaInsets + + // Insets the bounds by the notch area (eg. iPhone X) to make sure that + // the content is not overlapped by the screen notch. + var insets = notchAreaInsets + + // Use the same insets on the left and right side (the largest one) to + // keep the pages centered on the screen even if the notches are not + // symmetrical. + let horizontalInsets = max(insets.left, insets.right) + insets.left = horizontalInsets + insets.right = horizontalInsets + let viewportSize = bounds.inset(by: insets).size webView.evaluateJavaScript(""" diff --git a/Sources/Navigator/EPUB/Scripts/src/fixed-page.js b/Sources/Navigator/EPUB/Scripts/src/fixed-page.js index 7a88d9188..f5bc1c12e 100644 --- a/Sources/Navigator/EPUB/Scripts/src/fixed-page.js +++ b/Sources/Navigator/EPUB/Scripts/src/fixed-page.js @@ -52,8 +52,6 @@ export function FixedPage(iframeId) { _iframe.style.height = _pageSize.height + "px"; _iframe.style.marginTop = _safeAreaInsets.top - _safeAreaInsets.bottom + "px"; - _iframe.style.marginLeft = - _safeAreaInsets.left - _safeAreaInsets.right + "px"; // Calculates the zoom scale required to fit the content to the viewport. var widthRatio = _viewportSize.width / _pageSize.width; diff --git a/Support/Carthage/.xcodegen b/Support/Carthage/.xcodegen index 8bc695f3b..45442c230 100644 --- a/Support/Carthage/.xcodegen +++ b/Support/Carthage/.xcodegen @@ -1,5 +1,5 @@ # XCODEGEN VERSION -2.43.0 +2.44.1 # SPEC { @@ -408,11 +408,9 @@ ../../Sources/Navigator/EditingAction.swift ../../Sources/Navigator/EPUB ../../Sources/Navigator/EPUB/Assets -../../Sources/Navigator/EPUB/Assets/.DS_Store ../../Sources/Navigator/EPUB/Assets/fxl-spread-one.html ../../Sources/Navigator/EPUB/Assets/fxl-spread-two.html ../../Sources/Navigator/EPUB/Assets/Static -../../Sources/Navigator/EPUB/Assets/Static/.DS_Store ../../Sources/Navigator/EPUB/Assets/Static/fonts ../../Sources/Navigator/EPUB/Assets/Static/fonts/OpenDyslexic-Bold.otf ../../Sources/Navigator/EPUB/Assets/Static/fonts/OpenDyslexic-BoldItalic.otf @@ -470,6 +468,7 @@ ../../Sources/Navigator/EPUB/Preferences/EPUBPreferencesEditor.swift ../../Sources/Navigator/EPUB/Preferences/EPUBSettings.swift ../../Sources/Navigator/EPUB/Scripts +../../Sources/Navigator/EPUB/Scripts/.DS_Store ../../Sources/Navigator/EPUB/Scripts/.eslintrc.json ../../Sources/Navigator/EPUB/Scripts/.gitignore ../../Sources/Navigator/EPUB/Scripts/.prettierignore diff --git a/Support/Carthage/Readium.xcodeproj/project.pbxproj b/Support/Carthage/Readium.xcodeproj/project.pbxproj index 89acb4254..a6dae264e 100644 --- a/Support/Carthage/Readium.xcodeproj/project.pbxproj +++ b/Support/Carthage/Readium.xcodeproj/project.pbxproj @@ -3,7 +3,7 @@ archiveVersion = 1; classes = { }; - objectVersion = 54; + objectVersion = 77; objects = { /* Begin PBXBuildFile section */ @@ -2289,8 +2289,6 @@ attributes = { BuildIndependentTargetsInParallel = YES; LastUpgradeCheck = 1250; - TargetAttributes = { - }; }; buildConfigurationList = 5A872BCD95ECE5673BC89051 /* Build configuration list for PBXProject "Readium" */; compatibilityVersion = "Xcode 14.0"; @@ -2303,7 +2301,7 @@ ); mainGroup = 2C63ECC3CC1230CCA416F55F; minimizedProjectReferenceProxies = 1; - preferredProjectObjectVersion = 54; + preferredProjectObjectVersion = 77; projectDirPath = ""; projectRoot = ""; targets = (