BookJS -- the Sourcefabric book rendering engine

When I started working with Sourcefabric last summer, one of the first tasks I was given was to check out Booktype and see why I wouldn't be able to use it for publishing books. I tried it out, and my main problem ended up being the print output, which looked nothing like what I had seen on the screen while editing the book, and did not look good enough for being a book. I presented my findings and was told that it was not currently possible to print something looking the way it looked on the screen.

"Really?" I thought, and decided to try some things out. After I presented my findings I was put in charge of BookJS -- a new PDF rendering engine for Booktype that promises to give Booktype the ability to create publisher quality books that make the view in the browser and the print look the same.

BookJS is still under heavy development, but over the past nine months it has achieved quite a lot of things that had been impossible until now.

These are some of the most outstanding features that BookJS currently has:

Page Headers and Table of Contents

Pages in books usually have running headers that specify the chapter and section. Also, one expects any book to start with a table of contents. If the programmer adding BookJS to your system specifies how section and chapter titles are specified in the input, it will create these elements by itself.

Columns

Browsers support columns, but if you try to print a page that has columns in it in Google Chrome or Apple Safari, they disappear. BookJS takes care of this and makes sure that books can have multiple columns that don't disappear if one prints it or creates a PDF with the browser.

Footnotes

At first sight footnotes seem extremely simple. They just go at the bottom of the page of where the reference to them is. But what happens if the insertion of the footnote at the bottom of the page means that the reference to it has to move to the next page? BookJS makes this happen. It can be done when printing or when showing a book as a static webpage in the browser. But even if one combines BookJS with a webbased editor so that the contents constantly change, it will make sure that footnotes and references are always on the same page.

Top floats

Sometimes one wants to have certain parts of the content always at the top of pages, no matter where in the page flow it is. The most common examples are probably pictures or figures with captions. Top floats are similar to footnotes in that they should be placed on a page close to where they are placed in the content flow, but differently from footnotes, they do not have to be on the exact same page. It is more important that no unusually large spots of white space are left.

Try it out!

If you are using Google Chrome, check out these instructions to get BookJS working in your browser, and then head over to this test for a live example of how a top float and several footnotes work in a simple editor.

To try out the live editing capabilities of BookJS scroll down to page one. Notice how it has a top float at the top that spans both columns and some footnotes at the bottom. Now click at the start of the paragraph that starts with "1 Lorem ipsum dolor sit amet..." You will notice that a cursor was inserted in there. You can now add or delete any contents. To see how BookJS is able to move footnotes and top floats around, simply hit "Enter". This will create a new line. Keep the Enter-key pressed until you reach the next page, and you will see how the footnotes and the top float gradually will move on to the next page as the references move further down.

BookJS and Booktype

In the next installment of Booktype a basic version of BookJS will be integrated to be used as an alternative renderer. The upgrade, which came out earlier this week, will provide users with the ability to add page headers and give a PDF output that just looks a little bit better than what Booktype was able to do until now.

If you are a developer, feel free to contribute and help expand BookJS. There are still many things to be worked on over the next few months -- such as word index capability or margin notes.

• Check out this blogpost that introduced BookJS.