Eyes Above The Waves

Robert O'Callahan. Christian. Repatriate Kiwi. Hacker.

Thursday 21 September 2006

Here Comes A New Challenger!

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.


Rafael Gieschke
A lot of this is already possible in Gecko. In fact, I'm using Firefox to produce a small local quarterly newspaper/magazine � mainly because of the great web integration you get for free by using a browser instead of some dtp tool. The hardest thing to solve was hyphenation but now it works quite well. As you correctly mention, spanning columns and widow/orphan control are still issues.
Reb Yudel
It's great to see someone at Mozilla thinking about these issues. Too bad it took a decade... and the threat of Microsoft...
Folks at the SFGate (San Francisco Chronicle) would probably be a group that would be happy to do the same thing within the browser or maybe a XUL Runner version of the same app.
They've got some ex-Netscape folks in there who could pull it off with some help.
Rafael, could you explain (hypens at moesen d0t nu) how you got proper hyphenation working? Thanks!
Brandon Furtwangler
I'm not sure looking at screenshots even does the NT Times Reader justice. After playing with it I see a lot of fit-and-finish effects that don�t translate well to static images. Things such as sliding transitions between pages, other subtle animations, and the amazing related article graph don�t necessarily add functional features but they do give the user a more appealing experience that has been very much lacking in even the best AJAX sites.
Regarding replicating this with Mozilla web technologies, I dont think its a matter of 'can this be done', but rather 'how much effort would it take'.
Ilya Konstantinov
roc, while the layouting deficiencies you cover are important to address, you're missing the big picture. Larger than the promise Avalon brings to users -- is the promise it brings to developers. Avalon / XAML get instant karma merely from the fact that it's in the .NET universe; our platform is in the XUL universe, but the XUL universe isn't nearly as solid (and large) as .NET.
Robert O'Callahan
Ilya: no, I'm talking about the Web, not XUL.
Even Microsoft isn't capable of taking control and AOL'izing the web. If Mozilla can show that kind of layout on the web without a special reader, Microsoft will be at a tremendous disadvantage. They lose the advantage of IE preinstalled on desktops and IE7 doesn't compare with Firefox at all when it comes to layout.
if this is our challenge, we're in pretty good shape!
Andrew Hilton
Current web standards (CSS, HTML, AJAX) will not cut it in this competition. You need markup (preferably compilable) designed specifically for applications to compete. XUL may be in this space (I'm not that familiar with it). Hopefully Apple comes out with their own version and doesn't keep playing the standards game. Trying to compete using web standards in this space will not work - they are too slow and the technology is outdated (css is a fine example).
We need competing application frameworks based on XML that are deliverable over the web. I don't believe web standards are the answer in moving to the next version of the web. If competing designs do not come out against WPF then MS will win once again.
With XML at least you have more hope of conversion between frameworks, particularly if competing players all embrace a standard comms layer (ie web services). Yes this is a long shot but my guess is that with technologies such as WPF, the trend will be more markup and less code.
IMO the only possible bright light is Apple. The Linux world is too fragmented to produce one united XML based framework, and no-one seems to think this is important anyway.