Bill Hill: The Future of Reading on the Web, Part 1

In Internet Explorer only for now. We're hoping once it's a standard the other browsers will implement.

Go to http://www.microsoft.com/typography and download the WEFT tool. It's free. Make sure you read the documentation and go through the tutorials before you try it for real.

Thanks Jason:

I agree with your comments about bookmarking, navigation, etc. I created that book just to show that you really could create text on a screen that someone would happily read for a very long time. I must be doing something right - an hour is an incredibly long read on the Web! Glad you used F11; removing all distractions apart from the content helps.

I'm not a UI designer. I know that could have been made much better. I started off with "Next Page" buttons at the bottom of each page. Then I made a VCR-like bank of buttons. A real UI designer could do this so much better than me - I am only an egg (Michael Valentine Smith in Robert Heinlein's "Stranger in a Strange Land").

If you're having activation issues, try using "Contact Us" on the Reader website:

http://www.microsoft.com/reader

Re: using other fonts in a larger size than Verdana.

You know, I find I do exactly the same thing myself. For reading on screen with Verdana, I found the ideal was 11pt; whereas with Cambria and Calibri, I find 12pt is optimal.

There's good reason for that. First, in relation to other fonts Verdana has a large x-height. Matthew designed it that way, so the characters are very open. Verdana looks bigger than its point size would indicate. The other factor built into Verdana is that it has very generous spacing.

You also have to remember that Verdana was designed pre-ClearType, in 1995. We didn't invent ClearType until 1998, and it was even later than that before it shipped in Windows and Office. In 1995, average screen resolution was quite bit lower, and in the black-and-white world, you were stuck with whole-pixel resolution. ClearType gave us a theoretical 3x improvement in the X-direction resolution - which also happens to be the one where we needed it most, especially for Latin faces.

What I'm trying to say is that on Verdana, Matthew was working under a set of brutal constraints. He began by creating bitmaps at the reading sizes, then we created the outlines and hinted them so they'd reproduce those bitmaps at those sizes.

There was a lot less room for the subtleties of design. It was a real challenge designing a serif face (Georgia) or a sans serif (Verdana) which looked different enough from other existing serif and sans serif faces in 10 and 12pt bitmaps.

ClearType gave us a lot more scope. So Calibri (now my favorite sans serif face for reading on screen) and Cambria (my favorite serif) can be quite a bit more sophisticated. Compare Calibri to Candara, for instance.

Re your request: (Edit: links to the different chapters would also be nice. )

Just did that.

Re: The request to have the Page/ Chapter navigation buttons at the bottom right rather than middle top. I started out with "Next page" buttons at the bottom right of the pages. Problem is they might be hidden until the window is made FullScreen. This is one of the areas where I plan to go back and do some more experimentation.

I like the idea of putting the nav buttons at the bottom right. I may have to go in and adjust columns of text to make space on some pages. The Javascript I use for multicolumn does some weird linebreaking in certain circumstances so adjusting columns can be non-trivial (ie extremely fiddly).

I think I'd also like to experiment with more subtle arrow buttons that don't stand out as much but are there where and when you need them.

The big - and I mean big - task is to convert the whole book from Project Gutenberg's plain text into standards compliant HTML. I've built 77 separate Web pages so far, and will probably end up with at least 100... Anyway, I'd like to have a "whole book" rather than just a few "demo pages" with which to experiment. And I'd love other people to try reading it too and send feedback.

The other thing to say is that the files are incredibly disorganized. I started out thinking I'd do just a few pages. Once I saw how good they looked, I got excited to try the whole thing. Along the way, I should of course have been creating "Chapter" folders with the files for each chapter in them. That way I wouldn't have to scroll so much when opening files for editing. Techniques that you can get by with for just a few pages don't work for a production-level task like this.

However, the whole purpose of the exercise was:

• To see how far I could push readability with Web-standards content
• To explore production issues
• To experiment with "Reading UI"
• To figure out what's still missing in terms of Internet Explorer functionality, Web-standards markup, authoring tool support, etc.

Thanks so much for your interest and comments. Stay in touch, and drop in on my site from time to time, since it's developing day by day,

best wishes,

bill