Tech Blog

Viewport in Fixed Layout

A fixed-layout ebook page combining illustration and text
A sample fixed-layout page.

Children's books and books built more around images than text are designed using a method called "fixed layout." In this method, every object on the screen is positioned in a fixed or relative way to the others, thereby preserving the page's design even across different screen sizes - unlike reflowable text books, where the text fills one page or several pages depending on the size and type of font the user has set.

Creating books like these is a task that demands precision and a solid knowledge of HTML page design, along with an understanding of the various standards for fixed design.

A very important setting that helps produce such books from the outset is the viewport declaration.

This is a declaration aimed at the display system - meant to define the desired, required size for rendering the page. That way, across different screen sizes, the display system automatically adapts itself to the size required by the book's designer.

Recently we've come across quite a few books produced in Israel (in Hebrew) that were made with InDesign. In these books you can see a mismatch between the size of the image placed on the page and the viewport defined for that page.

In a check we ran, it appears that for some reason InDesign defines the viewport as the image size (a good start), but then sets a fixed size for the page's body (a bad idea) and places the image inside a div tag for which it defines a size different from the image's.

This chain of settings burdens the rendering engine and can, of course, cause problems such as cropping the image's edges or adding unnecessary margins.

As always - a word of advice to InDesign users - don't trust that everything happens automatically just by hitting "export." It's worth checking the values the system writes into the book's pages and understanding what each design setting is for.

A children's book? Interactivity? Converting from PDF? With FXLexporter you can create it yourself!

Especially for independent children's authors and book converters who don't like the terrible code that comes out of InDesign - we built FXL-Exporter, a graphical tool that exports finished book pages directly from Photoshop/GIMP, ready to be packaged as a clean, standards-compliant EPUB3 digital book.

The software is in beta testing and will be available for download in early 2018. More examples are available on our demo channel.

Need a hand with your ePub?

We produce professional ePub3 books

From reflowable to Fixed-Layout, KIDS and audiobooks - our Production Studio can help.