diff --git a/CHANGELOG.md b/CHANGELOG.md index e5dd4c491a..e997fc85d7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,16 @@ All notable changes to this project will be documented in this file. Take a look at [the migration guide](docs/Migration%20Guide.md) to upgrade between two major versions. - +## [Unreleased] + +### Changed + +#### Navigator + +* In the paginated EPUB navigator, the number of columns no longer depends on the dimensions of the device screen, which are unreliable on the iPhone Duo and in a resizable window such as Split View or Stage Manager. Two columns are displayed when the navigator is in landscape and at least 950px wide, or when its viewport is split into two panels by a fold. + * The threshold was lowered from 960px, so that an iPhone Duo unfolded in landscape displays two columns. + * A navigator in portrait now always displays a single column, including on a 13-inch iPad which previously displayed two. + * A single column is still used when two of them would no longer fit at the current font size. ## [4.0.0-alpha.2] - 2026-09-18 diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-after.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-after.css index eb6124c286..ea18b6e7ae 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-after.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-after.css @@ -192,7 +192,7 @@ body { /* Responsive columns */ -@media screen and (min-width: 60em), screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape) { +@media screen and (min-width: 59.375em) and (orientation: landscape), screen and (horizontal-viewport-segments: 2) { :root { /* The size at which we want 2 columns to switch to 1 (depending on font-size) */ --RS__colWidth: 20em; /* 20 * 16 = 320px but 20 * 28 = 560px so it will switch to 1 col @ 175% font-size (user-setting) on an iPad */ @@ -447,7 +447,7 @@ body { /* apply col setting except for mobile portrait */ -@media screen and (min-width: 60em), screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape) { +@media screen and (min-width: 59.375em) and (orientation: landscape), screen and (horizontal-viewport-segments: 2) { :root[style*="--USER__colCount: 1"], :root[style*="--USER__colCount:1"], :root[style*="--USER__colCount: 2"], diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-after.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-after.css index 47867bfd54..0777b4a94a 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-after.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-after.css @@ -192,7 +192,7 @@ body { /* Responsive columns */ -@media screen and (min-width: 60em), screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape) { +@media screen and (min-width: 59.375em) and (orientation: landscape), screen and (horizontal-viewport-segments: 2) { :root { /* The size at which we want 2 columns to switch to 1 (depending on font-size) */ --RS__colWidth: 20em; /* 20 * 16 = 320px but 20 * 28 = 560px so it will switch to 1 col @ 175% font-size (user-setting) on an iPad */ @@ -447,7 +447,7 @@ body { /* apply col setting except for mobile portrait */ -@media screen and (min-width: 60em), screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape) { +@media screen and (min-width: 59.375em) and (orientation: landscape), screen and (horizontal-viewport-segments: 2) { :root[style*="--USER__colCount: 1"], :root[style*="--USER__colCount:1"], :root[style*="--USER__colCount: 2"], diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-after.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-after.css index 92ea61f138..62a9236a17 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-after.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-after.css @@ -192,7 +192,7 @@ body { /* Responsive columns */ -@media screen and (min-width: 60em), screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape) { +@media screen and (min-width: 59.375em) and (orientation: landscape), screen and (horizontal-viewport-segments: 2) { :root { /* The size at which we want 2 columns to switch to 1 (depending on font-size) */ --RS__colWidth: 20em; /* 20 * 16 = 320px but 20 * 28 = 560px so it will switch to 1 col @ 175% font-size (user-setting) on an iPad */ @@ -447,7 +447,7 @@ body { /* apply col setting except for mobile portrait */ -@media screen and (min-width: 60em), screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape) { +@media screen and (min-width: 59.375em) and (orientation: landscape), screen and (horizontal-viewport-segments: 2) { :root[style*="--USER__colCount: 1"], :root[style*="--USER__colCount:1"], :root[style*="--USER__colCount: 2"],