Instant textbook layouts for authors

The Coko Foundation works with large institutions to make publishing more efficient and more open. Just like us, Coko workflows aim for concurrency: getting everyone on a book project working on the same files at the same time. When we achieve that, we make better books more quickly.

The context

Imagine that you’re an author writing a new textbook. Normally, you’d be typing into, say, MS Word. You wouldn’t have any idea what your book will look like when it’s laid out. And it’s going to take months before you find out.

Raw manuscript in MS Word

Wouldn’t it be amazing if, instead, while you’re writing you could see a laid-out version of your book, at any point? That’s one of the goals of a truly concurrent publishing process.

That manuscript after layout

Coko has built such a system for the Open Education Network (OEN), a community of higher-ed leaders who champion open educational resources. They want to make it really easy and exciting for faculty to create new, open textbooks. And that includes making instant layouts a reality.

The aim

Coko approached Electric Book Works to play a part here, because we have many years of experience creating beautiful design templates for automated layout. Technically speaking, we know how to turn a graphic designer’s vision into reusable HTML and CSS code.

Our aim was to create a range of distinct, bold, beautiful textbook designs that could be automatically applied to an author’s work, while they were writing. The authors would be working in a version of Coko’s Ketida publishing platform. Ketida uses Paged.js to lay out book pages – that would be the underlying tech we’d work with.

The work

First, we created a code library that accounted for the most common elements of textbook design: basic styles for things like page numbers, blockquotes, and tables of contents. We would be able to build many different designs on this foundation.

Then we brought in our long-time collaborator Karen Lilje of Koki Design. We knew we wanted Karen’s stellar typographic skills on the team. Karen created several very different textbook designs, which included different page sizes and would appeal to different disciplines. For instance, business sciences might want a large page size with modern, sans-serif typography for big tables and complex diagrams. And the humanities might want a smaller page size with typography suited to long-form prose.

Then we brought Karen’s designs to life in HTML and CSS, as templates that could be loaded into the Ketida platform.

Three different designs for the same content, with automated layout.

You can see the templates in action on the sample content we worked with. Each of the links below will open the same source file with a different design template, laid out automatically by your browser.

Note: You’ll need to use Chrome, because that’s the only browser that supports the official standards required for this kind of layout. Automated layout is resource-intensive, so you may not get good results on a slow connection, if you have lots of tabs open, or if you let the page load in the background.

• Apollo: an elegant, conservative A4 design.
• Aphrodite: a bright and wavy design in a smaller page size.
• Demeter: a smart, sleek design.
• Gaia: a gentle, quirky design.
• Zeus: a strong, blocky design.

Our work on this project includes an open-source codebase for creating instant-layout templates for various platforms. If you’re technically curious, you can see and reuse the code on GitHub.