Broken pagination (CSS columns) with Right To Left page progression direction and vertical writing mode about readium-shared-js

[danielweck]

Please remember to check the "old" discussion thread (which wasn't imported here when the issue was moved):
readium/readium-js-viewer#51

[danielweck]

Devs, see updatePagination() in reflowable_view.js
var columnizedContentWidth = _$epubHtml[0].scrollWidth
==> does not return the correct value in this particular case. However, these are correct:
$("body", _$epubHtml)[0].offsetWidth
$("body", _$epubHtml)[0].getBoundingClientRect().width
...unfortunately, even with overflow-x:visible, the CSS "right" offset (x axis) is not set correctly when switching pages.

This bug affects all WebKit-based web browser and WebViews, except Safari (at the moment).

[danielweck]

Update: I have implemented a workaround which seems to work great. Testing now... (not just Japanese vertical writing, also Arabic Right To Left)

[danielweck]

Fixed:
763d5b4

Could you please test the develop branch with Japanese ebooks that use vertical writing mode + Right To Left page progression direction (and optionally, HTML dir="rtl").

I personally tested several of those, one Arabic ebook, and several "regular" LTR reflowable ebooks with single-page and double-page (synthetic-spread).

Known caveat: deep linking into vertical-RTL documents is likely to fail, due to our existing "rectangle visibility" algorithm only suiting horizontal layout.