My OperaThe My Opera forums have been replaced with forums.opera.com. Please head over there to discuss Opera's products and features
See the new ForumsThis topic has been closed. No new entries allowed.
Reason: You can now post comments on articles on Dev Opera
You need to be logged in to post in the forums. If you do not have an account, please sign up first.
Opera Reader: a new way to read the Web!
In this article, we'd like to present Opera Reader, a new technology that builds on top of CSS to allow us to split content into pages that can be "turned" in a natural manner through gestures rather than point and click, control the positioning/floating of figures in multi-column layouts more precisely and provide a consistent navigation system for such content that is independent of your documents.( Read the article )
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Nice article Chris/Håkon,
I'm going to try to play with it when I get time.
Few minor comments on the article:
You have a stray "/code/code/code" at the bottom of the article.
You say "The column ruleset looks like so (multiple vendor prefixes removed for brevity):". the multi-column properties are in an -o- @ rule, so it will only apply to Opera, so only the non-prefixed versions are needed anyway.
Usability wise I see a couple of issues. Without controls it is really hard to know you can swipe to go to the next page. This is worse on desktop as swiping doesn't work either. You need to do some click push movement with the trackpad/mouse. If there is an image where you try that, like the oliver twist firstp age then it will drag the image instead. Touch events would probably help solve this so you can do the swipe gesture via a trackpad, but I don't think Opera desktop supports touch events?
The other issue is about getting back to the page you were on. Unlike regular web pages the URL doesn't change. To go back to page 100 you have to swipe 100 times. You can use IDs to go directly to that element, and this works, but normal users are not going to know to inspect element, and pull out the id and add it to the url field. Being able to book mark a page might be nice, but then I realized that as the pages are not a set size like a book, if I resize the browser window then the page count changes and I'd not end up at the same place anyway. Some thought will have to go into that. I think eBooks suppose to handle this quite well, but I don't own one so I'm not sure.
I'm going to try to play with it when I get time.
Few minor comments on the article:
You have a stray "/code/code/code" at the bottom of the article.
You say "The column ruleset looks like so (multiple vendor prefixes removed for brevity):". the multi-column properties are in an -o- @ rule, so it will only apply to Opera, so only the non-prefixed versions are needed anyway.
Usability wise I see a couple of issues. Without controls it is really hard to know you can swipe to go to the next page. This is worse on desktop as swiping doesn't work either. You need to do some click push movement with the trackpad/mouse. If there is an image where you try that, like the oliver twist firstp age then it will drag the image instead. Touch events would probably help solve this so you can do the swipe gesture via a trackpad, but I don't think Opera desktop supports touch events?
The other issue is about getting back to the page you were on. Unlike regular web pages the URL doesn't change. To go back to page 100 you have to swipe 100 times. You can use IDs to go directly to that element, and this works, but normal users are not going to know to inspect element, and pull out the id and add it to the url field. Being able to book mark a page might be nice, but then I realized that as the pages are not a set size like a book, if I resize the browser window then the page count changes and I'd not end up at the same place anyway. Some thought will have to go into that. I think eBooks suppose to handle this quite well, but I don't own one so I'm not sure.
<q>Knowledge speaks, but wisdom listens.</q> - Jimi Hendrix
David Storey, Chief Web Opener, Product Manager Opera Dragonfly, Opera Software ASA
David Storey, Chief Web Opener, Product Manager Opera Dragonfly, Opera Software ASA
Originally posted by dstorey:
The other issue is about getting back to the page you were on. Unlike regular web pages the URL doesn't change. To go back to page 100 you have to swipe 100 times. You can use IDs to go directly to that element, and this works, but normal users are not going to know to inspect element, and pull out the id and add it to the url field. Being able to book mark a page might be nice, but then I realized that as the pages are not a set size like a book, if I resize the browser window then the page count changes and I'd not end up at the same place anyway.
I am wondering about that too. Would be possible with JavaScript, perhaps bookmarking on a paragraph level? My current thinking is that a user could select the paragraph they're up to: the location of the paragraph in the node tree is then sent to localStorage, ready to be picked up next time. Is that insane?
1. When there will auto-hyphenation implemented in Opera ? Because you cannot have readable 20em wide columns without hyphenation, in languages like Russian or German (but you easily can in Chinese, and English is in between).
2. New float types that we see in this build, like '-o-top', - are they a part of any [draft] standard ? How this goes together with CSS Exclusions proposal ? (http://dev.w3.org/csswg/css3-exclusions/)
3. overflow: -o-paged-x-controls; - will it have "go to page" functionality ? or would it be possible to go to specific page only via javascript ? (for some reason, i cant write to elem.currentPage, in this build).
4. With pages (when you are reading technical literature) - is anything similar to PDF contents planned ? Maybe in form of <contents> or <toc> tag, maybe just as parsed structure of page headers (H1..H6) ? ( http://www.cybertheses.org/files/cyberdocs_etape1.png, http://filegets.com/screenshots/full/gyz-tree-document-editor_5171.gif ) and thumbnail navigation ? (http://etutorials.org/shared/images/tutorials/tutorial_129/pdfh_0103.gif, http://flylib.com/books/3/274/1/html/2/images/fig171_01.jpg)
2. New float types that we see in this build, like '-o-top', - are they a part of any [draft] standard ? How this goes together with CSS Exclusions proposal ? (http://dev.w3.org/csswg/css3-exclusions/)
3. overflow: -o-paged-x-controls; - will it have "go to page" functionality ? or would it be possible to go to specific page only via javascript ? (for some reason, i cant write to elem.currentPage, in this build).
4. With pages (when you are reading technical literature) - is anything similar to PDF contents planned ? Maybe in form of <contents> or <toc> tag, maybe just as parsed structure of page headers (H1..H6) ? ( http://www.cybertheses.org/files/cyberdocs_etape1.png, http://filegets.com/screenshots/full/gyz-tree-document-editor_5171.gif ) and thumbnail navigation ? (http://etutorials.org/shared/images/tutorials/tutorial_129/pdfh_0103.gif, http://flylib.com/books/3/274/1/html/2/images/fig171_01.jpg)
Hi Chris/Håkon,
This looks promising. I'm really interested in the nature of reading on digital screens.
I was wondering if you would be able to provide some insight as to why you chose to use swiping rather than scrolling (and even whole screens rather than column by column, see http://www.thinkingforaliving.org/ which currently formats text horizontally and allows for column scrolling).
I wonder if there are metrics on how users read a screen and whether they are likely to focus their eyes on one area of the screen and scroll bit by bit or than a whole chunk at a time?
This looks promising. I'm really interested in the nature of reading on digital screens.
I was wondering if you would be able to provide some insight as to why you chose to use swiping rather than scrolling (and even whole screens rather than column by column, see http://www.thinkingforaliving.org/ which currently formats text horizontally and allows for column scrolling).
I wonder if there are metrics on how users read a screen and whether they are likely to focus their eyes on one area of the screen and scroll bit by bit or than a whole chunk at a time?