Accurately mark up and apply the required reading order for complex spreads with multiple overlapping objects
This tutorial targets the preparation of the reading order for complex illustrated ebooks.
See the associated tutorial Accessible Fixed-Layout ebooks to cover other aspects of the workflow.
The complex and eye-catching designs of many illustrated books result in them not following a predictable reading order.
These may include text effects, mixtures of fonts, rotated text, overlapping elements, illustrations and graphics, annotations, callouts, quotes and more.
Establishing the reading order is essential for the reader's understanding of the content and to meet accessibility requirements.
Circular Software provides a suite of tools to determine and apply reading order to different kinds of objects found within complex layouts.
The steps to follow are listed below. Let's get started!
Before reaching for software tools the first thing to do is to read and understand the flow of information on the page.
Assess the spread and consider how images will be described and married with the text to establish the content’s sequence and reading order.
Note that larger images may need to be split into their component parts to best describe their different elements.
Depending on the complexity of the publication, determining the reading order may be quite subjective. Establish a method early on for a selection of spreads and aim to be consistent throughout.
Illustrated books with double page spread images that cover the entirety of the left and right page need to be treated differently when converted to ebooks. By design, fixed-layout EPUBs consist of individual pages so content must be on each page in isolation.
Adventurous print designers may play with the book’s form such as, changing spread orientation or stretching images and text across the fold. Therefore It may be necessary to adapt content so the reading order is re-established by page.
In the same way an image’s description cannot span both pages of the ebook. See more in 7. Image regions
Being aware of both the benefits and limitations of the EPUB format will determine the different content types for page objects, which will be covered in more detail in the following steps:
Creating the different types of content and determining their reading order is covered in more detail below
Live text in Fixed-Layout EPUBs is displayed using HTML and CSS. This maintains original design choices of position, font, size and colour etc. but allows additional functionality such as adding notes, searching, selecting and reading aloud to be added (depending on the ebook reader used!).
All InDesign text is assumed to be Live Text regardless of its layer. If isolated on one or more text layers in InDesign this can help with the editing and production process. GreenLight print designers may choose to keep the text on the language layers that it uses for translations. e.g. TEXT-UK.
Where a designer has used text transformations e.g. for faux italic (skewing the text where a font has no italic type style), this skewing is not supported in an EPUB exported from InDesign.
To workaround this issue, we recommend replacing such text with a different font that has a type style for italic and will therefore be supported.
If a transformation has been used consistently, then the use of Find and Replace InDesign Edit Menu > Find/Replace can speed up the process and ensure all cases are dealt with predictably – e.g. set the Find Format to Carrotflower skewed at a 14˚ angle and the Change Format to Aunt Mildred Italic font skewed at a 0˚ angle as shown in the image below:
Users can save complex InDesign Find/Replace queries to reuse again.
Paragraph returns should only be used to start the next paragraph.
Where text needs to turned to the next line for design or legibiity reasons a forced line break should be used instead, whether in print or digital layout. This will ensure paragraph settings such indents and spacing are applied correctly as well as ensuring text read aloud does not pause mid sentence.
To add a forced line break choose (InDesign Type menu > Insert Break Character > Forced Line Break) or type Shift-Return
To see the symbols for hard returns ¶ or soft returns ¬ within text choose (InDesign Type menu > Show Hidden Characters)
Where multiple Paragraph Returns need to be replaced with Forced Line Breaks, consider using InDesign Edit Menu > Find/Replace to speed up the process. Press the @ symbol to choose special characters in the Find/Change fields.
As shown in the example above, not all Paragraph Returns should be replaced with Forced Line Breaks so we recommend only changing selected text.
Users can save complex InDesign Find/Replace queries to reuse again.
Where text effects are used, including text on a path, cropped text, skewing and scaling, these are treated as Display Text and can be placed on a temporary Display Text layer to help with organisation.
Additionally text may make up part of an image meaning it is not helpful for it to be read aloud.
Display Text is combined with images so should instead be included in image descriptions where useful.
By splitting larger images into smaller regions we can add more focussed descriptions into the reading order.
Large illustrations spanning across the entire spread must be split into regions to make it possible to add image descriptions for accessibility.
CircularFLO will substitute these quotation markers with the Open Quote or Close Quote alt text automatically on export.
Tip: Where there is a lot of display text, we recommend starting from a postion of all text being on a display text layer, then creating a new live text layer and moving any live text frames up to this layer.
Whilst working, it can be useful to have content temporarily split onto more layers e.g. Arrows or Display text.
Before exporting, the base layers need to be merged together to a single FLO_BASE layer for the best results. See step 11.
Further info available at InDesign help article on layers
GreenLight automatically creates the layers it requires, including:
We recommend text to be positioned above underlying artwork to provide better accessibility and achieve image quality at lower file sizes and with cleaner code.
If not already separated onto layers, CircularFLO can lift text from the images of fully illustrated books, a tool is available to Lift live text from base artwork
Following the assessment of the page in step 1, it is important to now:
Circular Software reading order tools give a way to add reading order by selecting objects in sequence and drawing regions over the page.
Along with text frames, images and their captions, regions and full page artwork may also be added into the reading order.
The applied reading order is shown with overlaid non-printing visual markers on the page which can be shared with others for approval.
GreenLight provides tools to both manually and automatically identify the reading order of the text and other content. Typically, for complex layouts:
NB: Ensure that the Image Region does not extend across the centre fold (or gutter) when defining, as each book page is treated as a separate HTML page when exporting to Fixed-Layout EPUB.
Alternatively, for more straightforward pages with an obvious reading order (top to bottom, left to right) choose GreenLight Tools menu > Reading Order Tools > Auto define Reading Order
All objects on the page are processed, with InDesign's active page taken as the starting point and a choice offered whether to process solely the current page or to continue to the end of the document.
To amend or clear the applied reading order choose GreenLight Tools menu > Reading Order Tools > Amend or clear reading order and select the appropriate option from the dialog
Choose whether to clear the reading order for the current page, or to amend the existing reading order.
If amending, hold down the shift key when selecting objects in the new reading order, then hit the 'R' key when done to apply.
It may be quicker to change the number for the reading order marker by selecting its text with InDesign’s Type Tool and editing as required.
In some cases we may want text to appear on the page but not be added to the reading order – e.g. a running head or page number. This can be hidden by moving it to the FLO_BASE layer or by applying a paragraph style whose name contains the word 'HIDDEN'.
The marking of different types of content in previous steps has established their reading order but for more complex illustrated books this may not be sufficient!
Panels give us extra control over these types of publication by grouping related objects together and marking them for each page.
NB: We are not using the InDesign Group function here!
The order of the panels should match the reading order of the page objects. Panel order is shown with page number and sequential letters. e.g. 12B for the second panel on page 12.
When viewed with an ebook reader that has support for EPUB Region Navigtaion, e.g. Colibrio Reader, panels help the reader to zoom in and move through the story at their own pace.
The sequence, position and size of these panels are added to the Fixed-Layout EPUB on export with CircularFLO.
Panel masks give a preview of the page areas defined as panels in the previous steps. When previewing each panel, the rest of the page is temporarily hidden (masked) in grey.
Panel masks are quick to add, and need to be added to every page as part of the process
Panel masks need to be added to every page as part of the file preparation process. To add a panel mask:
All panels are processed and then previewed sequentially.
When first creating panel masks, they will be previewed. To preview panels at any other time:
To change or edit the panel creation or masking process, we recommend removing panels and panel masks and starting afresh. To remove all panels and panel masks from a page:
Before exporting, the layers used for base artwork, display text, annotation arrows, quotation marks need to be merged together to a single FLO_BASE layer for the best results.
To merge layers, select the required layers in the InDesign Layers panel and choose InDesign Layers panel menu > Merge Layers.
Tip: The active layer (shown with the Pen Symbol) is taken as the merged layer name
Further info available at InDesign help article on layers
The layers remaining in a document ready for export, will typically include:
This tutorial has covered the process to establish complex reading order in a publication. To now export the document with CircularFLO we recommend following these steps from other tutorials:
In no particular order, here are some of the methods recommended by Circular Software:
