CSS pagination and adaptive column layout (Opera demo)

I just gave a try to this experimental Opera build, and it is pretty darn exiting! :)
(the article is a good read too)

http://people.opera.com/howcome/2011/reader/

Web "book-like" pagination currently relies on tricky JavaScript and heavy DOM mutations (see Monocle, BookWorm, IbisReader, etc.), so implementors of e-book reading systems will love the CSS pagination feature!

The Opera demo is also a great showcase for adaptive column layout (automatic adjustment depending on font-size and viewport dimensions).

I tested the demo on my 7" Android tablet, and on Mac OS X Lion.

A few things I noticed:

* Click event / text selection => on Mac OS X, I cannot click on links or select text once I have switched a page (even swallowing issue?).

* Animated scroll-into-view => I edited the HTML source to add an anchor somewhere in the middle of the content, and I am glad to see that typing-in a URL with the corresponding fragment identifier results in the correct page being displayed. However, I am concerned that the animated transition which reveals a new page gets extremely annoying with large text bodies (as it is typically the case with e-books). Is the duration of the animation fixed, regardless of the number of pages to flip? As far as I can tell, this animation is not authored, it is dictated by the user-agent, right? (this would be the same behavior as regular horizontal/vertical "scroll-into-view", which some web browsers animate, whilst others don't)

* User controls => on non-tablet environments, it would be nice if the traditional "scroll" gestures triggered the left/right page transitions (just like regular horizontal scrolling). On my laptop, this would be the two-finger touchpad swipe, but this also includes old-fashion mouse-wheel, trackball, Apple "mighty mouse", etc.

* User-interface affordance => because of the lack of traditional "scroll" control, there is no visual indicator to let the user know the current page position. Usually, this would be a scrollbar, but any other suitable user interface metaphor would do.

* Multitouch pinch/zoom => I'm not sure why, but I cannot use pinch+zoom to change the text size on Android (whereas I can with the multitouch pad on my Mac OS X laptop). This forces me to go to the Opera application menu, just to change the zoom level in order to test the re-pagination process. Note that pinch-zoom works fine with other web pages in Opera/Android.

* Android misaligned page top => after changing the font size, I have to reload the content because otherwise the top part of the text is clipped.

* Collateral damage from the above issue: because the current page is not "memorized" by the browser, reloading the content forces me to start from the first page again (nowadays, browsers universally tend to remember the scroll position even after content reload, so I would expect pagination to behave similarly).

* Gray menu interference (nitpicking, I know...just a way to improve the demo a little :) => depending on the available screen space and content zoom, the gray menu interferes with the pagination because its own scroll area affects the whole viewport (instead of the menu DIV only). On Android in portrait mode (narrow screen space), the gray menu is anchored at the top which results in the vertical scrollbar moving slightly for the whole viewport (creating confusion when the user swipes left or right). On both Android and Mac OS X (and I assume Linux/Windows as well), when the grey menu is anchored on the left (landscape mode), and when the there is not enough vertical space to fit the entire menu contents, the whole content scrolls vertically (which defies the whole point of demonstrating 100% height fit for the paginated content).


Cheers!
Dan

Received on Wednesday, 19 October 2011 15:58:12 UTC