Eyes Above The Waves

A friend pointed me at a very interesting article about the New York Times Reader, which is based on the Windows Presentation Foundation. You should also read The Times' FAQ. It fulfills my expectations that I blogged about before: a classy application that takes eyeballs away from the Web and back to a world fully under Microsoft's control.

Obviously we need to make it possible to do the same things in a Web page. As far as I can tell there are three sets of issues: offline access and layout. The rest of Reader's features could be implemented using existing Web technology, as an AJAX application (although XUL would help).

I believe the offline access issues are actually easier to solve; we're shipping part of a solution in Firefox 2 (DOM Storage). The other part of a solution is the ability to fetch and pin pages in the browser cache so sites can ensure they'll be available offline. I have a proposal for that. It needs some work but doesn't seem to be a huge task to specify and implement.

The other issues are layout and rendering. Clearly there's a big emphasis on columns; fortunately Firefox does columns. Unfortunately our columns don't make it easy to create the sort of page-based UI I see in the screenshots. I think a possible approach would be to use XUL box layout to create the header/body/footer vertical arrangement (via CSS, no XUL elements), and make the body overflow and scroll to the right. Then modify the Gecko event code so that the pageup, pagedown, space, and arrow keys do the right thing (namely, scroll left by a page, scroll right by a page, scroll right by a page, and scroll by columns). This would require just a few code tweaks and no new style properties.

The page navigation bar in the footer could be easily implemented using script, onresize, and onscroll handlers, but I don't know if it's really useful.

The hardest issue that I can see in the Mississippi screenshot, where the image is on the right-hand side of the first page and spans columns. One way to achieve that here would be to allow column content to flow around floats outside the column flow. Then the article title and the image could be placed in left and right floats respectively and the column content flowing around them would produce the right effect. We could also add the ability for content in columns to flow around overflowing content from previous columns, which would let people put column-spanning objects in the column flow.

That still isn't enough to produce some common effects, such as figures at the top or bottom of a page. For those we will need CSS extensions. One possibility is to extend "float" with "column-top", "page-top", "column-bottom", and "page-bottom" values.

Another issue mentioned in the article is fonts and typography. I can't tell much from the screenshots but they don't appear to be using widow/orphan control, so it's probably about font rendering. We do desperately need a solution to font downloading. On the bright side, our current Gecko work will let us improve our story with kerning, ligatures and other font rendering issues.

Even if we can implement all these things, there's still the issue of how we get people to use them in their sites. Microsoft is very good at partnering with major companies to produce showcase applications like this NYT Reader. We need partnerships like that. You would think that certain major Web sites would be interested in pushing back...

Reading between the lines, though, there is a lot of hope for the Web. The application is a 20-minute download for XP users without WPF installed, and it apparently requires a trust decision from the user, so it's not for casual surfers. You will need to leave the Reader application to follow links to other sites or content that hasn't been reformatted for the Reader yet, and links to NYT stories from other sites probably won't open in Reader. The Web's hypherlinked nature give it a lot of gravity and it's hard to see that changing in the medium term. The NYT had to develop their own application with Microsoft's help and has to deal with its content being served out in a different way. If we can produce an experience comparable to Reader in the browser --- and especially if we can make it available as a set of easy, downward-compatible changes to existing sites --- I think we'll have an overall much more compelling user experience.