Formatting online books

Volume 11, Issue 17; 01 Feb 2008; last modified 08 Oct 2010

I can push markup around all day. Design, now that's a different story.

Back when I started formatting books online, in about 94 or so, I chose (stole or invented, I can't recall) a design that you've seen over and over again: each page has a fixed header and a fixed footer which contain various sorts of navigation: previous to the left, next to the right, and some combination of current title/home/up in the middle. You've seen it, it's been the default style for the DocBook stylesheets since back in the day when they were written in DSSSL. I've put a contrived example online for the purpose of this discussion.

This design, stunning in its lack of style and sophistication, suffers from at least two other significant flaws: very short pages are dominated by the header and footer (an effect that's redundant at best; downright awful when the design of the headers and footers is a strong contrast to the text) and very long pages offer no navigation at all when the reader is in the middle.

I'm working on a project now to put a book online, more about that later, and I thought it must be possible to do better. My first idea, my only idea so far, was to adapt some “floating footer” code from my slide presentations to make the top header float. I've put an example of that online too (make your browser narrow enough to require scrolling, then scroll down to see the effect).

It's not entirely successful, perhaps because of the jittery way it upates. Perhaps because it's still an unsophisticated and styleless rectangular blog.

Anyone have a better idea about how to make navigation graceful and elegant across the pages of an online book?

Comments

on a mac using firefox - there is no float - they both look the same - except "Some Title" is slightly scrunched under the green header.

—Posted by david on 01 Feb 2008 @ 04:23 UTC #

You were formatting online books during the reign of the Emperor Domitian (81-96 C.E.)? Impressive. I hadn't thought the Internet routers back then had the bandwidth to handle whole books, not to mention that SGML hadn't yet been ported to personal computers.

—Posted by John Cowan on 01 Feb 2008 @ 04:24 UTC #

The print header/footer paradigm need not extend to a web page. Since you're using CSS anyway, why not try a fixed-to-the-viewport sidebar with navigation options and location information in it?

—Posted by Dorothea Salo on 01 Feb 2008 @ 04:26 UTC #

Safari has taken a different approach: two vertical bars, one on the left and one on the right sides of the page. On the right-side-vertical-bar, there is a right-arrow (next) per paragraph. On the left-side-vertical-bar, there is a left-arrow (previous) per paragraph. To see an example, you need to visit (registration is required) My Bookshelf section of Safari (http://safari.oreilly.com) and select a chapter of a book. I don't know if the Safari's approach is the best, but it seems to be practical.

—Posted by Javad K. Heshmati on 01 Feb 2008 @ 04:29 UTC #

@david, how odd, it works on Firefox on the Mac for me.

@john, I was working on SGML formatting of books in the fall/winter of 1994, I'm pretty sure, but maybe that was only for print. The first online versions were definitely CD-based, not meant for distribution over the web.

—Posted by Norman Walsh on 01 Feb 2008 @ 04:30 UTC #

do it the css way:

.header { position: fixed; top: 0px; left: 0px; height: whatever; width: 100%; }

.content { padding-top: same_whatever; }

—Posted by encryptio on 01 Feb 2008 @ 06:01 UTC #

@encryptio, ahhh, thank you, that's much nicer.

I thought it should be possible with just CSS, but neither my own attempts nor web searching were successful. I'm still not sure I like it, but at least it doesn't flicker anymore.

Sweet.

—Posted by Norman Walsh on 01 Feb 2008 @ 06:23 UTC #

The problem with the fixed header is that it interferes with the normal paging behavior in most browsers. When you hit space, most browsers will scroll up one screenful, but they have no way of knowing that part of the viewport is obscured by the header. As a result, when you hit space, part of the text on the next screen is put under the header, where you can't read it.

It might be possible to correct that in CSS as well. (Perhaps by putting the main text in another fixed block with overflow set to scroll?)

—Posted by Dave Menendez on 01 Feb 2008 @ 08:03 UTC #

I just got a new laptop and one of the notable differences from the previous one is that the screen is wider and shorter. I think this is a trend, not a one-off occurrence. Therefore, I'd say put the navigation bar on the side (or both sides).

I also like the idea mentioned above for navigation with paragraphs, that way the user can bookmark their current position to the paragraph; so perhaps a part on the side where every paragraph has an anchor?

—Posted by Jacek on 01 Feb 2008 @ 09:05 UTC #

Idea demonstrated at http://jacek.cz/tmp/css.html

—Posted by Jacek on 01 Feb 2008 @ 09:37 UTC #

Nothing floating in firefox on ubuntu, both the fixed and floating examples look the same to me...

—Posted by Adrian on 02 Feb 2008 @ 04:35 UTC #

Why does this floating header need to be visible Norm? Just use your keyboard shortcuts for navigation?

If it *must* be shown, how about a mouseover action which would address the jerkiness of it?

—Posted by Dave Pawson on 03 Feb 2008 @ 09:11 UTC #

I'd like to see a Google Books style of approach where the entire content has a linear ("all on one page") feel but with hypertext navigation ("page at a time" load rate and linking). The inherent balancing of short vs. long sections alone would be worth it :-)

—Posted by Ken MacLeod on 03 Feb 2008 @ 04:23 UTC #

on windows,

the the javascript float is too jerky to be usable with FF and Opera and doesn't float at all with IE

The css version works fine in FF, Opera and IE, but I much prefer Jacek's layout with the navigation to the side. (I remember early versions of ghostview (or was it xdvi, I forget) moving the navigation controls to the side rather than the top, for similar reasons.

—Posted by David Carlisle on 04 Feb 2008 @ 11:55 UTC #

I thought I did all right with this example: http://ugo.crl.nitech.ac.jp/~ddb/CIF/skunkworks.cgi/

The forwards backwards navigation is done via the orange box at the top that just pops up via CSS when you hover the mouse over it. As ever, it needs a little javascript to test whether the CSS is supported.

The basic CSS was this: div.accesskeyinfo { position: fixed; background-color: orange; border-color: purple; border-style: solid; border-width: 5px; overflow: clip; white-space: nowrap; padding: 5px 5px; text-align: center; left: 10%; width: 80%; top: -30px; }

div.accesskeyinfo:hover { top: 00px; }

Solves all positioning paging real estate issues, I thought anyway.

Cheers Doug

—Posted by Doug on 05 Feb 2008 @ 11:19 UTC #

Hmm. I'm not sure if you're subjecting my comment to silent scorn, or if you just didn't bother to mouse over the links.

—Posted by John Cowan on 06 Feb 2008 @ 06:01 UTC #

I'm not sure what you mean, John. I did respond (comment 5). Mostly, I think, you made me doubt my own time line. I wonder if I could still use an abacus; I did learn once.

—Posted by Norman Walsh on 07 Feb 2008 @ 12:46 UTC #

The floating bar is really good idea. I've always wanted to put information related with the document on a floating bar, for example links to sources, to discussion forums and any other metadata related with the document.

—Posted by Ismael Olea on 11 Feb 2008 @ 07:15 UTC #

Here's one way to implement navigation across the sections (and pages) of an online book:

http://www.pinkjuice.com/howto/vimxml/

eg the TOC on the left side on http://www.pinkjuice.com/howto/vimxml/setup.xml#catalogs

—Posted by Tobi on 26 Feb 2008 @ 11:42 UTC #