Feature: 2+ columns

[alfureu]

Enjoying the app, however, reading is a bit clumsy on an ultrawide screen (21:9 and beyond). There is a super-wide white space between the 2 columns (1 column reading has even more white space).

Would it be possible to introduce multiple columns, defined as the width+space by the user. This would ensure that there can be as many columns as the user wishes and as many they can fit on the screen.

[danielweck]

This is a good feature request. I too would prefer more than 2 columns of text, in order to make use of greater horizontal screen real estate (assuming an optimised maximum width per column is used, so that each "run" of text / character length does not require excessive horizontal eye scanning).

Unfortunately, as a codebase "insider" I can tell you that implementing this would require significant changes in how CSS colums are reflowed in the "navigator" component, so I wouldn't like to give you the impression that this will be done anytime soon.

There is however a way to mitigate the problem of narrow columns of text, and wide "margins" (i.e. left and right blank spaces). We should probably expose a toggle switch in the display configuration to disable the default "auto margin" behaviour, which wastes considerable space on the left and right hand side of the page spread. The downside is that runs of text (i.e. individual column width) can become very long and hard to read on wide displays. So maybe instead of completely disabling the maximum column width, it would be better to allow the user to increase the default number?

@JayPanoz ?

https://github.com/readium/readium-css

[alfureu]

Thanks for the input and the support for this request. Any suggestion is more than welcome as currently the rendering is as follows:

You can clearly see that there is a space for one more (if not more) column. I did not know about the difficulties about the CSS reflow, I thought this should not be so difficult. Looking forward to further development!

[JayPanoz]

So maybe instead of completely disabling the maximum column width, it would be better to allow the user to increase the default number?

The complexity, kinda, is that it has to be handled as a system starting from the default we expose to Reading Systems – and that they can change.

https://github.com/readium/readium-css/blob/583011453612e6f695056ab6c086a2c4f4cac9c0/css/src/modules/ReadiumCSS-pagination.css#L16-L31

Columns are oddly easy to deal with, because column-count wins over column-width so the variable to target is --RS__maxLineLength in that case.

However, we had relayout issues (doc didn’t get refragmented + loss of elements relying on GPU rendering e.g. filter) for the column user setting so I had to force a raw value at the time – and I can’t tell right now whether it’s been fixed or not, or if a custom property is OK.

https://github.com/readium/readium-css/blob/583011453612e6f695056ab6c086a2c4f4cac9c0/css/src/modules/user-settings-submodules/ReadiumCSS-colNumber_pref.css#L24-L29

But yeah, AS-IS with this hack, it means it would be broken for one-col user setting so it has to be reworked first.

[espso]

A setting to increase column would be nice, especially for wider screens?