Visibility computations by client rectangles, vertical writing mode (column layout)

[danielweck]

@yuriyp
@idov-isd

Yuri, Igor?

Given your past contributions to the "rectangle" algorithms in CfiNavigationLogic, any chance you could help me figure-out how to implement support for vertical writing mode + right-to-left text/page progression?

#16

I would really appreciate your help, as this is a blocking issue that prevents supports for Japanese EPUBs:
not just Media Overlays, but also linking (TOC), bookmarks, etc. (anything that requires mapping an element to a page/column number)

I started a feature branch:

https://github.com/readium/readium-shared-js/tree/feature/verticalColumns

...and as you can see I did not get very far:

c6a52be

Test EPUB (chapter 1,2,3 with Media Overlays):

kusamakura-japanese-vertical-writing-20121124
https://code.google.com/p/epub-samples/downloads/detail?name=kusamakura-japanese-vertical-writing-20121124.epub

In a nutshell: the CSS columns width is actually their height, because of the vertical flow (they are visually stacked from top to bottom). The text goes from right to left, and flows in thin top-to-bottom columns. There is no two-page spread, only a single column per visible viewport.

Many thanks!
Regards, Daniel

[idov-isd]

Hi Daniel, sorry for being silent - just got back from a vacation.
I’ll check the issue and get back to you - hopefully, with a couple of ideas how to resolve it. )

-- iD

From: danielweck [mailto:notifications@github.com]
Sent: Saturday, August 2, 2014 1:49 AM
To: readium/readium-shared-js
Cc: Igor Dovgyy
Subject: [readium-shared-js] Visibility computations by client rectangles, vertical writing mode (column layout) (#87)

@yuriyphttps://github.com/yuriyp
@idov-isdhttps://github.com/idov-isd

Yuri, Igor?

Given your past contributions to the "rectangle" algorithms in CfiNavigationLogic, any chance you could help me figure-out how to implement support for vertical writing mode + right-to-left text/page progression?

#16#16

I would really appreciate your help, as this is a blocking issue that prevents supports for Japanese EPUBs:
not just Media Overlays, but also linking (TOC), bookmarks, etc. (anything that requires mapping an element to a page/column number)

I started a feature branch:

https://github.com/readium/readium-shared-js/tree/feature/verticalColumns

...and as you can see I did not get very far:

c6a52behttps://github.com/readium/readium-shared-js/commit/c6a52be291b871eeac12738175c530eb8d35139b

Test EPUB (chapter 1,2,3 with Media Overlays):

kusamakura-japanese-vertical-writing-20121124
https://code.google.com/p/epub-samples/downloads/detail?name=kusamakura-japanese-vertical-writing-20121124.epub

In a nutshell: the CSS columns width is actually their height, because of the vertical flow (they are visually stacked from top to bottom). The text goes from right to left, and flows in thin top-to-bottom columns. There is no two-page spread, only a single column per visible viewport.

Many thanks!
Regards, Daniel

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/87.

[danielweck]

Many thanks @idov-isd
On first impression, this looks like a simple problem to solve (inversion of width/height axis), but of course clientRectangles are not consistent across browsers, and CfiNavigationLogic must be modified to support vertical writing mode without inadvertently introducing regression bugs in horizontal writing mode (RTL or LTR).
Oh, note that vertical writing mode is currently only supported in WebKit / Blink browsers, so I would suggest focusing on Safari, Chrome, Opera, etc. (you can definitely ignore Firefox for now...plus, our development priority at this moment in time is the Chrome extension!)
:)

[danielweck]

Related issue (closed as duplicate):
#67

[jccr]

I've patched cfi_navigation_logic to support visibility detection in vertical writing mode: 9e4dfb7

I'm still working on the navigational aspects (findPageByRectangles) c0201f7

[jccr]

I've tested vertical writing with RTL and LTR progression (used this hacked up version for LTR tests: https://drive.google.com/file/d/0BwtT87vbGnJuZFdoZVFWSnNaelU/edit?usp=sharing)

With my latest commit on the feature/vertical-writing-client-rects I believe this takes care of the media overlay issues, can you confirm @danielweck? I'm now going to test bookmarking, and TOC linking but I am expecting those to work too.

There is something I left out for now though: Vertical writing mode + "trimming rectangles by a vertical offset", this is only needed when the getPageForPointOnElement call is used (which doesn't seem to be used in readium for now).

[danielweck]

Closed by Pull Request:
#113