Bindery.js - Docs
bindery.js is a library for producing book layouts in the browser. The core library allows your HTML to flow over multiple pages, and provides an interface to preview and configure the resulting book. Bindery includes plugins that can express numbering, running headers, spreads, footnotes, tables of contents, and more. With just a couple lines of code, you can convert URLs to footnotes, generate fore-edge printing, dynamic font sizes, convert a video into a flipbook, and more.
<html>
<div class="content">
<!-- The whole content of your book -->
</div>
<script src="./bindery.min.js"></script>
<script>
Bindery.makeBook({ source: ".content" });
</script>
</html><html>
<div class="content">
<!-- The whole content of your book -->
</div>
<script src="./bindery.min.js"></script>
<script>
Bindery.makeBook({
source: ".content",
rules: [
Bindery.PageBreak({ selector: 'h2', position: 'before', continue: 'right' }),
Bindery.RunningHeader({ beginSection: 'h2' }),
Bindery.Footnote({
selector: 'p > a',
render: function(element, number) {
let href = element.getAttribute('href');
return `<sup>${number}</sup> Link to ${href}`;
},
}),
],
});
</script>
</html>Written in ES6, transpiled with babel, bundled with webpack. The only dependency is Hyperscript, for templating the UI, which is included in the bundle by default.
When contributing, keep the following in mind: The goal of bindery.js is 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 really know javascript at all).
npm run-script build- Webpack —> build/bindery.jsnpm run-script minify- Webpack —> build/bindery.min.jsnpm run-script lint- ESLints, using the Airbnb style guidenpm test- Runs Jest
- Test Coverage
- More control over spreads, ordering, booklet printing
- Examples for use with blogging platforms
- Examples for use with React
- Approachable API for writing custom rules
- Tutorials and Documentation
bindery.js was originally written in Spring 2014 for for/with/in, a publication from participants in "HTML Output" at RISD. It was based on the now-abandoned CSS Regions spec, polyfill by Remy Francois. With thanks to the contributions and feedback from Catherine Leigh Schmidt, Lukas WinklerPrins, and John Caserta.