Web Platform Team Blog

Making the web awesome

Web to Print and seeing your work live, on paper

The surprise

Every now and then you get to see somebody using your work in totally unexpected ways. Whether it’s a computer case made out of Lego, a prom dress made out of soda tabs or a printed book created entirely using web technologies, it’s always surprising and prompts a “Wow!” moment.

We had such a moment when we initially heard from the developers over at SourceFabric that were working on BookType. They heard about CSS Regions and started using them in their web-based book publishing system. The reason they contacted us was that they hit some bumps in the road and were not sure if those were WebKit bugs or simply misunderstandings of the spec on their part. We cleared the issues, logging and fixing bugs where necessary.

Fast-forward a couple of months, about a dozen exchanged emails and a handful of WebKit bugs and BookType was pretty much up and running. The proof? Pictured above are two books made using BookType that the SourceFabric team was kind enough to send over our way.

I suppose I should’ve expected it, but it feels really really nice to see the cool things people are building using the technology you’re actively creating.

The tech bits

How does it work and where does Regions come into play, you might ask? Somewhat surprisingly, at least for us, Regions are used in the backend part of the system.

BookType is a web application for collaboratively writing books – it provides the necessary tools for composing the actual text of the book, for merging and managing contributions from multiple authors and for choosing and configuring the final layout of the book. The aforementioned features form the bulk of the front-end of BookType. On the backend, besides the obvious components for storing the actual book contents, there’s also a pretty nifty component for delivering the end-product: a book in PDF format, ready to be sent to print.

CSS Regions is effectively used as an advanced pagination (and layout) mechanism for breaking the continuous flow typed by the book authors into pages, complete with headers, footers, page numbers and footnotes. In a nutshell, this is done by flowing each chapter of the book into a named flow (using flow-into) and then dynamically adding new pages that consume that flow. Each page contains a region to consume the main body of text (via flow-from) and a couple of extra <div>-s for the other page elements: headings, footers, etc.. Pages are added on the regionlayoutupdate event until the value of the overset property of the named flow becomes false.

Then, chapters are rendered “on the server” using QtWebKit (the WebKit port included in the Qt GUI framework). QtWebKit has built-in support for PDF output so creating PDFs for each chapter is just a matter of a couple of lines of code more. Add a little more command-line scripting for joining and cropping the resulting PDFs – SourceFabric’s secret sauce 🙂 – and you’ve got a ready for print PDF.

The source code for BookType is available on GitHub – feel free to poke around, test it and, log bugs if you find any 🙂

Comments are closed.