Scrolling — A History Lesson

A portion of the second discovered copy of the Isaiah scroll, 1QIsab — Uploaded by Daniel.baranek ( [Public domain], via Wikimedia Commons

We still don’t seem to have a good way to present anything that doesn’t fit onto a single screen.

A common approach is this one used by Medium. A single central column of text and pictures.

If the viewer / screen /window is extra wide, then we end up with lots of whitespace on either side. Some websites put stuff into those margins, various bits of functionality and metadata. But, whether whitespace or sidebar, they frequently function as a kind of buffer to separate the text in the middle from everything else littering the screen.

And all we have is one solitary column.

How do we know what our progress is as we read through the text? Maybe there’s a scroll bar that lights up to show our progress. But on some UIs the scroll bar is so insignificant or hides so quickly that this simple feedback is all but lost.

An alternate approach is paginating the data. But this is often such a clumsy affair. How many times have you seen paginated output that still required scrolling its containing element just to interact with it and ‘turn the page’. Apart from specialist reader devices / apps, that properly avoid the clumsiness, this format is all but gone.

In print, medium to larger format books often feature two columns of text, whereas newspapers have many columns, and each column in a newspaper is sized so that it can be read as a whole line. How do you know your progress through the text? Simple, it is immediately obvious. How many pages are left, how many columns, the feedback is innate in the format.

In our efforts to simplify design and presentation we have lost key elements of usability.

We have literally ‘lost our place’.

With all of the emphasis of keeping everything in the vertical axis, ironically we’ve also lost the ability to simply scan vertically down through the text. With each column of text too wide to read as a whole line, we must read horizontally across each line before starting on the next.

What about going horizontally instead? It’s been tried and declared a failure, but the reality was those efforts were often bi-axial with things happening in both the vertical and horizontal axes at the same time.

This problem has been solved in the ancient (and more recent) past, so why don’t we explore some of those solutions to see what we can learn.

Scrolling — The Original Way

Great Isaiah Scroll — Photographs by Ardon Bar Hama, author of original document is unknown. [Public domain], via Wikimedia Commons

Amongst the most famous scrolls of all, the Dead Sea Scrolls. Documents written on parchment or papyrus and rolled up, width ways, i.e. horizontal scrolling. With the text divided into blocks.

Want to access some other passage of text? Just keep rolling the document until you get to it.

There’s no continuous vertical text (which we do see in some other scrolls). These were practical documents. If you wanted to, you could hold them up to read and keep the place simply by holding a roll of the scroll on either side of the text you’re reading. Or put them on a table and with a couple of small weights hold things in place while you read. A continuous vertical scroll simply is not as manageable. Hold it up but let go of the bottom and it will literally run away from you.

Admonitions of the Court Instructress — Gu Kaizhi [Public domain], via Wikimedia Commons

This contrast in intended usability can also be seen in Chinese Hanging Scrolls and Handscrolls. While both styles were never meant to be on permanent display, how they were ‘displayed’ was very different. The hanging scroll literally would be hung on a wall, the user would simply look at it. Whereas a handscroll was intended to be studied and considered by placing it on a flat surface like a table. Handscrolls were works that were intended to be interacted with, one section at a time.

Move forward in time and the codex appears, what we later would call a book. The already paginated scroll is now sliced into pages and bound on one edge. A simple, practical step that made working with the documents much easier. Throw in page numbers and it becomes even easier to find your place.

But it’s still tricky to find a specific passage of text within a page. These days books are often divided into chapters, along with various headings and subheadings. But in longer works even this may not be enough to find that one sentence in particular.

The classic biblical system of chapter and verse answers this problem, and it has been around in various forms for a very long time. We can see variations on this with some publications featuring line numbers for text, especially program code. Unfortunately numbering each line inherently doesn’t allow text to flow. The system of chapter and verse solved this problem a long time ago.

Other ways of finding a particular piece of text (without invoking an electronic search) are things like running headings, very brief summaries of particular highlights from the page they are above. This doesn’t serve the same purpose as a pull quote, instead these are much more like marginal references, but always in a consistent place on the page allowing easy scanning when you’re looking for something in particular.

What Have We Lost From the Past?

When it comes to longer passages of text the overall layout was obvious across various cultures, languages and times — It’s horizontal. Why? simple! Two hands make holding and working with either a horizontal scroll or book very easy. We seem to have lost this fundamental truth, longer passages of text don’t just hang on walls, instead we interact with them, and not just with our eyes but also our hands.

Until the appearance of full screen mobile phones, the displays on our devices were getting relatively wider. It’s only with phones, and the single handed use of a phone, that we’ve shifted to vertically oriented screens. But even then, it’s only smaller screens. Screens on larger devices are still primarily landscape in orientation, not portrait.

And yet, on our oversized monitors we still stick a single paltry column of text in the middle of a vast bleached landscape.

But what about finding our place within text that flows? Well … , just fire up the search / find box and type in whatever we can remember … Seriously? what if we want to give someone else a reference that just works?

It may not feel quite right to give each sentence a superscript number. After all, it’s probably not a sacred writing. But having said that it’s easy to hide such numbers electronically while reading some text, but have them work as a very real part of the text’s metadata. We can do chapter and verse as hyperlink targets extremely easily.


Here’s a suggestion:

When the display is landscape, treat that with respect, and go horizontal.

Throw away the vertical scroll bar, banish it, make sure that it never appears even by accident.

Embrace horizontal scrolling with everything divided into simple small columns. And for pities sake don’t screw it up by still insisting on a little vertical scrolling element here and there or some horrifically ugly pagination control (they’re not needed). If you’re doing horizontal scrolling do it properly. It has been done before successfully (in spite of the protests), it looks beautiful, works well, and most importantly reads well.

It is true that CSS simply does not have really good support for a horizontal layout, but what it does have does work. And without much effort you can create something semi-‘Holy Grail’-layout-esque with a small header, an even smaller footer (or none) and a simple side-scrolling journey in reading in the middle.

Stop hiding the scroll bar, I realise this may be a function of the browser or OS, but come on, give us something that helps us know where we are. There is a critical ‘missing piece’ in CSS support for columnar (multicol) layout that means a horizontal scroll bar is pretty much essential, because alternate ways of saying “there’s something more” have been eliminated with a slightly overzealous application of neatness. So set `overflow-x: auto;`

And finally, litter the text with metadata that makes giving someone a reference to a particular passage a breeze.