r2-testapp-swift
r2-testapp-swift copied to clipboard
RTL
We need _WKPaginationMode for WKWebView, but it's still private API.
https://opensource.apple.com/source/WebKit2/WebKit2-7601.1.46.9/UIProcess/API/Cocoa/WKWebViewPrivate.h
Here is the equivalent API for UIWebView.
https://developer.apple.com/documentation/uikit/uiwebpaginationmode
So, the best solution should be CSS&JS.
First, we should check that the streamer exposes the necessary data for RTL publications. Jiminy has exposed in https://github.com/readium/readium-css/wiki/Internationalization,-pagination-and-user-settings the process that will end-up deciding if a publication is RTL. Is is properly implemented in the streamer? What is the manifest property which exposes this fact? -> Senda, can you please check that as a first issue in this epic?
Then we'll have to handle RTL at the level of the triptych view. The order of the webviews is reversed if RTL is set at the manifest level. -> this is a second issue in this epic.
Are there others?
Hadrien thinks that working on the triptych view. for RTL is a first step toward managing FXL with spreads (2 pages); the latter requires adding more webviews to the mix: the triptych become a multi-panel system, with à priori 6 panels (2 + 2 + 2). Therefore the developer who starts this work for RTL should be the one who will tackle the complexity of FXL with spreads: this makes sense. In this case it should be Geoffrey, who will still be with us after August.
OK. My current code is based on page-progression-direction
. For the old code and my new code, there is no logic for different languages. We just need adding the logic for different lang.
My work on triptych could be treated as almost done, if the CSS for CJK could solve RTL paging flow inside one WebView.
For the Streamer, what need to be done it's pretty straightforward. A lot small changes.
It needs 4 different css sets for ltr
, rtl
, cjk-vertical
, cjk-horizontal
. And inject it for different case. In short, they need different URLs.
The Streamer server should able to serve different css for different URL. Currently, the code is not designed for it.
The Streamer should modify xhtml element in case something is missing.
https://github.com/iaomw/r2-shared-swift/commit/02dd74416025683509b6878b8197ba38e4633051 https://github.com/iaomw/r2-streamer-swift/commit/b2c51bc5737b06a3f83153d53b28721420bc6496 https://github.com/iaomw/r2-navigator-swift/commit/3f2eddb4f7f8eaf288ef32b8d4754b49886a5670
Those WIP commits has RTL partially supported.
What has been done:
- Expose
page-progression-direction
and primary language. - Get correct CSS location based on the combination of
language
andpage-progression-direction
. - Inject the correct CSS for different webpage.
- Use RTL for WebViews inside TriptychView when it should be.
What is missing: Check All languages other than Latin
section under this document.
https://github.com/readium/readium-css/wiki/Internationalization,-pagination-and-user-settings
- Adding or changing some xml attribute when should.
- Disable or adding some CSS properties when should.
Problems:
- When using RTL, book cover position is not correct but the container Webview has correct position and size. Possible CSS issue.
- The RTL CSS cannot change paging flow into RTL flow inside one WebView. Maybe, it could be solved by disabling bad enabling the CSS properties mentioned in Jiminy's document. Checking...
Here is the equivalent API for UIWebView.
Note that behind the scenes, they’re using those CSS multicol extensions.
But we agreed to not use them as they can’t be used anywhere else (they’re non-standard) – also, those are pretty much the properties you need to solve the EPUB3’s Test Suite 130 mixed writing-modes with CSS so if we don’t have them on other platforms, it’s simply unsolvable without JS.