Configuring FLO Spine Properties

Overview

Spine properties can be very complex. As the IDPF specification is made available in more ePub reading systems the organic use of the spine properties seems to be likely.

Because of this complexity, and the fact we are very early in the evolution of the second generation Fixed Layout (FLO) ePubs, with IGP:Digital Publisher (DP) we have decided to keep the spine properties configuration as an editable INI file that can be inserted into your DP document. You can see how to insert and use it on the IGP:Digital Publisher Formats on Demand site here ➤ and here ➤.

Because of the structure of IGP:FoundationXHTML (FX) it is possible to use a lot of shortcuts to create complex FLO spines should the need arise.

What is an INI File

INI means initialization. It is an informal standard for configurating software with a basic structure of sections and properties. An INI file is a simple text file that uses a few basic rules. These are:

[SquareBrackets] Defines a section.

; Semicolon is a comment.

: A colon defines a property

, separates mutliple property values.

That's it!

To use the INI file you insert it at the end of your document from the DP Insert Section tool. It is item 16 Fixed Layout INI Config. It arrives with a few default values which may have to be deleted.

The INI file is not required if you are making a FLO book where all the pages are the same. All pages get the master configuration properties by default and are over-written by any properties defined in the INI Configuration file.

The INI Sections and what they do

[common] Setting Custom Page sizes

You can configure custom sizes on a page by page basis for a document. Here is an example with the default viewport set to 800x600px (landscape), the cover is set to 600x800px (portrait) and two pages have been set to 500x500px (square). This is for illustration of the use of the various properties in the INI file and not an actual book!

[common]
XHTML: <meta name="viewport" content="width=800, height=600"/>
CUSTOMXHTML: class=Cover-rw <meta name="viewport" content="width=600, height=800"/>;
    id=page20,id=page40 <meta name="viewport" content="width=500, height=500"/>;

[common] This is the section for establishing the page size. There are two properties that can be defined in this section. 

XHTML: The page size properties that are applied to every page in the document. This is the same as using the Document Processing Instructions (DPI) form.

CUSTOMXHTML: Page sizes for specific pages based on their class or ID.

In this example we have applied a portrait size for the class Cover-rw and two pages have been turned into 500x500px using their IDs. Note the multiple IDs are comma delimited.

INI Syntax Rules

This small example also adds a few syntax rules (there are always rules).

1. Properties must be on one line. You cannot break them across two lines.
2. Multiple Properties on separate lines. If you are specifying multiple properties you must indent them from the left margin with spaces. We use four spaces for consistency.

[idpf] Setting custom spine properties

You can configure custom properties onto a spine item by filename class or id.

[idpf]
Declaration: prefix="rendition: http://www.idpf.org/vocab/rendition/#"
metadata:  <meta property="rendition:layout">pre-paginated</meta>
           <meta property="rendition:orientation">landscape</meta>
           <meta property="rendition:spread">none</meta>
spine: properties="rendition:layout-pre-paginated rendition:orientation-landscape rendition:spread-none"
customspine:
    filename=Glossary.html,properties="rendition:layout-reflowable";
    class=frontmatter-rw,properties="rendition:orientation-portrait";
    class=BookTitlePage-rw,properties="rendition:page-spread-center";
    id=appendix1,properties="rendition:orientation-auto rendition:spread-both";

[idpf] This is the section for applying generic metadata and custom FLO spine properties using these INI properties:

Declaration: This is the fixed layout declaration that is added into every page in the ePub. This is only required if the declaration needs to be changed for any reason.

metadata: This contains the three standard metadata items that will be inserted into the ePub OPF metadata. You can change the global values to your preferences. If you leave this blank, the options set in the DPI form will be used.

spine: This sets a property that is inserted into every spine item. The text in the property value is the exact text that will be inserted into the spine so be careful with your typing.

customspine: This is where customization starts to get very interesting. You can specify custom spine properties by filename, class or id. Filename is probably not of much interest at present so let's look at class and ID.

Using class. You can specify the properties by class. In this example we have used it twice. First the selector frontmatter-rw has been used to orient the pages to portrait, and then adding to this in the titlepage spine item BookTitlePage-rw is set to rendition:page-spread-center.

Using ID. You can target any specific page using ID. In this example section #appendix1 has been set to two page spread in either landscape or portrait orientation. To make that work the rendition:orientation-both has also been set. 

[aie_inclusion] Inserting Javascript into your FLO ePub

Many fixed-layout ePubs use javacript. You can include any mix of the standard AZARDI Interactive Engine Javascript into your FLO ePub at generation time.

[aie_inclusion]
include: yes|no
jquery:
    https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js,
    https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js
getpath: http://aie.infogridpacific.com/js/
files:
    igp_audio.js,
    pubsub.js,
    aie_core.js,
    aie_explore.js,
    aie_qaa.js,
    aie_textsound.js,
    aie_storyline.js,
    aie_events.js,
    aie_gameutils.js,
;XHTML:
jsinclude: all | filename=page1.xhtml | class=Panel-rw | id="game1"
jsexclude: TOC.xhtml

[aie_inclusion] This is the section where you configure the inclusion of Javascript into your FLO ePub.

include: Set the global instruction to include or not include Javascript. The default is no. Set this to yes for javascript to be packaged.

jquery: If you are using JQuery (and who isn't), set the path to the location where the javascript is to be installed from. In this example it comes from googleapis.com. If you are behind a firewall you may have to set up a local server directory and maintain the JQuery from there.

getpath: Sets the path for the location of the javascript you want to load into the FLO ePub. In this case it is our primary aie distribution server.

files: This is a list of the explicit files you want loaded into the HTML pages of your book.

;XHTML: This is a comment separating the files from the instructions.

jsinclude: You ca specify all, filenames, classes or specific IDs.

jsexclude: if you have specified all, you can also give a list of filenames, classes or specific IDs where the Javascript must not be inserted.

[apple] Apple fixed layout properties

You can set up the Apple iBooks properties in the Config INI including the guide text values that are required for the iBooks ePubs.

[apple]
platform: * | ipad | iphone
fixed-layout: true | false
open-to-spread: true | false
orientation-lock: none | landscape-only | portrait-only
interactive: true | false
specified-fonts: false | true
guide:<reference type="cover" title="Cover" href="$HREF$"/>,<reference type="text" title="Story start" href="$HREF$"/>
guide_detail:class=Cover-rw,id=cover1

[apple] The start of the Apple property definitions.

platform: set the target platform option. Use * for all

fixed-layout: set to true or false. Applies to the full document.

open-to-spread: set your preference.

orientation-lock: set your preference to true or false.

interactive: If your document contains Javascript set to true, otherwise leave it as false.

specified-fonts: If your document contains embedded fonts set to true, otherwise leave it as false.

guide: Insert the exact guide items you want comma separated with no spaces.

guide_detail: To define the cover file set the cover class statement and id reference.

Spine Linear Control

You can specify pages to be out of the book flow by using the spine linear="no" attribute on spine items. This can be used for both flow and fixed layout packages.

You can use the Document Processing Instructions (DPI) Section Reordering option to do this. This is explained in detail here ➤. Use the Linear No checkbox options. You will also probably want to remove them from the ePub3 Nav document, so also check the Nav No option.

You must use an internal document link to navigate to any sections that arelinear="no" in the spine. You can provide reverse links to allow the user to navigate back to the source page.