https://github.com/evnbr/bindery

Book layout in the browser
https://github.com/evnbr/bindery

books javascript layout print

Last synced: 7 days ago
JSON representation

Book layout in the browser

• Host: GitHub
• URL: https://github.com/evnbr/bindery
• Owner: evnbr
• License: mit
• Archived: true
• Created: 2014-07-24T07:37:15.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2023-04-04T02:48:50.000Z (over 1 year ago)
• Last Synced: 2024-10-01T18:18:36.564Z (about 1 month ago)
• Topics: books, javascript, layout, print
• Language: TypeScript
• Homepage: https://bindery.info
• Size: 25.3 MB
• Stars: 410
• Watchers: 10
• Forks: 38
• Open Issues: 50
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
⚠️ Bindery is no longer in development. You may be interested in similar open-source projects like [paged.js](https://pagedjs.org/) or [weasyprint](https://weasyprint.org/), or commercial offerings like [PrinceXML](https://www.princexml.com/). Also, keep an eye on [CSS Paged Media](https://developer.mozilla.org/en-US/docs/Web/CSS/@page)'s browser compatibility. 

---

# Bindery.js

[![npm](https://img.shields.io/npm/v/bindery.svg)](https://www.npmjs.com/package/bindery)

[![Build Status](https://travis-ci.com/evnbr/bindery.svg?branch=master)](https://travis-ci.com/evnbr/bindery)

[![codecov](https://codecov.io/gh/evnbr/bindery/branch/master/graph/badge.svg)](https://codecov.io/gh/evnbr/bindery)

[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/bindery.svg)](https://www.npmjs.com/package/bindery)

[Intro](https://bindery.info/) ·

[Learn](https://bindery.info/learn) ·

[Docs](https://bindery.info/docs) ·

[Examples](https://bindery.info/examples) ·

[About](https://bindery.info/about)

_Bindery.js_ was 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

```html



  



  Bindery.makeBook({ content: '#content' });

```

You can also install bindery from [npm](https://www.npmjs.com/package/bindery), or download directly.

```

npm install --save bindery

```

### Using Rules

```js

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](https://bindery.info/learn) and the [Docs](https://bindery.info/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](http://htmloutput.risd.gd/),

a publication from participants in "HTML Output" at RISD. For more, [see here](https://bindery.info/about).