bindery

Bindery.js

Intro · Learn · Docs · Examples · About

Bindery.js is a library for designing printable books with HTML and CSS.

At its simplest, Bindery flows content over multiple pages. From there, the designer can create elements that depend on that flow, like running headers, footnotes, tables of contents, and indexes. Bindery also provides print options like bleed, crop marks, and booklet ordering.

If you're designing a website, think about books as an extension of the responsive web. If you're designing a book, express your layouts programmatically, with no need for InDesign.

Getting Started

<div id="content">
  <!-- The contents of your book -->
</div>

<script src="https://unpkg.com/bindery"></script>
<script>
  Bindery.makeBook({ content: '#content' });
</script>

You can also install bindery from npm, or download directly.

npm install --save bindery

Using Rules

const { makeBook, PageBreak, Footnote } = Bindery;

makeBook({
  content: '#content',
  rules: [
    PageBreak({ selector: 'h2', position: 'before', continue: 'right' }),
    Footnote({
      selector: 'p > a',
      render: (el, num) => `${num}: Link to ${el.getAttribute('href')}`;
    }),
  ],
});

For more, see Learn and the Docs.

Developing

When contributing, keep in mind that bindery.js is intended to provide an approachable jumping-off point for HTML-to-Print exploration. Because of this, it is intended to work out of the box as a script tag (without needing to run a dev server, set up a development environment, use preprocessors, or know javascript at all).

• npm run build - Updates dist/
• npm run test - Runs Jest

To Do

• Support for signatures and advanced ordering
• Support for RTL languages
• Examples for use with blogging platforms
• Examples for use with React
• Approachable API for writing custom rules

Background

bindery.js was originally written in Spring 2014 for for/with/in, a publication from participants in "HTML Output" at RISD. For more, see here.