Two columns are not displayed on the iPhone Duo unfolded in landscape

[mickael-menu]

Describe the bug

On the iPhone Duo unfolded in landscape, Readium CSS v1 shows a single column across the full width, even if two columns are forced. We expect two columns, as on an iPad in landscape.

Viewport dimensions measured on the device:

• viewport: 951×545 (inner display)
• screen: 466×678 (cover display)

Since Readium CSS v2 no longer handles automatic columns with media queries, this would be a hotfix on top of the latest v1 version, for clients that can't migrate to v2 before the Duo ships.

How to reproduce?

1. Open any reflowable EPUB in a paginated reading app that uses Readium CSS v1 (e.g. the Readium Swift toolkit Test App).
2. Unfold the iPhone Duo and rotate to landscape.
3. Keep the default column count (auto) and font size.
4. The text is laid out in a single column across the viewport.

Readium CSS version

1.1.0

Platforms

iOS 27.1

Browsers

WebKit (WKWebView)

Additional context

The Swift toolkit has a proposed fix in readium/swift-toolkit#903. It swaps both media queries for a viewport-based one:

@media screen and (min-width: 59.375em) and (orientation: landscape), screen and (horizontal-viewport-segments: 2) {

• The query no longer uses device-width or device-height.
• The threshold drops from 960px to 950px (59.375em), so the Duo's 951px viewport matches.
• Two columns now require landscape. As a side effect, a 13" iPad in portrait (1032px wide) gets one column instead of two.
• A horizontal-viewport-segments: 2 arm handles the half-folded posture.

Something to decide before merging:

• Is the iPad portrait change acceptable, or should portrait keep two columns above some larger width?

[JayPanoz]

As a side effect, a 13" iPad in portrait (1032px wide) gets one column instead of two

There should be another side effect with iPhone Pro Max (956px) getting two columns in landscape if I’m not mistaken?

We could have something like this:

@media screen and (min-width: 58em),
screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape),
screen and (horizontal-viewport-segments: 2)

It protects iPad in theory, but not Pro Max and Plus models.

Or

@media screen and (min-width: 58em) and (min-height: 30em),
screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape),
screen and (horizontal-viewport-segments: 2)

That fixes it. But then on desktop, windows under 480px tall lose two columns.

@media screen and (min-width: 58em) and (max-aspect-ratio: 2/1),
screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape),
screen and (horizontal-viewport-segments: 2)

Aspect ratio makes the previous one a little less impactful to desktop – although, ultra wide screens will be.

If I remove the query on the column setting, it kinda gets around it, as then you could override and set 2 columns.

Will dig a little deeper and report.

[HadrienGardeur]

Is the iPad portrait change acceptable, or should portrait keep two columns above some larger width?

It's acceptable and might even be preferrable.

IMO, we shouldn't display two columns for any iPad model in portrait mode or for any iPhone (other than an opened Duo) in landscape mode.

Of course things will be different with Readium CSS v2 since this gives a lot more power in the hands of implementers.