A Bag Full of Stories

This is an adaptation of a talk I gave at the wonderful Books in Browsers conference in San Francisco in early November.


Before there were browsers, before there were books, there were stories. Ten or twenty thousand years ago, one could live nicely on just food and stories. Food was mostly vegetables, mostly gathered, and one of the biggest technological breakthroughs in pre-history was using a bag or net or pot to carry what you gathered back to camp.

We still need food and stories. As we wander the internet, gathering images, videos and text to make stories, how do we carry them back to camp, how do we share them with our community? We need a bag to hold our small stories, to turn what we gathered into something new.

If you look inside an EPUB, you’ll find something called container.xml. Can we use modern ideas of containers and manifests to hold together the pieces of our stories? Can new developments in web and ebook standards help us assemble narratives out of raw internet stuff? Let’s find out.


I remember writing that in an IRC channel with my friend Tzviya Siegman. How apt that we were using a prehistoric internet technology — from 1988! As we were pondering what to speak about at Books in Browsers, I happened to re-read an essay by Ursula K. Le Guin. It was called “The Carrier Bag Theory of Fiction,” from the lovely collection Dancing at the End of the World. Le Guin wrote about how we think of stories, and even culture, as needing heroes and conflict - stories about men killing wild beasts, or wild men, with spears.

Book Cover for Le Guin's "Dancing at the Edge of the World"

So long as culture was explained as originating from and elaborating upon the use of long, hard objects for sticking, bashing, and killing, I never thought that I had, or wanted, any particular share in it.

But is that really the only story? It turns out that early humans got most of their food from plants, from gathering, from women. And perhaps the earliest and most useful tools were not knives and spears but bags and baskets.

If you haven’t got something to put it in, food will escape you — even something as uncombative and unresourceful as an oat.

The hunters got all the press, but the women did all the work. Sound familiar?

Of course, unlike stone, objects made of fibres, wood or skin tend not to last for thirty thousand years. But even then, we see stories were important… can you imagine what the story of this figure is, a ceramic statue from twenty-nine thousand years ago?

Vestonicka Venus, a ceramic figurine from prehistory
Venus of Dolní Věstonice

And there’s always been another story, the life story. Back to Le Guin:

If it is a human thing to do to put something you want, because it’s useful, edible, or beautiful, into a bag, or a basket, or a bit of rolled bark or leaf, or a net woven of your own hair, […] and then take it home with you, home being another, larger kind of pouch or bag, a container for people,  and then later on you take it out and eat it or share it or store it up for winter […] or put it in the medicine bundle or the shrine or the museum, the holy place, the area that contains what is sacred,  and then next day you probably do much the same again — if to do that is human, if that’s what it takes, then I am a human being after all. Fully, freely, gladly, for the first time.”


“I would go so far as to say that the natural, proper, fitting shape of the novel might be that of a sack, a bag. A book holds words. Words hold things. They bear meanings. A novel is a medicine bundle, holding things in a particular, powerful relation to one another and to us.”

For the last few years, I’ve been thinking a lot about ebook formats. EPUB has been very successful, but it doesn’t exactly inspire statues, sonnets, or declarations of love. I come to this wonderful conference because I want books in browsers, but the web doesn’t know how to deal with collections of documents…

…and there I was, reading Le Guin’s essay about containers and baskets and bags full of stories, and in that moment this essay was born.


Books and browsers. It’s interesting that we call what we do browsing. It’s sad that we dismiss it, consider it a waste of time.

Some of the best times of my life have been in libraries, following a thread from book to book, threads that could turn into stories, or just dead ends. The usual result was a big pile of books, and a feeling of joy at the vastness of the world. Digesting all those books could take years; we are thankful for the strange creatures called “authors” who do that, and make new books.


I digress, therefore I am. Thinking about browsing, I was reminded of the prototypical browsers, goats. Symbols of anarchy, mainstays of mythology, and central characters in one of the most unusual and interesting books I’ve encountered while wandering through libraries. It’s called “Goatwalking,” by a Buddhist Quaker Jewish outlaw philosopher named Jim Corbett. He writes of finding wisdom in the desert, of the utter freedom and self-reliance that only seems possible in a nomadic life, and of the moral necessity of packing up and heading to the hills when a society becomes too oppressive; just as the Hebrews, the people of the book, left Egypt.

Book cover for "Goatwalking" by Jim Corbett

