Bindery.js

The library provides a bare-bones structure to perform operations on the book content. A snippet of code may perform operations on the whole continuous text, or on a page-by-page level, or both. This gives us a way to think about how a book is processed.



// Run through each page in order
Bindery.afterBind({ head: " ", headUrl: " "}, function(pg, state){

  // If there is a heading on this page, then this is
  // the beginning of a new article!
  var heading = pg.find("[data-change-running-head]");
  if (heading) {
  	// Record the URL and name of this article in the 'state' object
  	// so we can put it on all subsequent pages
    state.headUrl = heading.attr("data-pageurl");
    state.head = heading.innerText();
  }

  // Depending on whether the page is recto or verso, insert
  // either the last heading we passed, or the last url we passed.
  var isRecto = pg.hasClass("_recto");
  var runnerNode = pg.find("._running-head ._section");
  if (!isRecto) {
    runnerNode.html("<span>" + state.head + "</span>");
  }
  else {
    runnerNode.html("<span class='_headurl'>" + state.headUrl + "</span>");
  }
});

Our effort in writing bindery.js is an exercise in deliberately misusing software. At times it was also an exercise in futility, as our idea about what a book should be lead only to long-abandoned forum posts and bug reports from 2007, a forgotten time in which some still believed that ordinary people wanted to hold in their hands a printed-out piece of paper from their browser.

But despite the rough edges, it’s become a truly useful framework for thinking about the book and the patterns and repetition that shape it.

When you grow up with Adobe InDesign, you take for granted the ability to flow text across boxes and pages — it’s the only way to design a layout for a book or magazine. In 2011, Adobe's Web Platform Team proposed bringing that concept to the web, both as a standard for all browsers and as actual working code, contributed to the Webkit project (at the time overseen by Apple and Google). The design and tech worlds were pleased— Adobe, the behemoth of design software, once so proprietary and inscrutable, was opening up and engaging with the web and technology in a new way.

Three years later, Google ripped the code for CSS regions out of Chrome, arguing that their priority was how fast the web was, not how ‘rich’ the content was. The father of CSS himself condemned the CSS Regions spec as “harmful” to the web. He argued that it needlessly confused the distinction between 'content,’ the role of HTML, and ‘presentation,’ the role of CSS. A designer might argue that the distinction is somewhat arbitrary, but in the community of the web, semantic meaning comes mostly from assigning bits of text labels like ‘paragraph’ or ‘pullquote.’

It’s a reminder that even though a browser is ‘open source’ and open to contributions, the work that gets done usually benefits Google. The CSS Paged Media standard from 2008 remains missing, as Google builds features to draw 3d graphics and hook up to webcams and build mobile apps. And it’s notoriously tricky to show a new advertisement once you've printed the web page out (in fact, print preview mode is actually a great way to strip irritating ads, breaks, and sidebars from a news article).

Download here

More Code