How override `vertical-rl` from `ReadiumCSS-pagination-vertical.css` with `vertical-lr`

[shovel-kun]

Hi,

I'm trying to fix scrolling of vertical text in kotlin-toolkit.

ReadiumCss.kt is responsible for setting stylesheet based on EpubSettings. By default, it sets writing-mode: vertical-rl (except for Mongolian).

However, there may be the case where the user specifies ReadingProgression to be LTR. Thus, we need to override writing-mode: vertical-rl with writing-mode: vertical-lr so that the page flows from left to right while still being vertical text.

Luckily, we are able to get the requested ReadingProgression from Layout, so I think its a matter of injecting CSS into the HTML, but not sure if that's the desired way to do this.

Brought from readium/kotlin-toolkit#656.

[JayPanoz]

Ah right. This is defined in the pagination-vertical module indeed.

For context: at the time we first dealt with vertical writing, we didn't necessarily take some corner cases into account, and we even decided to enforce some styles/heuristics because we did not want mixed writing modes, direction, etc. happening in the same publication. Nobody knew how to properly manage that, hence why we have lots of rules for right to left and vertical writing.

That was part of the things we decided to enforce, at any cost.

So in practice the stylesheets for vertical writing should be loaded following these rules, based on the metadata (language, progression direction), and we enforce vertical-rl to make sure the app does not encounter an issue if the authors' CSS is declaring vertical-lr as it is then considered mixed writing mode (conflicting with the global progression direction from the opf).

Unlike XML lang or dir attributes, that are appended by apps when missing, we decided to handle this directly in ReadiumCSS because it is a pain to handle programmatically.

It is using !important though, so it still is overridable if needed, by using the same selector or a stronger one after ReadiumCSS-after.css. if I'm not mistaken there is an example with audio controls that does such an override in Kotlin.

It would be a breaking change if we removed it from src, and should consequently be handled in the beta of version 2, that is not yet implemented in the mobile toolkits, with proper documentation, that is to say new heuristics.

I am not against removing it, on the opposite it would make it a lot simpler to consolidate all stylesheets into a single set for all languages, which is something we'd really like to do.

But in any way it would be a good idea to manage this issue across projects so that all can benefit. We had to backport some features and bug fixes a few months ago and it would be a shame if we had to come back at it later while we are still in beta.

[shovel-kun]

Noted, for now I'll just override the CSS with vertical-lr if the user requests such. I'll look for the example. Thanks for the pointers!