READING large amounts of text online is a pain. I want to create a site design that makes the online reading experience a little bit more pleasant. You're looking at one step towards that objective.

The challenge is, given a page with a bunch of paragraphs, to lay the content out in a way that maximizes the amount of text that the average user will choose to read. The markup can't be changed (just say) and all work must be done on the front end.

My approach here was to use columns, and a strong page metaphor.

The columns make it easy to read through paragraphs without skipping between lines (like a newspaper).

The page metaphor, and removing the scroll navigation option, reduce skiming by presenting the content in short(ish) acheivable chunks, one after another.

Both of these problems would have been a pain in the A to solve client side, until recently. And most solutions would involve unsemantic markup, undue server load, content split between html pages (bad for SEO) and cross-compatiblity issues.

Enter jQuery! Using jQuery, it's fairly starightforward to take an html page with simple markup and split it into metaphorical pages and columns that can be displayed selectively to the user.

The only compromise we make is that users without javascript don't get the full experience (although it does degrade elegantly for them, and it's still perfectly usable).

The markup is just a bunch of p's in a div or two (feel free to check it out). Besides providing for the 5% of people who don't use javascript, this ensures that the page is properly indexed by search engines.

There are a bunch of cool things that jQuery allows us to do easily here.

For instance, when you resize your browser window, you will see that not only does the "page" expand nicely, the content also gets reorganized, with the number of columns changing to suit window width.

This is configured in the js by two variables - one to determine the proportion of the window that should be devoted to the "page" and the other to set the minimum desired width for a column. The other variables (such as line-height, padding) are scraped by jQuery from the css.

jQuery also allows us to use cool expanding background graphics, and animated page transitions, which both enhance the page metaphor.

It even provides support for transparent PNG files in IE6 (which is not critical to the design, but does make it nicer).

For reference, jQuery enabled me to take this idea from concept to what you see in a matter of hours. That would have been unheard of a few years ago.

This is still only a first step though, and should be treated as little more than a demonstration of capabilities. I would like to continue designing for long text, and hopefuly do some testing of different designs down the track.

There are a few issues I have with the present design:

Firstly, there's no support for rich media in the columns - images, lists, and most block-level elements will muck things up.

This is fairly easy to fix in jQuery, but requires some thought

Secondly, since the page metaphor is so strong, users may expect to be able to bookmark metaphorical pages seperately, and use the browsers back/forward navigation.

They may also expect pages in the print version to correspond to what's seen in the browser.

A decent amount of work is required to support these things (which are an important part of the interaction, so should be addressed).

Thirdly, I'm not entirely happy with the page flipping transition. It is true that users in left-to-right reading cultures would want to flip to the next page using the top right corner. So it seems to make sense that the page should also fly in from there. But this does contradict internet norms, as new content here appears from above, rather than below.

This also confuses keyboard interaction. Should the down key bring the next page or the previous one?

I'm also not sure that the animated transition is really necessary - I do want to give the sense of a page being flipped, but it may be a bit much to have pages flying around everywhere, rather than say being presented in a stack with the top sheet dropping off/on for page transitions. And it's not entirely clear anyway that 'next' and 'previous' allow page navigation, as opposed to, in some contexts, article navigation.

This is something that needs more thought and experimentation

Fourthly, the browser search functionality basically stops working (as it starts generating a bunch of false negatives for content that isn't currently visible. This is bad, so any implementation should provide its own prominent, easy to use, dynamic search functionality.

Fifthly, the columns are generated by cloning the original text and applying offsets to it. This means that there are effectively a number of copies of the original text that the browser has to deal with - this may get memory expensive when using really long text (like an ebook, say

If you read this far, the design must be working, so let me say a few more things.

Please be clear that this is not a prototype for all content presentation on the net - most net content should be made skimable, searchable, and quickly consumable, which this layout is VERY BAD AT. It should only be used for long sections of text that should be read as a whole, like an ebook or academic paper or old school newspaper.

Also be clear that this is very experimental at this stage, and will resemble something quite different once I start to implement it here and there.

Now here's some Nietzsche for you to see how pages work:

PREJUDICES OF PHILOSOPHERS

1. The Will to Truth, which is to tempt us to many a hazardous enterprise, the famous Truthfulness of which all philosophers have hitherto spoken with respect, what questions has this Will to Truth not laid before us! What strange, perplexing, questionable questions! It is already a long story; yet it seems as if it were hardly commenced. Is it any wonder if we at last grow distrustful, lose patience, and turn impatiently away? That this Sphinx teaches us at last to ask questions ourselves? WHO is it really that puts questions to us here? WHAT really is this "Will to Truth" in us? In fact we made a long halt at the question as to the origin of this Will--until at last we came to an absolute standstill before a yet more fundamental question. We inquired about the VALUE of this Will. Granted that we want the truth: WHY NOT RATHER untruth? And uncertainty? Even ignorance? The problem of the value of truth presented itself before us--or was it we who presented ourselves before the problem? Which of us is the Oedipus here? Which the Sphinx? It would seem to be a rendezvous of questions and notes of interrogation. And could it be believed that it at last seems to us as if the problem had never been propounded before, as if we were the first to discern it, get a sight of it, and RISK RAISING it? For there is risk in raising it, perhaps there is no greater risk.

2. "HOW COULD anything originate out of its opposite? For example, truth out of error? or the Will to Truth out of the will to deception? or the generous deed out of selfishness? or the pure sun-bright vision of the wise man out of covetousness? Such genesis is impossible; whoever dreams of it is a fool, nay, worse than a fool; things of the highest value must have a different origin, an origin of THEIR own--in this transitory, seductive, illusory, paltry world, in this turmoil of delusion and cupidity, they cannot have their source. But rather in the lap of Being, in the intransitory, in the concealed God, in the 'Thing-in-itself-- THERE must be their source, and nowhere else!"--This mode of reasoning discloses the typical prejudice by which metaphysicians of all times can be recognized, this mode of valuation is at the back of all their logical procedure; through this "belief" of theirs, they exert themselves for their "knowledge," for something that is in the end solemnly christened "the Truth." The fundamental belief of metaphysicians is THE BELIEF IN ANTITHESES OF VALUES. It never occurred even to the wariest of them to doubt here on the very threshold (where doubt, however, was most necessary); though they had made a solemn vow, "DE OMNIBUS DUBITANDUM." For it may be doubted, firstly, whether antitheses exist at all; and secondly, whether the popular valuations and antitheses of value upon which metaphysicians have set their seal, are not perhaps merely superficial estimates, merely provisional perspectives, besides being probably made from some corner, perhaps from below--"frog perspectives," as it were, to borrow an expression current among painters. In spite of all the value which may belong to the true, the positive, and the unselfish, it might be possible that a higher and more fundamental value for life generally should be assigned to pretence, to the will to delusion, to selfishness, and cupidity. It might even be possible that WHAT constitutes the value of those good and respected things, consists precisely in their being insidiously related, knotted, and crocheted to these evil and apparently opposed things--perhaps even in being essentially identical with them. Perhaps! But who wishes to concern himself with such dangerous "Perhapses"! For that investigation one must await the advent of a new order of philosophers, such as will have other tastes and inclinations, the reverse of those hitherto prevalent--philosophers of the dangerous "Perhaps" in every sense of the term. And to speak in all seriousness, I see such new philosophers beginning to appear.