Adaptive Layout

Adaptive Layout

As tablet devices become more and more common, magazines and textbooks undergo transition to electronic media. Unlike trade books that went through similar transformation earlier, these publications are traditionally designed with a lot of attention given to their layout. They are typically produced by high-end publishing systems, such as Adobe InDesign or QuarkXpress using fixed page size. This presents a challenge, since consumers use all sort of devices to read these publications and or best experience, content needs to be adapted to fit in specific device (or browser window) dimensions.

EPUB Adaptive Layout is a CSS-based standard to express these types of layouts for rendering on consumer devices, expressing rich layouts found in today's magazines and textbooks in a manner that allows efficient adaptations to device dimensions and user preferences (such as font face and size). It was developed by IDPF that defines the industry-standard format for ebooks.

This site presents an open-source implementation of Adaptive Layout standard which is implemented in JavaScript using a browser engine as a renderer. It could be used inside a standalone application to render Adaptive Layout content, or in a web application that renders content in a browser. While Adaptive Layout is developed for use in EPUB files, it is also possible to use it with regular web content without EPUB container. To give it a try, simply click on one of the "Samples" links. Use arrow keys to go from page to page (or swipe on hand-held devices). Alternatively, download a sample desktop application that can render packaged and unpackaged EPUB files, as well as XHTML that uses Adaptive Layout styling rules. If you have a choice, use Mac version, as it is has more features (e.g. conversion to PDF and MathML support) and it is in general more polished.

To learn how to write Adaptive-Layout-enabled CSS stylesheets, please refer to the spec and tutorial. Tutorial starts with a simple Adaptive Layout stylesheet and adds more and more features on each step. New parts of the stylesheet are highlighted in yellow.