Codex

Note: Codex is very experimental and may fail in some browsers. If you are using Internet Explorer for Macintosh, please disable Codex.

Welcome to Codex

Codex is a very experimental piece of JavaScript that attempts to make long passages of content easier to read on screen.

I've always considered scrolling to be one of the great nuisances of the web. Whether I'm using a mouse wheel, the keyboard, an auto-scroll button, or the scrollbar itself, scrolling is much more disruptive than turning the pages of a book or magazine. When I read printed material, I know that the next chunk of content is always at the top left corner of the next page. Reading on screen is not as straightforward; consider some options:

• Read to the bottom of the screen. Scroll (using the scrollbar, arrow keys, or mouse wheel) until the next chunk of content is at the top of the screen. Repeat. This is fine, except that it requires much more time than turning a page.
• Read to the bottom of the screen. Press the page down key or spacebar to bring the next chunk of content somewhere near the top of the screen. Find your place. Repeat. I've never been able to get used to this, as it can take me a long time to find my place in a passage of uniform-looking content.
• Turn on auto-scrolling (usually by middle-clicking on the page). Although this can be useful, I generally don't enjoy reading moving content for any length of time.

The goal of Codex is to provide a viable alternative to scrolling (other than printing). Codex brings the convenience of page turning to the screen while preserving the flexibility and semantics of web content.

How Does it Do That?

At the highest level, Codex does three things:

1. It splits content up into pages.
2. It hides all but two of the pages at a time.
3. It provides a way to navigate the pages.

The result is a "book" of pages that can be "turned", providing an intuitive interface for onscreen reading without scrolling.

Codex is purely semantic, and it does not inherently apply any visual formatting to the content. Each page is simply a <div class="bookpage"> that is dynamically inserted into the DOM around a chunk of content. The complete book of pages is simply a <div id="book">. All visual formatting is specified through CSS, allowing for tremendous flexibility in the presentation of the interface.

The Process

Codex, which is just an externally linked JavaScript, checks the DOM for an element with the ID set to bookcontent. As suggested by the naming convention, the content of this element will be organized into pages.

Codex inserts a <div id="book"> into the DOM at the location of the bookcontent element. It then adds to the book a <div class="pageset">, which will be a container for up to two pages.

Codex then creates the first <div class="bookpage">, to which it begins adding content from bookcontent. The height of the bookpage is specified through CSS (the same CSS that defines the presentation of the rest of the document). When the content overflows the bookpage, a new <div class="bookpage"> is created.

Codex proceeds to iterate recursively through the DOM tree, adding bookpages and pagesets as necessary, until all of the bookcontent has been added to the book. It then adds elements for page numbers and navigation.

Flexibility

Codex is designed not to place any limitation on the structure or semantics of the content. If the end of a page occurs in a middle of a paragraph, the paragraph will be continued on the next page, with any associated attributes (class, id, etc.) preserved. In fact, the entire DOM tree is closed at the end of a page and recreated at the start of the next. It even works with images:

Codex does not require any knowledge of JavaScript, since all of the customization is achieved through CSS. Another nice thing is that if a user is browsing without JavaScript, Codex degrades gracefully and leaves the original layout intact.

Some Notes

• <hr class="newpage"> forces Codex to start a new page.
• Images get resized if they are too big to fit on a page.
• If an <li> spans two pages, it gets the class "li-continued" on the new page. This is useful for hiding the bullet on the second page.
• If an element with an ID requires more than one page to display, the element will have the page number appended to its ID on subsequent pages. For example, if the entire book content is wrapped in a <div id="foo">, then the contents of page 1 will be wrapped in <div id="foo">, the contents of page 2 will be wrapped in <div id="foo-2">, etc.

Some Known Bugs

• Internet Explorer on Windows only allows padding and border on .bookpage to be specified in pixels.
• Safari resets the numbering of an ordered list if the list item marker (number) is hidden.
• Sometimes Codex unexpectedly starts a new page when there is still some room on the current one.

Browser Compatibility

Codex has so far been tested to work in IE5 and up on Windows, Firefox, and Safari. It comes very close to working in Opera. It is known to fail in IE5 on Macintosh.

Potential Enhancements

Codex was coded quickly as a proof of concept, and it would greatly benefit from a number of improvements, including:

• Faster, cleaner code. Codex can be somewhat slow on complex documents and/or old hardware. The source code is currently inefficient, sloppy, and should be rewritten completely.
• More options. Many aspects of the code should be made into easily modifiable options, like what tag/class will force a new page, etc.
• Compatibility with XHTML 1.0 Strict.
• The ability to jump to any page using named anchors (or something).
• Keyboard navigation.
• Server-side caching of the modified DOM tree (for increased speed and compatibility with more browsers).
• Prevention of orphans (and other basic things taken for granted in word processors).

Call to Action

At this point, it would be best for those with more JavaScript experience (this is really my first major effort) to step in and make this into something truly useful. If you have some time and interest, do whatever you like with the source code, but please share your changes with me. If you notice bugs or have suggestions, please drop me a line.

Download Codex

• version: 0.1
• size: 8.0 KB
• format: ZIP file

After downloading Codex, extract the archive and read through instructions.txt (it's short). Let me know if you have any trouble getting it to work. I'd also love to hear about any enhancements, fixes, or interesting uses you come up with.