Re: CSS pagination and adaptive column layout (Opera demo)

Daniel Weck wrote:

 > 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/

Thanks, working on the release and writing the demos has been great
fun, and I hope many people on this list try ir out -- and make even
more exiting documents! It takes CSS and the web into areas we have
not explored before.

 > 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?).

It's a bug, at some point in the documents links stop working when one
has top/bottom-floating elements. 

 > * 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?

In the GCPM draft, I've sketched some "page shift effects"

  http://dev.w3.org/csswg/css3-gcpm/#page-shift-effects

So, I think the transitions should be described in style sheets.
Setting timing (max-time) perhaps, seem like a useful addition.
Perhaps we can somehow tie it into CSS transitions?:

  http://dev.w3.org/csswg/css3-transitions/

 > * 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.

I agree. This is implemented, to some extent: PgUp/PgDn get you to the
next/previuos page (within the document)

 > * 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.

This can be achieved in two ways in the current implementaions;
through hard-coded controls, or by using the API. here are some
examples:

  http://people.opera.com/howcome/2011/reader/ex/ex-overflow-c.html
  http://people.opera.com/howcome/2011/reader/ex/ex-js.html

 > * 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.

Hmm. It's a labs build, so some things don't work optimally. I agree
it would be useful to have zooming work as you describe.

 > * 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.

Likewise.

 > * 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).

Yup.

Thanks for your feedback. Did you make some pages of your own?

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Wednesday, 19 October 2011 16:35:43 UTC