Layout problem with CJK Punctuation

[toshiakikoike]

This issue is a Bug

Expected Behaviour

Please open this sample file by Chrome/Chromium; https://github.com/toshiakikoike/epub_file/blob/master/cjk-punctuation/OEBPS/text/book_0002.xhtml

Observed behaviour

https://github.com/toshiakikoike/epub_file/blob/master/cjk-punctuation.epub last punctuation(U+3002 IDEOGRAPHIC FULL STOP) show at the top

Test file(s)

https://github.com/toshiakikoike/epub_file/blob/master/cjk-punctuation.epub

Product

• Readium Chrome extension

  • latest official version available from the Chrome Web Store

• Readium cloud reader app

  • latest development build uploaded at https://github.com/readium/readium-js-viewer

Additional information

This markup is a little tricky.

html { -epub-writing-mode:horizontal-tb; -webkit-writing-mode:horizontal-tb; } div.chapt { width: auto; height: 100%; margin-right: auto; margin-left: auto; text-align: left; -epub-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; }

But useful in Japan for vertically oriented pages centered horizontally. Unfortunately, few reading systems support "rendition:align-x-center" function.

[danielweck]

cloud reader link: https://readium.firebaseapp.com/?epub=https%3A%2F%2Frawgit.com%2Ftoshiakikoike%2Fepub_file%2Fmaster%2Fcjk-punctuation.epub

[danielweck]

I am not able to reproduce this bug in Readium2's Electron-based (Chromium) desktop app (not yet released, internal alpha testing only).

Also, the problem only occurs in Readium1 (cloud reader, Chrome app, and I assume native apps that use readium-shared-js as well) in the paginated view, not the scroll mode. Test link:

https://readium.firebaseapp.com/?epub=https%3A%2F%2Frawgit.com%2Ftoshiakikoike%2Fepub_file%2Fmaster%2Fcjk-punctuation

So, I suspect that this is the code responsible for this rendering quirk (column-axis CSS layout):

https://github.com/readium/readium-shared-js/blob/60463c27e4417102f47df9c51e9953b2b467def2/js/views/reflowable_view.js#L385

[danielweck]

Culprit: <spine page-progression-direction="rtl"> https://github.com/toshiakikoike/epub_file/blob/master/cjk-punctuation/OEBPS/cjk-punctuation.opf#L29

...Readium then injects dir="rtl" in body element, which causes problem with punctuation (top instead of bottom).

Test with: https://rawgit.com/toshiakikoike/epub_file/master/cjk-punctuation/OEBPS/text/book_0002.xhtml ...and add direction: rtl in web inspector body CSS

[danielweck]

Bug fix: https://github.com/readium/readium-shared-js/blob/60463c27e4417102f47df9c51e9953b2b467def2/js/views/reflowable_view.js#L366

Must not inject body@dir="rtl"