Goats can digest nearly anything — not just the sweet grass. They turn weeds and thorns into milk, meat, wool. They are survivors, they are robust, they can prosper where little else can. In web terms, they are responsive, they are adaptable, they prosper in arid environments devoid of broadband and javascript.

 

A goat walking across the desert near Wadi Rum in Jordan.

Jim Corbett and his goats were wandering through the Sonoran Desert in Arizona in the 1980s. He learned of the refugees from Central America who were fleeing violence and crossing into the US — out of a private moral necessity — and started to help them, founding the “Sanctuary” movement.

I read his book long before I had any personal ties to Central America. My son is adopted from Guatemala. He’s our only child, very self-contained, he can be happy without an internet connection, he is full of stories. Like the goats, he is both wild and domesticated.

8 year old boy squats by a puddle, looking for frogs
Cristopher looks for frogs

As I venture onto the web and browse, I want to collect what doesn’t immediately fit in my stomach. But a bookmark or a link is not adequate to the task. I don’t want to remember where those berries are. I want the berries themselves.

A woman gathers coffee beans in a large woven basket
I want to collect, connect, digest, and perhaps then I can create something from what I’ve found. What kind of bag can hold the things I find and make on the web?

Make me a mixtape, said Katie Zhu. DJs make art by collecting and ordering songs. Hanging an art show. Programming a concert. Collage. Still lifes. Quilts. Anthologies, short story collections, story cycles, magazines. Hip-hop samples older music. And we write small stories ourselves — tweets, comments, posts, articles…

Complex quilt design

… all these shiny things collected on the way to somewhere else. It’s a browsing history, a list of links that us old folks used to have on our home pages…

Wait. Maybe we just need a list, and we can go from there.

Lists are related to containers; a shopping list turns into a shopping cart which ends up in shopping bags; even better is that lists can have an order. That’s one thing that makes a story different from a website. A story has a beginning and a middle and an end; a story has order, has a sequence. We can only speak one word at a time. When I browse, I choose my own adventure. But when I make a story, when I become an author, I find the thread through an infinite sea of words. I decide what happens next.


With all this new technology, can we actually turn a path into a narrative, turn that list into a story?

EPUB dates from the end of the twentieth century. The web has changed a lot since then. Javascript is ubiquitous. Devices are mind-bogglingly powerful. Browsers are interoperable, more or less, in ways that ebook folks only dream of. But… the network is sometimes still crappy, or even non-existent.

To make a book, document, publication, or story, we need to solve some fundamental problems:

  1. The boundary problem. What’s part of the story, and what isn’t?
  2. The offline problem. I want to read when I can’t find, or can’t afford, a network connection.
  3. The reading problem. I want the browser to make reading long things easy, to help me understand, to adapt to my needs.
  4. The layout problem. Books are art and craft; design and typography serve content and understanding.
  5. The portability problem. I want to take my books with me, send them to my friends, save them, possess them.
  6.  The security problem. How does portability affect the web’s origin-based security model?
  7. The human problem. How do I make this technology human-friendly, simple, hackable, relatable for us — social animals that walk upright, use fire, and tell stories?

EPUB had to solve these same problems twenty years ago, but now we can take advantage of twenty years of progress to make ebooks simpler. Have them consist entirely of web stuff, with no custom XML. Make them easier to work with — look at how much work Liza, Micah, or the Readium folks have to do to paginate, annotate, synchronize, customize?

What can the web offer us? Much of what we need is built around the idea of progressive web applications. Progressive web apps work offline, can be saved to the home screen, are secure, and work across the range of devices. The new core technologies are:

* Web application manifest: one file to bind them all
* Service workers: for offline and network interaction
* Web annotations: for notes, bookmarks, and so on.
* CSS grid, flexbox, overflow, shapes: for better layout

This presentation is such an experiment. My web page is essentially a reading system, metaphorically made of string and tape, with an iframe for my story. All I need is the web content itself, plus one simple manifest file that tells me what’s in the bag. And it can be almost any content—html, text, video, pictures, sounds… like the goats, we’re not picky.

This is all based on extending the Web Application Manifest. This is the heart of the progressive web app, a place to say what’s in your app, and how to display it. We just want to add a few new lists — one listing what order the pieces go in (like the oddly named “spine” in EPUB), and one listing all the other stuff you need, like fonts and scripts and images and such.

