Digital Proofing with Chapter Overview
- Problem: Book content could only be viewed and proofed page-by-page.
- Solution: I built a feature that allowed users to view, resize, and scale all pages in a chapter simultaneously.
Inkling books are built using web standards: well-structured, semantic HTML and CSS. Viewing them requires nothing more than a web browser. But early in the development of our authoring and proofing tool—what later became Habitat—we had no way of previewing multiple pages at once, a standard feature of print design applications like InDesign.
To address this deficiency I created a prototype called Chapter Overview, shown above in Figure 1. After selecting a book from a dropdown in the upper left, pages are displayed from left to right using iframes, some tricky CSS, and javascript.
This bird’s-eye view enables editors and designers to see the book across an entire chapter. Small design aberrations and misalignments that might otherwise be missed become obvious when seen side-by-side with other examples.
Because all book content is built to be responsive the toolbar allowed editors to see the content at varying widths and font sizes as well as at different scales, pulling the eye away from the content to survey the vertical rhythm of the layout.
Focus
A "focus" feature is provided that allows users to select any element—headings, figures, callouts—causing all the instances of that element to be highlighted and the surrounding content muted. In Figure 2 below a h3 is selected. This is accomplished by adding a class to each h3, changing its z-index to be higher than a white overlay obscuring the rest of the page.
Isolating elements can help spot errors: for example, if a heading has been used incorrectly or a class is not used on the correct element. From here the user can also conduct a book-wide search for all instances using a separate tool called Fetch.
The prototype was well received and widely used in the office, but there was still one problem: because figures used in the books are high resolution, image-heavy chapters loaded slowly. Fortunately, when Chapter Overview was built into Habitat a few months later, as shown in Figure 3, an images API was established so that lower resolution images could be swapped in, significantly speeding up loading times.