{
 "name": "A Bag Full of Stories",
 "spine": [{
        "href": "html/story-000.html",
        "type": "text/html"
    },{
     "href": "html/DancingAtTheEdgeOfTheWorld.jpg",
        "type": "image/jpeg",
        "alt": "cover image for Dancing at the Edge of the World"
     },{
        "href": "html/story-001.html",
        "type": "text/html"
 },{
        "href": "html/vestonicka_venus.jpg",
        "type": "image/jpeg",
        "alt": "The Vestonicka Venus, a 29,000 year old ceramic statue"
 }, ...

I solve the offline problem with service workers. When my browser asks for the next chapter of the story, the service worker intercepts the network request, and I can program it to do cool things. If the network isn’t there, I can send back a local copy.

self.addEventListener('fetch', event => {
 const url = new URL(event.request.url);
 const sameOrigin = url.origin === location.origin;
if (sameOrigin && url.pathname.endsWith('/download-publication')) {
 event.respondWith(packagePublication(event.request));
 return;
 }
event.respondWith(
 caches.match(event.request).then(response => {
 return response || fetch(event.request);
 })
 );
 });

My service worker is named Kroner.js

George sitting next to his dog Kroner
George Kerscher with his service dog Kroner

Kroner is George Kerscher’s service dog. George has done more for ebooks and accessibility than anyone.

The reading problem is hard. I want to be able to customize my reading experience, navigate easily through complex structures, have a night mode, make notes and highlights, and so on. My toy reading system here has a very slick night mode, using CSS filters — see how it deals with images! I can make the text bigger or smaller. I can find the table of contents. I can go to the previous or next section. I’d have it do more, if only I was a real programmer.

I can’t make notes, highlight things, or annotate. But I’m hoping the new Web Annotations standard will save the day.

The layout problem is also hard. But there are signs of hope. If I look at this in Safari, there are perfectly-aligned drop caps. And notice that the content is paginated! It’s a bit rough, but this is three lines of CSS!

body {
  overflow: -webkit-paged-x
  -webkit-scroll-snap-type: mandatory;
  -webkit-scroll-snap-points-x: repeat(100%);
}

Now if only all those things would work in every browser… But that is, indeed, another story.

About the portability problem… remember my service worker, which can do smart things with network requests? I have a download button, which actually collects all the files in a container and zips them up for you. Or, in my case, it bundles up most of the files. Jake Archibald wrote my original service worker, as he flew home from TPAC in Sapporo last year. I’m learning Javascript by slowly breaking it.

The security problem remains. I’m an idealist. But mixtapes don’t mix with copyright law. The web security model is based on origins, and is suspicious of travelers, scripts from far away. “Your papers, please.”

The human problem is the hardest of all, as the old technology is so brilliant. Books have so much in common with that 29,000 year-old figurine! We can hold them, carry them, worship them; their very structure helps us understand. Their materials are commonplace, understandable, yet they contain magic. They fit our hand, our gaze, our mind. How can we anchor digital objects in the real world, in our physical, animal understanding? I don’t have those answers. I hope some of you are at least thinking about the questions.


Here we are, with all this new web technology, and I can easily imagine a feature in your browser where making a book is as easy as making a bookmark. Just click a button to add a new chapter to your story.

Thus we turn the playlist into the mixtape, and the web becomes a net that catches the story.

Related stories

What is the Paged Media initiative?

At the beginning of the year, we announced the Paged Media initiative as a community driven open source solution to help anyone who wants to print content with web technologies. Before looking at what we’ve been up to for the last five months, in upcoming articles, let’s have a look at what’s possible the gaps we’re trying to fill.

Towards an Open Future for Automated Typsetting—Highlights from Paged Media Event, January 9th

On Tuesday, February 9th, a group of 30 or 40 folks from the world over convened at the MIT Press offices in Cambridge to put our collective heads together about building a new open source model for automated typesetting using CSS, HTML, and JavaScript.  Coko Foundation co-founder and Shuttleworth fellow, Adam Hyde, brought us together … Continue reading “Towards an Open Future for Automated Typsetting—Highlights from Paged Media Event, January 9th”

Our vision for books in browsers

Books are sacred. Think of how we react to book burnings. Think how hard it is to throw a book away. We build temples for them - there’s a library in almost every town. Many of us have more books in our houses than any other object, besides Lego. They might be the most spectacularly successful technology of all time.

A book’s contents might be great art. The book itself might be great art, too. A book may take years or decades to create—perhaps the work of dozens or hundreds of people beyond the author. It can be a monument you can hold in your hand.