Digital Publishing Hub
Help for publishers and students of publishing

I have been teaching eBook production from long before the introduction of tablets or the ePUB standard. In the early days we created PDFs and even added javascript to get fancy menus and sounds on buttons. Of course, the ‘eBooks’ could only be given away and were usually delivered on a CD-ROM. It was (and still is) possible to build very sophisticated full-screen interactive PDFs and to even build launchers for different operating systems. It was always possible to include Adobe Reader on the CD-ROM.

Unfortunately, many of the PDF eBooks that I produced are unusable, because the platforms have changed and Acrobat reader always seems to have so many security checks that it can be confusing for the user. In fact, much of the interactivity that utilises javascript, is now defunct.

The basic principles of design for the screen and usability are still the same, although now we have portable devices, and that is our priority target platform.

In my teaching of eBook production, I have constantly needed to update the technology that we use each year, while trying to stick to the tools that are most likely to be used in the publishing industry.

This book will also need to be updated as the software mentioned herein is updated. I do hope I can keep up!

Many of my students over the years have gone on to work as ‘Digital Creatives’ in publishing. If you are one of those students, I greet you and wish you well and hope that you can learn more from this eBook than I was able to cover during your course, either because we just didn’t have the time to cover everything, or, because you were with me during those early years where our current eBook production techniques were still over the distant horizon.

I would like to thank all of my students at Oxford Brookes University (past, present and future), for your patience, both with me and the idiosyncrasies of the software that we need to use. I would also like to thank my colleagues in the Oxford International Centre for Publishing Studies.

Lastly, I must thank my wonderful family (Daniela, Hannah and Zoë), for being with me when I photographed images of books during our holidays in Greece, Italy, France and beyond. These images are used in the landscape view of the table of contents pages.

Chris Jennings, Oxford UK 2017

This eBook was created during 2014 and 2015 with some updates in 2016 and 2017.

The fonts used are:

Avenir for the body text and headings and Chaparral Pro for the headings on the table of contents pages in the landscape mode.

This eBook can be viewed both in landscape and scrolling view on the iPad, but only in landscape mode on your MAC.

The images used on the TOC pages in landscape mode are my own and were taken mostly in churches and museums. They are simply there to show the image of the book and do not represent any religious intent.

The example eBook created uses the text of ‘A Midsummer Night’s Dream’ and images found in the public domain. This eBook of a Shakespeare play is not publicly available and only used in demonstrations.

ISBN: 978-0-9573556-6-8

© Chris Jennings 2017 @pageboy

The technology of book design has come a long way from the days of paste-up and Letraset.

Book designers and typesetters now use sophisticated software for page layout and combining text with image on a page is made easy with the ‘drag and drop’ toolsets. The problem comes when design studios are asked to produce eBook versions of their superb layouts.

What changes are required to the format and typography on the page before a successful eBook version can be delivered?

A Different Design Paradigm

It has become a cliché to say that everything has become digital. Many beautifully designed and produced books are displayed in our bookshops. I love to browse my local bookshops to search out great jacket designs and delightful typography on well chosen paper and bindings.

But the truth is, that the quality design and typography is very rarely seen in eBooks, and in spite of the rising sales of eBooks, many of these eBooks start as print books.

So how should print book designers approach their craft with the idea in mind that ‘this will be an eBook also’?

Changes in Technology and Publishing Tools

The technology and software for delivering the eBook has gone through many changes; from text on floppy disk or CDROM to PDFs delivered through the web. All of these are now potentially superseded by the eBook formats: ePUB for mobile readers and tablets and the independent Kindle format for the Amazon family of devices. Many of these systems offer a method of reading that allows the user some control over the reading experience; font size, line spacing, page orientation, margin width and even alternative typefaces.

The technology that delivers the content to the reading devices uses the same markup language of the web. When we read a page in an eBook reader, we are really just viewing through a frame onto an HTML page; as we flip to the next page, we move the page up to see the next block of content that fits in the frame. Although we swipe through to the next page, we are really pulling the content up into the viewing frame. To make a comparison to the printed book, the viewing frame is like the page, with some significant differences; the window size may change with the device or the orientation of that reading device and the type can be changed by the user to flow out of the viewing frame.

Publishers are currently faced with a number of options if they are to embrace the the new ways of distributing content to the portable devices such as eReaders, smart phones and tablets.

One of the advantages of Apple’s system as the distribution method is that your purchased eBook can be frequently updated to address any changes or edits that need to be made. The purchaser will be alerted when a new version is available. Those new versions will be free to download.

This book attempts to rationalise the various options, which techniques can be used and details the steps required to make the best use of the technology currently available.

How this book is organised

The eBook is organised in 12 chapters. You will find that the early chapters take you through the various techniques in using InDesign, but with special consideration for eBook delivery.

The general approach of this book is to presume that you want to create for both print book and eBook. Even if you are only interested in creating eBooks, this approach keeps your options open so that you can deliver the print ready PDFs if needed.

And if you are still only interested in print production— well, you can’t hold back from eBook production forever!

What we are going to do

From a public domain text of a Shakespeare Play, we are going to design a publication for print and then for eBooks in a variety of formats. We are using the public domain text of ‘A Midsummer Night’s Dream’ by William Shakespeare and will add various images; some in the public domain and some taken by the author. We will also use some multimedia (audio and video), to show how we can make an enhanced eBook.

Software Used

Many of the sections of this book use Adobe InDesign. This software has gone through many changes and when it comes to creating eBooks, the changes have been very significant over the last few versions. For the best results I recommend that you use the latest version of Adobe InDesign CC.

You will need to be using Photoshop to build the cover image and edit the pictures and add the image metadata.

You will need to be able to edit the ePUB file after export from InDesign and MAC users can use BBedit from Barebones to edit the ePUB. You can use Dreamweaver or Textwrangler (MAC) or Notepad++(PC) to edit the ePUB but you will need to ‘unpack’ the ePUB package and then re-pack. There are scripts available to achieve this easily.

The toolsets that we develop will be useful for your future projects.

Computers Used

The examples in this eBook are created with the Apple Mac.

Creating eBooks is somewhat easier using the Apple platform and since the target platform for the main examples is the iPad, this author has used the Apple Mac throughout.

The eBook that you are reading was created with Apple iBooks Author. We will be looking at using this software in a later chapter of this book.

Note: If you can only use Indesign CS6 (before Creative Cloud), then you may not get the best results and more editing of the exported ePUB will be required.

Version Notes

It is very likely that there will be new versions of the software used in the examples given. It is also possible that formats and devices will be updated. The author will attempt to keep up to date with these changes and will make updates to this eBook when necessary. The section under this heading will note the changes made as a new version is delivered through iBooks.

The version of this eBook is: Version 1.3

Using this eBook

This eBook can be viewed in both landscape and portrait orientations on the iPad. If you need to enlarge the text for more comfortable reading, then you can do so in the scrolling view.

In the scrolling view, images and videos are found in the left hand margin and can be enlarged with a single touch.

The Sample Content

The text of all of Shakespeare plays are in the public domain and can be found on the web in several places. There are different forms available but we want to keep things very simple initially by using plain text with no line numbers and character names written out fully (rather than abbreviated as in the first folio).

We will likely need to make some changes to the text before we use it to create the eBook. These changes are documented in Chapter 2: Asset Management.

Introduction

Publishers will be faced with difficult decisions; what format of eBook should we make and how shall we distribute it?

One can easily imagine endless meetings between executives struggling to make sense of the conundrums and how their decisions will effect the bottom-line. The course of action inevitably depends on a number of factors, some of which will change through time.

Is this already a print product, or are we just creating an ‘e’ version?

What form are the assets in; digital ready or is this legacy (print only) content?

Can we go back to digital assets before the print ready PDF?

What type of content are we publishing; predominantly text, or highly illustrated? Does the material require multimedia content (audio, video, read along).

What devices do our typical customers own?

How do we want to distribute the eBook? Through our own web site or through a vendor specific ecosystem; Apple, Kobo, Amazon etc.?

Which tools and methods are we able to use, or should we use an outsourced service to create the eBooks?

The ultimate goal would be that an eBook could be delivered in one common format so that any purchased eBook can be read on any device.

Although the ePUB standard was intended to be a common non-proprietary format, no one format will work on all devices, and some eReader vendors are determined to use their own system of software and tools.

The format of the eBook will depend on the delivery platform (hardware), the distribution method (ecosystem) and the creation method (software tools).

Choices

It is very difficult to advise anyone which is the best approach for publishing eBooks, because it will depend on so many variables. For what it’s worth though, here are my 3 points that you should consider:

If the content is mostly text, then build as a reflowable ePUB3 version and convert to mobi/kindle. This way, you get to distribute for most platforms. You can have nice typography, good table of contents with an attractive cover and chapter headings. You can use Adobe InDesign for this and by adding Amazon’s free KindleGen into your toolset, you get the Kindle version too by converting to the MOBI format.

If the content needs lots of illustrations, embedded in the text, with specific layout requirements (such as double page spreads, or full screen images), then you have to decide between iBooks Author (simple to use free software), that will only deliver to the Apple devices — or a fixed-layout ePUB that has limited support on devices other than the Apple tablets, but can (with limitations) be converted to the Kindle KF8 format (for Kindle Fire). You may need to consider your existing workflow and ‘in house’ skills when making this choice.

If there is a need to add significant amounts of multimedia, interactivity and even quizzes or multiple choice questions, then iBooks Author may be one option. There are APP solutions such as Mag+, Adobe Digital Publishing Suite and even HTML5/CSS/javascript frameworks, but APPs are very much tied to their target platform. Please note also that vendors such as Apple may not accept ‘book APPs’ unless they can show a significant reason to be outside the iBooks environment and in the ‘APP’ store’.

Publishers are under increasing pressure to develop workflows that enable their assets to be published to mobile platforms such as the iPad and the Kindle. Many book publishers are already using a variety of methods to create eBooks and where these equivalent print products are very text heavy (such as trade fiction) then this is very appropriate. But under what circumstances would it be better to create an ‘app’ rather than an eBook?

Currently the Kindle (Amazon) seems to have the market lead, in terms of sales of eBooks, although the iPad (Apple) does offer some more interesting opportunities for adding enhancements, since it is, essentially, a ‘multimedia’ device.

Where publishers need to produce electronic publications for portable devices (such as the iPad), that are very heavily reliant on illustrations (such as school or college text books, or travel or cookery books), then the reflowable format adopted for eBooks, may not provide sufficiently compelling features for the transfer of existing print products to the mobile (interactive) platforms. In order to build ‘interactive or enhanced eBooks’, publishers could look to the process of ‘APP’ development. One example of a ‘book app’ that goes way beyond what can be achieved with the ePub formats is ‘The Waste Land’, created by TouchPress, available from the Apple Appstore.

The Publisher’s Choice

Production techniques for print publishing involve (largely), page layout tools. Since the invention of ‘desktop publishing’ in the mid 1980’s design departments have used ‘drag and drop’ to create ‘wysiwyg’ designs - fine for delivery to the print shop. Unfortunately, much of this method bypasses the essential consideration of ‘document structure and flow’ which is required for eBook and APP development. In fact, designers who have a knowledge of web markup and styling (HTML and CSS) are already aware of these issues and may well be better placed to ‘take on’ eBook development, or, at the very least be involved in the process.

Fix or Flow

A print publication is fixed. Of course! But, when the equivalent is delivered for the screen, then there is a potential for this content to be ‘re-flowed’ to the size of the target platform. Indeed, on ‘eReader’ devices, the user can control the font size (and even the font), and so, the text will need to re-flow to fit the screen.

This relationship between print and screen can be demonstrated clearly if you download a public domain text from the Gutenberg Project. What you will most often find is that the text is provided as a facsimile of the original book; each line of text will have a ‘hard return’ or paragraph break at the end, thus representing the text on the printed page. These paragraph breaks will need to be removed if the text is to reflow for the screen.

Design Compromise?

Designing for reflowable output is more difficult than for fixed, simply because the designer loses some of the control over the appearance. This is particularly true for content that is a mixture of text and images and it may not always be possible keep an image exactly positioned relative to the text. The ePUB format uses a flavour of HTML (actually XHTML) to deliver the pages, and so, you might think in terms of web browsers and users’ screen resolutions - rather than fixed sizes. Having said that, eBooks delivered to the iPad can utilise a ‘fixed layout’ method, to solve this problem. There are several examples of children’s illustrated books and cookery books that use this technique.

The problems with eBooks as ‘apps’ and why you might avoid creating them.

Even though, the designer may want to see the same layout on the screen as is in the print version, there are significant disadvantages with book ‘apps’, and it may be better to find a compromise and pursue the ePUB format. The fixed-layout ePUB format is now capable of including many interactive features, multimedia and animation.

The Apple app store may reject book apps, unless they contain significant interactivity or multimedia, since they are trying to encourage the use of the iBooks store rather than the APP store as a means to deliver eBooks.

In the Next Section we we look in detail at the specific eBook formats and device types.

There are several eBook formats that can be used on a variety of devices. Each of these formats have evolved over a number of years and exist (in the wild), in different versions. Some older devices (eReaders) may not be usable with the latest eBook formats. Some eReader devices have become obsolete because they cannot support features that are present in recently published eBooks.

For this reason, publishers need to understand that if they adopt some advanced features that are only supported on the most recent devices, their potential market is reduced to only the latest hardware (tablets and eReaders).

ePUB

The ePUB format is an open format created (by consensus) through the International Digital Publishing Forum (IDPF). This format can be described as a ‘web site in a box’. The ePUB itself is a package consisting of HTML, CSS and assets such as images and other media. The package is delivered as a ZIP file with the file name extension- .ePUB. The package needs some very specific files and ordering as well as the XHTML and can best be explained by viewing the following diagram and screen image.

The ZIP package can be unpacked and the contents viewed and edited as if it were a web site with such tools as Adobe Dreamweaver or code editors like BBedit, Textwrangler or Atom.

Some software like Oxygen (an XML editor) and BBedit (MAC only), can edit the insides of the ePUB package without unpacking.

You will see from the illustrations here, that the ePUB format is a very specific arrangement of files. The XHTML files display the content, with styles from the CSS. Some other files that use XML to identify the metadata and the manifest and reading order. The package can include images, fonts and other media.

The ePUB format has gone through some significant changes and improvements and the latest version is known as ePUB3.

Earlier versions did not support multimedia, javascript, nor fixed layout, and display ‘engines’ on some early devices will only display features defined in the early versions of the format. This is another riddle in the publisher’s conundrum; by insisting that newly supported features are essential to a publication will lead to a poor user experience for owners of early devices.

ePUB3 in 2 modes

In the latest version of the format ePUB3, we have 2 available modes; the reflowable and the fixed-layout forms. They are different in the amount of display control that they leave to the user/reader. Within a reflowable eBook, the user may change the font size, the typeface and (on some devices), display features such as leading, alignment, justification and hyphenation. On the other hand, the fixed-layout form removes any such flexibility, and the page designer can arrange text and image on each page and be sure that this is how it will remain. The fixed-layout format is better for content that needs very specific page layout; the reflowable format provides more accessibility for the user.

Adobe InDesign (CC 2014 and beyond) can export either format (reflowable or fixed). However, the reflowable format has greater support and can be regarded as a responsive format.

The ePUB format can be converted to the Kindle mobi format (see below), and Amazon make available tools to make this conversion relatively painless.

A prudent publishing strategy is to create for the ePUB format first and then convert to the Kindle format from your validated ePUB file. This way you get the best of both worlds but you should test on the devices before release. Amazon will convert the ePUB for you when you submit the ePUB, however, you will not see the resultant Kindle version until it is already within the Amazon Kindle store and being purchased.

The Kindle MOBI format

The mobi format is also based on an open format although now it is entirely owned by Amazon. The format also utilises HTML and CSS, however the package is encrypted and is more difficult to post-edit. The HTML depends on some proprietary mark-up and experienced web developers would find it more difficult to modify anything within the code. Indeed, they might hate what they see! The HTML seems to hark back to early versions of HTML rather than the modern and elegant HTML5.

A more recent iteration of this format is known as the KF8 format; targeting the Kindle tablets, such as the Kindle Fire, which can display fixed format and media rich eBooks.

PDF (Portable Document Format)

We mustn’t leave this discussion of formats without mentioning the PDF, because we have quite likely been using this format for a long time and describing it as an eBook. We use PDFs to integrate all page layout, assets and fonts ready for printing but we also use the same (maybe at a lower resolution) to distribute screen displayable equivalents. PDFs appear on the screen as if they were printed pages, but more—we can search the text, annotate and distribute easily through a web site.

In some ways, distributing PDFs for a publisher is an easy option when the publication is in print form first. The difficulty comes when the publisher wishes to protect the work from copying, because this can only be solved by using DRM (Digital Rights Management) software. This can be expensive.

Online distribution stores like Apple iBooks, and Google PlayBooks, do not support the distribution of PDF, although Apple’s iBooks APP for iOS can read PDFs. eInk devices (Kobo, Nook etc) do not support PDF. Later Kindles do support PDFs but only by direct loading.

Apple’s Multi-touch eBook format

This format of eBook can only be created with Apple’s free software; iBooks Author. The eBook you are reading was created with this software.

This is definitely a proprietary format, only viewable on Apple devices (iPad or MAC) and is more difficult to define. It is a package of files in a container that has similar characteristics to the ePUB, but post editing the contents is not recommended! The iBook format can be read on the iPad’s iBooks app or on a MAC with iBooks (OS 10.9 and above).

This format can be regarded as a hybrid (both fixed layout and reflowable), because the content can be displayed as fixed (no user control) in landscape mode, and then in a reflowable (user can increase font size), in the scrolling view mode.

The eBook you are reading was created with Apple’s iBooks Author and can be viewed in scrolling or landscape view.

Accessing and reading eBooks

eBooks can be read / used on computers or portable devices. Software is available for the eBook to be read within a web browser or within reader software, but the main reason that eBooks are popular, is because they can be consumed on portable devices.

The portable delivery platforms can be divided into 3 types:

eInk devices
these are dedicated readers. They are not likely to be used for anything other than reading eBooks. They are black and white (currently) and some are backlit as well as front lit.

Tablets
These are backlit coloured devices that can be used for a variety if activities such as browsing the web or playing games. They usually come with eReader software.

Smartphones.
Some recent smartphones are quite large and offer a comfortable reading experience, but generally the small footprint phones are not a great way to read an eBook.

Hardware Platforms

There are 3 platforms that we need to consider:

The Amazon family of devices. These range from the basic Kindle (eInk) and the tablet devices known as Kindle Fire.

The Apple iPad and more recently the iPhone7+ which is large enough as an eBook reader. The Apple devices come with the iBooks application for reading eBooks, but the devices can also use other vendor’s eReader software.

Other Tablets and eReaders. These range from eInk devices like the Kobo and Nook, to the tablets from Samsung and others.

Amazon Kindle devices use the mobi or KF8 software format to display eBooks. It is also possible to view this format eBook within Kindle viewer software on devices other than the Kindle — indeed, because Amazon provide a free app for other platforms; you might say, that a Kindle format eBook can be viewed anywhere. It is important to realise that the Kindle family of products cannot use the ePUB standard eBook. The file must be converted from ePUB to Kindle/Mobi first.

The Apple iPad and iPhone as well as the Apple Mac itself, can view the standard ePUB format eBooks (both ePUB2 and ePUB3). The proprietary iBooks format (created with the free iBooks Author on the MAC), can only be viewed on the Apple devices. Adobe Digital Editions software is available for both MAC and PC and supports all ePUB formats..

Other devices accept the ePUB format, although (depending on the age and OS versions), they may not support all elements of the ePUB3 format. Not only do we have the devices, but the version of the operating systems and the eReader software. Devices other than the Apple systems use versions of the Android OS, that in turn will effect the quality of the level of support for ePUB.

Books in Browsers

It is important to mention a development in software, that has resulted in the ability to read an ePUB standard eBook within a web browser. The Readium Project has been supported by many industry leaders including the International Digital Publishers Forum (IDPF). By installing the Readium app into the Google Chrome browser, you can explore a reflowable or fixed-layout ePUB on MAC or PC. The Readium software does not support the iBooks format from iBooks Author.

Methods of Distribution

When an eBook is created it simply consists of a file. As an example, in this book we will create an ePUB of the Shakespeare play and the result will be a file named thus:

msnd.epub

The name of the file is arbitrary and chosen by the creator. In this case ‘msnd’ is used as a short acronym for ‘Midsummer Night’s Dream’. Further information about the file and eBook is held within the metadata. We will learn how to add the metadata to the eBook later during the various chapters. This file could be distributed to anyone by email or simply saving on a USB flash stick or sharing on a cloud service such as Dropbox or GoogleDrive.

The file itself then needs to be added to the user’s device (iPad, Samsung tablet etc). Mechanisms to achieve this are not that simple and may require attaching cables from computers or transferring via special apps. Tablet devices are somewhat easier to achieve this transfer, because you can use other apps such as email (emailing yourself from a PC and then grabbing the attachment through the device email app), or cloud storage solutions such as Dropbox. eInk devices (Kobo, Nook etc), do not have access to other apps, and so cables and sideloading is the only option.

The options above are rather unfriendly to your users and are really not a good option unless you plan to give the file away. Some publishers have a system of purchase through a web site and have determined to make life easy for themselves and their customers by delivering to a cloud service such as Dropbox. The publisher O’Reilly uses such a method and they do not use any file protection such as Digital Right Management (DRM). Once you have purchased an eBook from O’Reilly, then it will appear in your DropBox account.

Digital Bookstore Ecosystems

When we buy our eBooks through our digital accounts, our eBooks belong to us only through the system from where we purchased. This is not always true, but publishers do need to decide if they will put their publications through the vendor specific ecosystems.

Some of these stores are listed here:

Apple iBooks
The iBooks distribution channel is available from within the Apple iBooks app on iOS on your iPad. This is deliberately convenient of course. From your library you go to the ‘Store’ where the latest books are displayed for your pleasure and purchase! eBooks can be synchronised across other devices and read within iBooks on the MAC itself.

GooglePlay Books
This platform is supported on the Android operation system for many portable devices. You can also see here that eBooks can be viewed in the Google Chrome web browser.

Kobo Store
The Kobo range of devices includes eInk and tablets and they support the ePUB standard

Barnes & Noble
The Nook devices are used to deliver from the Barnes and Noble store. Strangely, they seem to now use the Samsung range of eReaders and Tablets rather than their own.

And so on…
Several other distributers are also creating their own apps for reading eBooks. Even some supermarkets like Sainsbury’s have their own.

Many of these systems on portable devices use the Adobe Toolkit to display their eBooks—this is the same as is used in the Adobe Digital Editions application for computers. Some systems are not kept up to date and use earlier versions of this eBook display engine.

From a publisher’s point of view, it seems sensible to get one’s eBooks on as many platforms as possible, but it is often difficult to test the display quality of your eBooks on their devices; some allow side-loading of the ePUB, but for some, I fear, that you won’t have quality control at all, and will only hear of problems when your customers report them.

Through your Own Website

It is possible through an eCommerce system on your own web site to sell your eBooks. Purchasers will be able to download the eBook file, once they have completed the transaction. If you feel the need to protect the file from further distribution, then you will need to make use of DRM (Digital Rights Management) software. This means holding information about the purchaser and relating this to the downloaded file. Adobe have a licensing server solution called Adobe Content Server although it does not come cheap and depends on the Adobe Digital Editions reader software on the client device. EditionGuard is an other option, although this still uses the Adobe solution.

If you research these solutions for yourself, you are very likely to conclude that having DRM is just not worth the hassle. If you are really concerned that your eBook will be ‘copied-on’, then I suggest selling through Apple and/or Amazon. This way, you can ensure that the DRM is handled through the vendor. When you publish your ePUB eBook through Apple, you do have a choice whether or not to include DRM.

Before we begin the process of creating our eBook we need to gather the assets needed and make some changes and modifications so that our endeavours will not only be easier but will show us a model for future processes when we wish to add to our publication series. After all, we must presume that this is not a ‘one off’, but rather an opportunity to build, templates, stylesheets and toolsets that can be re-used in future publications.

File Naming

Assets such as images, audio and video files, will eventually end up inside the ePub package with links for the HTML markup. This is how the ePUB format works. The assets are separate from the markup. This is different from your print-ready PDFs which will include all assets inside the file.

The ePUB format is really like a ‘web site in a box’ so you should pay attention to naming the files by avoiding spaces or certain characters. You will encounter validation errors if you use spaces in your file names, because the HTML markup will need to add the special code (%20) for ‘space’ to the markup, thus spoiling the link to the file. You should also avoid characters outside the normal range of letters and numbers. Hyphens and underscores are allowed but not slashes, pipes, ampersands etc.

Having said that, the later versions of InDesign (CC 2014+), does strip out any spaces and illegal characters. Nevertheless, it is good practise to use appropriate naming conventions.

Editing of the Assets

If we are familiar with using InDesign, then we will know that some of the assets can still be editing outside of the program; we can edit our images while maintaining a link to the file. We will look at different editing techniques for the different asset types, in particular, text and graphics. The workflow issues that take place amongst production teams when eBooks are required are even more challenging than when print books are in progress.

Collaborative Working

You are not alone; it may well be that you are reading this and you are part of a team involved with the design and production of books. You will need to be able to work alongside colleagues who have different responsibilities. Perhaps you are an editor or a jacket designer, or the picture editor. The question is, what it the best approach for workflows that end with a print book and an eBook?

Cloud Services such as Google Docs and Adobe Creative Cloud for teams can be used to maintain version control over assets. Edits can be rolled back and set for approval. There are enterprise level services such as Alfresco (this also has a community version), that can be used to manage resources.

It is worth noting that some phrases used in discussing various technologies can be confusing, since there is not always agreement about these terms. I will try to make it clear here what we mean and why we use these expressions:

Content Management System (CMS)
Sometimes we use this term to refer to software that can manage all types of content, however, it usually means web based systems that manage, author and edit web content. Many web sites are created and maintained with such systems. Examples are Drupal, DotNetNuke and Typo3. For clarity, some commentators have started to use the term Web Content Management System (WCMS). This distinguishes it from:

Enterprise Content Management Systems (ECMS)
These systems are put in place to manage an organisation’s documents and other content that are used in the processes of that organisation. Some systems will also provide web authoring services (possibly at an intranet level). ECM systems usually include records management and workflow management.

Digital Asset management Systems (DAMS).
This systems may fulfil some part of (2) above, but in the creative industries, they are often focussed on the management of image and multimedia assets.

Content Management is becoming an umbrella term to cover all of the above, but I have found that when discussing these technologies, the term does not mean the same to all parties! One often needs to distinguish between the different systems.

Publishers’ Needs

Publishing companies are organisations that will benefit from systems that manage the processes towards publication as well as managing the assets that make up the published material. It, therefore, stands to reason that publishers are looking for systems that could provide all of the above services to:

Manage their public facing web site with user friendly onscreen authoring and editing

Maintain all types of assets used in published material (images, texts, digital files etc), together with their metadata and rights management

Manage the workflows throughout, from authored originals to print and digital outputs. Provide collaborative environments with timelines and approval procedures.

Maintain records and documents used in the business processes; such as communications with authors, rights holders etc.

These technologies that help in the publishing workflow and the delivery to multiple channels are fast becoming available, and often through ‘open-source’ software. One crucial aspect of this, is an implementation that will offer a smooth transition from traditional digital workflows.

Text Sources

Our text will come from a variety of sources including book authors and editors. What form is the text in? Will we receive the text un-styled, or will we need to abandon any styles that have been applied? have we been fortunate to be able to impose a style template on our authors? Are we using a document management system (see the previous section) that has used a change management and editorial approval system.

When we use text from a public domain source, it is most likely that the text was taken (scanned) from a printed text. The graphic representation of the letters will have been converted to real text using optical character recognition software (OCR). The results are likely to be good, but we will get a facsimile of the original. Where we have paragraphs of text (prose), the line endings will be false; that is, they will be as in the printed page and will not allow our lines to flow and break, when the page width dictates.

This means we will need to replace these artificial breaks with a space character. Life is too short for us to do this by hand; one line at a time. We need to find a way to make global changes.

Hang on though! This is Shakespeare, so we have a mixture of prose and verse! This is a challenge, to be sure, but, we can use pattern matching to identify what needs changing, and what stays the same.

GREP

Pattern matching is available in several text editors and is known as GREP (Global Regular Expression Pattern or ‘globally search a regular expression and print’).

Let’s have a look at a piece of the Shakespeare play that we are working with and try to find patterns that might help us search and replace elements throughout the text.

Here follows some text from ‘A Midsummer Night’s Dream’ as scanned from a printed edition. This shows Quince and Bottom talking in prose and Puck and Fairy talking in verse.

Spot the difference between a line break in verse and an unwanted line break in the prose text. The difference is that in the verse, the break is followed by a capital letter on the next line. In the prose, the next line starts with a lowercase letter.

Note: There maybe some exceptions to this; if the following line in the prose, starts with the name of a person or city, then the pattern rule described will not work. In this case we will need to search these exceptions out and correct them.

We should also note some other issues with this ‘raw’ unedited text; the character names are represented with uppercase letters and the indenting of the lines is achieved through multiple spaces. We will need to remove all of this (artificial) styling so that we can apply the styling that we need with better and more consistent control. The fact that the character names are in uppercase letters will help us when we search for a repeating pattern in the text. Sometimes it helps to hold back from making changes until you have seen the potential patterns in all of the text.

We may also note that the character names that ‘head-up’ the speech appears at the start of the first line of that speech. I am going to suggest that we may want to put this character name on it’s own line. You could leave the character name in this first line, but this will limit the possibilities for styling (and positioning) this element separately. All of these things can be changed globally throughout the whole of the play text by using GREP.

There are several excellent books on the subject of Regular Expression Pattern matching (GREP), and this book is not the place to learn the pattern matching syntax in great detail, however, we can go through the routine to make the required changes described above.

Note: In the next chapters we will be using InDesign to create our eBook. InDesign has sophisticated pattern matching software built in, and so we could place our unedited text into InDesign and make our changes there.

If you are planning to use iBooks Author (our alternative approach) then I advocate using BBedit (or TextWrangler) before we place the text because iBooks Author does not have GREP built into its search and replace engine..

We will look at GREP with InDesign (and Dreamweaver) in the later chapters.

Find and Replace

To make things easier to understand, I am going to divide the find and replace operations into small steps. It is possible to use our powers of logic to conduct a more complex operation and get our result in one step, but the explanation of this may be difficult at this stage.

The first step is to locate each character name and put on a new line:

^\s{2}([A-Z])([A-Z]+).\s

This complex looking string of characters and numbers actually means the following:

at the start of a line, 2 spaces, a capital letter followed by more capital letters a full stop (the full stop is represented as . in order to not confuse with GREP’s use of the dot for any character) and a space.

And now the replace syntax.

Each standard parenthesis is numbered in turn so the first bracket ([A-Z]) is number 1 and the second bracket ([A-Z]+) is number 2. We keep 1 and turn number 2 into lowercase. This is followed by a line break. Thus:

\1\L\2\r

Now we plan to find the artificial line breaks in the prose by using:

\r^\s{4}([a-z])

We replace this to remove the line break, taking care to include a space instead.

We should always test these ideas out before making dramatic changes to our text, and, in fact, in this last operation we have some cases where we have failed to make the change. When the prose breaks before a capital letter (such as ‘I’), then our pattern is broken. The snapshot below shows that the capital The ‘F’ in the word French also spoils our pattern. Luckily this does not happen too often, so we can manually correct these cases.

Keep a copy

It is worth noting that our original text represents a facsimile of the printed copy so we should keep this for reference to help in our styling later.

We are going to remove the unnecessary spaces next, so keeping a copy to reproduce the indentation through style rules is essential.

Leave all this Until InDesign

The examples given here show what we can do to process the text before our workflow towards the production of an eBook. However, if you intend to use InDesign to build the eBook, there are significant advantages to leaving the text unprocessed and then utilise the sophisticated GREP features in InDesign. The reason for this is that you can not only change the text but apply styling at the same time. Keeping the text in a raw state may help us in our pattern matching within InDesign.

We are going to illustrate our Shakespeare play with images from various sources. Some of these images are in the public domain, others, are photographs of forest scenes.

Resolution

Your work in print production will inform the necessary resolution of the images used in the book. You will have learnt that you need the highest quality. Keep your original images in high resolution. At least 200DPI is needed for print, but when you export to the ePUB format, the resolution may be reduced to keep the overall file size of the eBook down.

Although we may not need our images to be in very high resolution like we do for print purposes, we will need to give our users the ability to enlarge them from within the eBook, to fill the device screen. The images within the pages of the eBook may even be small thumbnails, but our goal is to create an interactive eBook, where tapping will give us a ‘zoomed-in’ view of the content.

The message here is — provide the largest images you can and let the software reduce the image sizes down appropriately when the eBook is created.

If we use the images in print as well as the eBook, then they will need to be in a higher resolution (more than 200DPI). Dimensions (pixel width and height) are what will count, in the eBook.

Image Types

Ultimately the images in the eBook will need to be in PNG or JPG format, however, for the exercises in this book we are using Photoshop to make edits. This is not the place to cover the marvellous capabilities of Photoshop, but if this available then I recommend that you keep your edited versions in the proprietary Photoshop version, with the layers and modifiable adjustments. Adobe maintain the link between Photoshop and InDesign to our advantage—we can ‘place’ Photoshop images straight into InDesign (or indeed iBooks Author).

Bitmap or Vector

Images from our digital cameras or scanners are stored as information for each dot or pixel, what colour it is and where is it placed in the x/y plane. These are ‘bitmap’ images. On the other hand, ‘vector’ images are stored as information about the geometry of the construction; lines,fills, shapes etc. The latter format is often used for maps and flat artwork. An example of this file format would be SVG (Scalable Vector Format). Simply put; we can scale a vector image by mathematically modifying the positions of the vectors and points. Text itself is also vector information and this is why we can increase the displayed size of a PDF without reducing the quality of the text. The eReader software, used to view the eBook should be able to enlarge images, however, we cannot make something from nothing, so you should always maintain the largest size possible in your asset library.

Metadata

This will not be the last time we mention metadata! Our eBook will need metadata (information held in the file about itself), but if we add metadata to our images, this can be used in the alternative text (ALT text in the HTML) and also possibly in the captions when required. If we maintain good metadata for our images, we can guarantee that this information will stay firmly locked-in to the image wherever it exists.

In the upcoming chapters we will describe how this information is used with the eBook.

The Cover

The cover of the eBook is a special case and it’s format and proportion will depend on how you intend to distribute the eBook.

I recommend that you keep the cover image as a separate graphic and maintain a high resolution and large pixel dimension version, from which your smaller versions may be built. When it comes to distributing the eBook through the Apple iBooks (if this is your intention), the size requirement for the cover graphic is that it is 1400pixels along its shortest side.

Your book cover will come from the complete jacket design and you may have a different process for the construction of the jacket or book cover layout, so you may take the eBook cover from there by cropping out from the Photoshop file or the print-ready PDF.

eBook covers should be in portrait format.

Before discussing the various formats for audio and video, I should point out that including this type of asset in your eBook is likely to increase the overall file size significantly.

There are limits on the acceptable size of the ePUB file from different distributors. Whereas Apple can accept 2GB, you can only convert a 50MB ePUB file to the Kindle / Mobi format; Barnes and Noble can accept a 650MB file. Even though Apple will accept a large file, you are imposing a long download time for your customers as well as occupying a large proportion of their 16GB iPad!

Not all devices support multimedia. The basic Kindle and other eInk devices will not support it and only later Kindle Fire models will.

Yes, of course you want the best possible quality for your audio and video, but try to strike a balance between quality and file size.

Audio

Probably the most supported file type for audio is mp3, however Apple recommend that audio be encoded to mp4 with the file extension .m4a. There are many tools available to convert audio into different formats and, if you use InDesign, the audio can be ‘placed’ in a number of formats including WAV. The ePub format will support WAV audio, and when you export to ePub from InDesign, the file will not be converted from that format, so you may need to convert the file yourself; suitable for Apple distribution.

The Kindle KF8 format will support audio but only in mp3 format.

You should make sure that your audio does not include a silent portion at the beginning. Users will expect the audio to start straight away without delay, so trim any empty space using an audio editor such as ‘Audacity’.

Video

As with all other embedded media, the balance between quality and file size is your choice. The video should be good enough to play full screen on the tablet devices, so that when the user invokes the full screen option their experience is a pleasant one! eBooks are not really the right place to show long epic videos; you knew that of course.

Format

The format of a video for use within iBooks on the iPad should be H.264 in an MPEG-4 container and the file extension.m4v or .mp4. There is much more to the specification required by Apple, and developers should read Apple’s Asset Guide for further details.

Poster Frame

You will need to include a poster frame that shows in the place of the video before it plays. This may be grabbed from the video itself, or built as a graphic image using Photoshop. The image for the poster fame should be in the same proportions as the video. InDesign and iBooks Author has an option to select any frame from the ‘placed’ video to use as the poster-frame.

Animation

We can use InDesign’s tools to add animation to our eBook, but this is only supported in the ePUB(Fixed-Layout) format, and will only be exported (as javascript and CSS), when using the export to ePUB(fixed-layout) feature of the later versions of InDesignCC.

Versions

Adobe launched InDesign in 1999 and since that first version it has gone through many updates and improvements. Many publishers and their outsourced designers use InDesign, but it is important to note that the features that result in eBook output have improved significantly since those earlier versions.

If you are using InDesign earlier than version 5, then you will not be able to get ePUB output. Versions 5.5 and CS6 do have the ability to export to ePUB but there are some significant anomalies with the output file.

Since the release of ‘Creative Cloud’ versions of the Adobe family of software, there have been some important improvements to the way the export to ePUB routine functions. The examples used in the book you are reading uses InDesign version 11.2.

We can expect later versions to change and so I will endeavour to keep this book up to date as this happens.

Page Size for a reflowable eBook

eBook only

If you are starting a new project with InDesign and your intention is purely for eBook then your page size should be chosen for Web Publishing intent. Margins can be set up to help you visualise (approximately) the way that the eBook will look with default (12pt) font size settings. If I am starting a new (eBook only) project then I normally choose for Web intent (640 x 480) portrait, single page. You see in the image alongside here the margin settings to approximate the iPad. If you have chosen a larger page size, then a 12pt body text will look rather small within InDesign.

From a Print Project

Well it doesn’t really matter that much! You do not need to change the page size from the settings of the printed book and you can even leave as double page spreads if you like. When exporting to the ePUB(reflowable), the page size and page margins are ignored.

Orientation

In a reflowable eBook, the orientation will always be portrait. If your print book is square or even landscape, then this is not what you will get in the reflowable eBook. This is different for the fixed-layout eBook, however, there will be further settings needed when we have exported to the fixed-layout type of eBook.

Master Pages

Your master page items that you have so carefully designed such as page numbers and running heads, will be ignored when you export to the reflowable ePUB. This is good. It means that you can leave them alone in the print ready version. Make sure that you have not brought any of these items to the foreground (by overriding master page items). It will be possible to use these master page items in a fixed-layout ePUB.

Single Files or Book Panel?

In a long book there is an advantage in using the book panel to organise chapters and sections. The example that we use later will make use of the book panel and we can export our ePUB from there. Each InDesign file within the book will become a separate XHTML file within the book, so, naturally, this will always start on a new page.

Fonts

You will be choosing fonts that you have on your system for the print production workflow; these fonts will be embedded in the PDFs for print output.

Embedding

When you export your ePUB from InDesign, then you will have a choice to include these fonts in the ePUB. Some font vendors may prevent you from embedding their font; in which case you may get a warning message at the time of export.

Licensing

Although the font files within the ePUB will be obfuscated (to prevent on copying), you should check to see if the licence arrangements for this typeface will allow distribution within an eBook. Devices such as the iPad have their own fonts built-in, and so you can specify those fonts without the need to embed.

Microsoft Word

If our text comes from a styled source such as from Microsoft Word or LibreOffice, then we can optionally include the styles that come from that text source. Once again it is important to switch on ‘Show Import Options’ at the point of ‘placing’ into InDesign. For MS Word, the dialogue box offers a number of choices.

Templates

It is possible to set up a template in your word processor, and instruct authors to use the styles provided in the template. When the documents are then placed in InDesign, the template styles can be mapped to the InDesign styles.

Post Editing ePUB

In the example workflows given in later chapters we will explore editing the internal components of the ePUB package. We have 2 choices here:

Unpack the ePUB and then edit the individual files (XHTML, CSS and some XML files); this is the most versatile of methods, since we have free and open source text editors at our disposal.

There are some software tools that give us the ability to edit the components without unpacking.

Unpacking the ePUB

If you are working within the MAC environment then I suggest downloading ePub Zip/Unzip - a script that will, not only, unpack the ePUB but repackage after editing. On a PC (Windows), this is slightly more complex; you will need first to rename the file, with .zip instead of .epub. Then use an unzip utility, to extract the files. You can then edit the components, but to repack, you cannot simply re-ZIP. You need to download a utility called ePubPack.

Editing the ePUB (after unpacking)

It is important to remember that the files internal to the ePUB are a mixture of markup and assets. Markup text must not be edited with any word processors that might add styling or save in proprietary formats. My preferred editors may not be the same as others and this is not an exhaustive list.

Textwrangler

This MAC software comes from BareBones and is free. The more sophisticated purchasable version (BBedit) is to be preferred, since you can edit the inside components of the ePUB without unpacking.

Atom

Another free text editor for the MAC and PC. Available from Atom.io.

Both of the above tools will open a folder of files as a project, so that you can work on the various ePUB components together.

Dreamweaver

If you are a subscriber to Adobe CreativeCloud then you will have access to the web site design tool; Adobe Dreamweaver.

Once you have unpacked the ePUB, then you can create a local site and edit the XHTML files and the CSS as if this was a collection of web pages. The design view will give you simulation of the content, although not directly as a page in the ePUB. There are some particular configuration setting required for Dreamweaver.

Direct Editing of the ePUB

Some software tools are available to enable editing of the ePUB components whilst keeping the package intact.

BBedit

This is my personal preference and is a very powerful text editor that has good search and replace integration and the GREP features are terrific. This software is purchasable for the MAC from BareBones.

Oxygen

This is a very sophisticated XML editor and toolset, and maybe more than you need. It is available from Oxygen.

Sigil

Sigil is simply an ePUB editor, designed to create and edit ePUBs. If your aim is to ‘roundtrip’ back to InDesign, then I do not recommend this tools because the folder structure will change as soon as the ePUB is opened for editing.

What is XML?

XML is eXtensible Markup Language and is a non-proprietary format that can be used as a future-proof way to store content. XML indicates structure rather than style; in fact XML includes no information about appearance, only structure, hierarchy and element taxonomy.

Here is a sample of some XML of ‘A Midsummer Night’s Dream’:

Enter Egeus

EgeusHappy be Theseus, our renowned Duke!

Tags

What we see in this example are various elements of the content surrounded by the markup using tags that (effectively) label the content as to its meaning in the structure.

For example marks up the text that is identified as just that; stage directions.

The naming convention for tags is quite strict and you cannot use spaces in the names, nor can you start a tag name with a number. Certain other characters are not allowed; ampersands, exclamation marks, brackets etc. Also, XML will notice the difference between upper and lower case letters, so would be different from .

Why do we want to Use XML?

For publishers it makes a lot of sense to store content in a form that allows it to be re-purposed for different platforms. We can move from XML content through page layout and on to the three main publishing platforms; print, the web and eBook. By storing our content in XML and then mapping the tags to our styles and templates, we can build visually consistent products. The ‘holy-grail’ of publishing workflow is to be able to work with XML right through the editing, design and production workflows. XML is a format that can be programmatically altered and re-structured, and so it should be possible to flow edited XML into our templates and push out print and eBook from the same content.

The most difficult part of the process is converting the source material (author’s manuscripts), into an XML form and complying with a certain number of rules and structural restrictions. A Document Type Definition or a Schema is used to control these rules and there are methods for taking word processed documents (using Microsoft Word for example), and converting to XML.

Web First Process

Some publishers use web interfaces and server technologies in their workflows so that editors and production staff work together in a collaborative online space, to construct and edit content which is then programatically turned into XML. This XML is then ready to be used for layout and production.

InDesign and XML

Adobe InDesign can import XML and the XML tags can have their equivalent paragraph and character styles to which they can be mapped. If there is synchronisation between the page designer / typographer and the structural form of the incoming document then InDesign can act as the staging area for the 2 most important controlling aspects of the process; the structure and the presentation. The structure is controlled by the XML and this is then mapped to the layout and design of the elements through a direct relationship between the XML tags and the InDesign styles. Here follows the XML marked up version of ‘A Midsummer Night’s Dream’.

The Document Type Definition (DTD)

You will notice mention of the DTD near the top of the the XML text. Here is the DTD:

<!ELEMENT shakespeareplay (dramatis,play)>

<!ELEMENT dramatis (dramatis_head,dramatis_personae,play_location)>

<!ELEMENT dramatis_personae ((characterName+,characterDetails+)*)>

<!ELEMENT play ((act,(((firstscene scene)+,location?,(stage_directions character prose verseline)+))))>
<!ELEMENT location (#PCDATA scene_image)*>

<!ELEMENT dramatis_head (#PCDATA)>

<!ELEMENT play_location (#PCDATA)>

<!ELEMENT persona (#PCDATA)>

<!ELEMENT character_role (#PCDATA)>

<!ELEMENT act (#PCDATA)>

<!ELEMENT firstscene (#PCDATA)>

<!ELEMENT scene (#PCDATA)>

<!ELEMENT stage_directions (#PCDATA)>

<!ELEMENT character (#PCDATA)>

<!ELEMENT prose (#PCDATA)>

<!ELEMENT verseline (#PCDATA)>

<!ELEMENT scene_image (#PCDATA)>

<!ATTLIST scene_image href CDATA #REQUIRED>

<!ATTLIST shakespeareplay title CDATA #REQUIRED>

This DTD is a set of rules defining how the text is structured with particular reference to the hierarchy of elements.

When we import the XML into a previously created InDesign template, the XML element names will then become tags in InDesign. We can map the tags to the styles. Parent elements are the text frames. In this case one text frame is ‘dramatis’ and the other is ‘play’. We can then drag these elements into their respective frames and the text should appear correctly formatted. We may need to auto-flow the text onto new pages.

InDesign Namespace and special XML tags

You will notice that the XML contains some very special markup that is used to tell InDesign where to break the content into a new paragraph. InDesign doesn’t know the difference between inline markup (character styles) and new lines (paragraphs), so you will need the following where a break is required:

This in turn needs the following in the head of the XML file:

How do we create this XML This is the most difficult part and, in some ways, is probably why many publishers will not be using an ‘XML first’ workflow. There are various XML editors on the market, such as Oxygen XML. It also possible to convert other formats to XML, but the most sensible robust method would be to build a web first system; content edited in a web interface, and programatically converted to XML before being downloaded. Some systems exist like this already, but software developers who are skilled in implementing content management systems should be able to construct interfaces for editors and designers to collaborate in a virtual space, delivering XML to output for a number of platforms including eBooks and print ready PDFs. Should we Use XML now? Although there is no doubt that using XML in the publishing process represents the ‘Holy Grail’ of production workflows, the following chapters leave this to one side and focus on a more hand-crafted approach, where the print book designer is being tasked with generating eBooks from their print production workflows. When working with text from sources outside InDesign, we are likely to find that we want to make changes as soon as we ‘place’ in InDesign. Unstyled Text We are working with a public domain text (Shakespeare play) that has been created by scanning printed pages. This means that the text is a facsimile of the printed version. What we will find in the text are lots of spaces that move the text across the page and paragraph breaks where lines were artificially broken at the end of a line. Here is an image that shows a sample extract of a scene in my text editor (Textwrangler). I have switched on the invisible characters; you will notice spaces and line breaks. It looks as if the first line includes the name of the speaker and this spoken text is in verse. The stage directions are displaying as centred, but this is achieved by spaces added. This is because my text is a facsimile of a printed edition. I need to be aware of this. I can leave this alone before I place the whole text into InDesign, but eventually, I need to remove these spaces, and get the spacing needed by creating a style in InDesign. You can optionally prepare the text in a word processor and use the styles to create your basic layout. I prefer to leave this aspect until the text is placed in InDesign. We could remove these spaces and paragraph breaks, but my advice is to leave spaces alone until we have placed into out InDesign document. A Replacement Strategy The reason for leaving these unwanted spaces in the text, is that we will be looking for patterns in the text, to help us use Search and Replace across the whole of the Shakespeare play text. We can remove breaks (or carriage returns) between the paragraphs when we ‘Place’ the text. Switch this feature on when we place the text. Placing the play text in InDesign After we choose ‘Show Import Options’ we can opt to remove the unwanted paragraph breaks between paragraphs. I am presuming that you have prepared an InDesign document with the page size, margins and master pages. It would also make sense to prepare paragraph and character styles. Before we construct our book and place the text, we should consider the elements in the text and what structure we will need. Analyse the Content Do we have a major element on which we can base all other styles? A body text perhaps? What are the elements in the Shakespeare Play and the Introduction that will need to be styled? What is the hierarchy of these elements? Construct an Outline Outlining is a useful way to build text content and in our book publishing workflows, we might even suggest that our authors and editors use a provided structure set out as an outline that can be used to standardise the way our texts are constructed. Show the hidden characters It is important to let InDesign show you the characters that do not print. You can view these by going to the Type menu and then at the very bottom select ‘Show Hidden Characters. You want to be able to see spaces and paragraph breaks, because you may need to replace those with the spacing rules in the paragraph styles. Having placed (and flowed) our Shakespeare text into InDesign can observe the unwanted spaces and begin to look for patterns that will help us make changes and even apply styles. Let’s get styling With the text tool select all of the text and with the paragraph styles showing select the verseline style created above. Everything will begin to look better. Now with nothing selected make your adjustments to the style as you see fit. Put your text cursor in one of the verse lines. Adjust the style to your liking. Same with the stage directions, ACT and Scene. You can see here that I have now created some styles for the headings and stage directions. I have created a style for the lines of verse but have only applied to one line so far. I now want to apply this to all lines, so I will use GREP to help with this. The spaces that you see are not acceptable for the eBook; but I will use the pattern to help me match the text to the styles. Find and Change Rather that go through the text by hand and apply the styles, I will use search and replace to make global changes. The question is, how do I locate the text to change? Can I apply a style to all lines of verse without changing the stage direction style? GREP GREP is a technique available within InDesign that uses regular expressions to find patterns within the text. Looking at my text with hidden characters showing I can see that if I search for 4 blank spaces followed by an uppercase character, this will capture the line of verse. Then I can remove the spaces and also apply my style throughout. In the screen image opposite, I have searched for:
^\s\s\s\s(\u) and I replaced with $1 (the contents of the bracket in the Find what box). I also changed to the paragraph style required. More GREP is used to locate and change the stage directions, ACT and scene. The unwanted spaces that are within my text help me identify these patterns even though I plan to be rid of them! The Character Names There is great variety in the way the character names are displayed in Shakespeare play texts. Some texts only have an abbreviation for the name. Many have the name in uppercase and in the same line as the first line of the speech. We have lots of choices. My plan is to put the character names on their own line, change the style and also put in as title case rather than all in uppercase. The Steps in GREP Here is the GREP that use to find the character names in the text: ^\s\s(\u\u+)\. This means: beginning of paragraph, at least 2 spaces, 2 or more capital letters followed by a full stop and a space. I want to keep what I find inside the brackets. If your Shakespeare play has characters with more than one name with a space between the words (such as ‘FIRST FAIRY’) then you will need to use a second search term: ^\s(\u\u+)\s(\u\u+)\. If you want to type the pattern matching codes into the Find/Change dialogue box, then you will need to learn the syntax. There are many good books on Regular Expressions. I suggest reading about InDesign and GREP in: GREP in InDesign - By Peter Kahrel
Publisher: O'Reilly Media
Released: October 2008 Choosing GREP terms from the InDesign Find/Change menus To the right of the Find What and Change To text fields the @ sign will take you to a number of choices which will enter these pattern matching codes for you. Here we see this menu where we select ‘Any White Space’. The ‘Change To’ menu choices are different, because we will want to keep some parts of the text and add other items. In this case we want to keep what is in the brackets and add a paragraph break. Our ‘Change To’ field becomes: $1\r Changing Styles with GREP The next step is to apply a paragraph style to these character names that are now on their own line. We can use the Find/Change method again but this time use the Change Format selector tool. You may wonder why we cannot do this at the same time as the first Find/Change. The reason is that having added the paragraph break in the first step, and because this will be selected with the successful change, the following line will also be styled. This, we do not want! UPPERCASE or Not? In my source text all of the character names are in UPPERCASE. That is they have been set with UPPERCASE letters. I really don't want this; I want to control the case by style rule. Maybe I even want to use small-caps? GREP in InDesign is great, but it doesn’t replace letters with a change of case. Text editors outside of InDesign can do this (TextWrangler for example), but to achieve this within InDesign we need to use a script. We need to use a script in combination with a GREP search. The script that I plan to use does not come with a released version of InDesign, so you will need to locate one and add it to your copy of InDesign. The script that I have found works best is Search and change case by Thomas Silkjaer. How to add a script to your copy of InDesign You will find the Scripts panel under the Window>Utilities menu. When you have this open locate the User item; right click and then reveal in the finder (MAC only). You will need to place your script inside the Scripts Panel folder. We can make use of this again to change the case of other occurrences of the character names in the play or the Dramatis Personae. Note: Be careful using scripts that go through a repeating process, because it will be virtually impossible to UNDO this. Make sure that you save your work first. Introduction Quite often we will be working with very long publications that will benefit from the concept of separate files for separate sections or chapters. There are also advantages from having individuals in a team, work on different InDesign files (with common styles), and then bring them all together inside one book. InDesign uses the concept of a ‘book’ that comprises of separate InDesign files; the ‘book’ is a parent file that ‘ties’ together the various individual components. What is an InDesign Book? An InDesign book (the file ends in .indb), is nothing without at least 2 InDesign files. You can initiate the book file when you have some InDesign files to place into it, or you can leave this part of the workflow, when you are ready to create the table of contents and output the file for print or digital. The Style Source When you create an InDesign book, you are going to combine different files within the same book, and potentially these files will share styles, master pages and colour swatches. Only one of these InDesign files will become the style source, so you should be advised that there could be a conflict of style names, when you synchronise the book. One easy way to remove the risk of losing some styles in any of the InDesign files, is to load styles from one document into another before you put together in the book. You can do this from the context menu within the paragraph style palette. This will give you a chance to resolve the conflicts and decide which style to keep in the receiving document. Introduction When you start an InDesign Book from the File menu, it is simply empty of content. To add files you can drag and drop onto the panel, or click the + sign and chooses from the finder. One file will need to be the Style Source and the styles in that document will override the styles built in any other documents. Once you have decided on the Style Source, only the styles changed there will matter to the whole book. More About the Style Source If you need to change a style that is only in one particular section of the book, then you can change the Style Source to that file just while you make the change to the style (so you can see what you are doing). All styles should be present in the Style Source, but you may need to move the Style Source to help you when you get a visual handle on the style in question. In my example, the Play includes a verseline paragraph style that is not used in dream_preface (the Style Source), so I need to change the Style Source to the play (dream), temporarily. Page Numbers Of course you are presuming that InDesign will take care of page numbers throughout the book. You would be correct, and you will find that you can customise the way the page numbers continue, Synchronise Options When the InDesign files are synchronised through the Book Panel context menu, there are many features that can be combined and you can choose which aspects to synchronise and which to keep within the separate book files. How much you change here depends on how important it is for you to maintain consistency throughout the book. As you can see from the Options panel above it would be possible to switch off paragraph and character styles during the synchronising procedure. However, it would be better to maintain consistency throughout the book, and just keep the styles attached to the Style Source. Master Pages Master Pages (that use the same name) are prioritised from the Style Source document. This is true unless you turn this off in the Synchronise Options. The Table of Contents Building the TOC can happen in a new InDesign file, that uses the same page size as the other files in the book — or you can simply add to the first page of the front matter. When creating the table of contents (menu>Layout>Table of Contents), be sure to select ‘Include Book Documents’ Editing individual files One advantage of the book method of working, is that you can divide long books into individual chapters or sections and work on them independently. If you are working in a team, then individuals can save their own workflows and then bring together later. If individual files are changed outside of the book environment, then a warning will appear alongside the file in the book panel. Opening the InDesign file, will remove this warning icon. Joining Up When you combine InDesign documents into a single book, the relationship between the pages at the point of joining may need to change. A single InDesign document that is intended as a double page spread will always start with a single page. If the number of pages is an even number then it will also end with a single page. If this document is part of an InDesign book, and you add a file before this existing one, then different things will happen, depending on the number of pages in the new document. If the number is even, then it will end with a single page. In this situation the pages will ‘dovetail’ and no pages will be added to the second document in the book panel. If, on the other hand, the incoming document has an odd number of pages (and, therefore ends with 2 pages in a spread), then the existing document will have pages add so as to start on a double page spread. If we do not have the final page in the preface (this is a blank page), then we will get the following: Ordering of Pages You will notice from the images above, that we have different page numbers for the Front Matter, to the rest of the book. The order of sections and the way they are numbered follows certain conventions in book publishing. Page Numbers all pages after the endpapers are counted, whether or not the page numbers are displayed. The half-title page would be the first to be counted. The usual way to number Front Matter pages is to use lower case Roman numerals (i,ii,iii,iv). The Foreword, Introduction and Table of Contents is part of the Front Matter. Our Life of Shakespeare text is probably, part of the front matter, because it is NOT about the play, but supplementary to it. The Dramatis Personae (the list of characters) is often included in the front matter, but, again, you may see this differently in some editions. The play should be numbered from page 1 in Arabic numerals. The Table of Contents comes after the copyright page. This means it is likely to be starting on page v. Table of Contents pages are NOT numbered but are counted. Finally: Your pages are likely to be as follows: Half Title (Just the title of the play) [recto] Blank Full Title (Title of the Play, Author, maybe date, and maybe including [with a brief Life of Shakespeare] - and name of publisher [invent one!]) [recto] Copyright Page (you can leave blank) Table of Contents [starts on recto] Life of Shakespeare (or whatever you called it) - [start on recto] Another half-title [recto] Dramatis Personae - [start on recto] The Play [start on recto] Note: 'recto' means the right hand page when the book spread is open How to Number Pages with InDesign Book Panel If you are trying to figure out how to display page numbers on the pages, then you need to refer to a different section about ‘Master Pages’, since this is where this is explained. Page numbering is defined in the Numbering & Section Options Panel. This is invoked by Right-Clicking over the thumbnail of the page where you wish to begin a section. In fact every InDesign document has, at least one section. Sections are indicated by the small downwards facing triangle at the top of the thumbnail image. You will see from the image that this section is numbered automatically but using the lowercase Roman numerals. At the bottom of this panel you may note that there is a Book Name, showing that the section numbering algorithm is aware that the document is part of a Book. Output from the Book Panel PDF for Print When you are ready to export for print, then you should do this through the book panel context menu > Export Book to PDF. You will only see this item on the menu, if you have either selected all InDesign files in the book panel, or — you have selected none. Package Book for Print This option will create a folder with all files, fonts and a PDF of the complete book. Export Book to ePUB We will explore the output to ePUB in a later chapter. Before you Build the Table of Contents For InDesign to automatically build the table of contents, it is essential that your headings and sub-headings are structured in the correct order and use a specific style set up in the paragraph styles panel. It is is critical that you do not use these heading styles anywhere else other than in the correct place as actual headings. Do not be tempted to select a heading style for some other text within your document. Also be sure that there are no empty paragraphs using any of these heading styles. What does Automating Mean? InDesign can place your table of contents (TOC) anywhere that you choose, and as you add content or change the text formatting within your pages, so the TOC will expand and add the correct page numbers (when you tell it to do so). Building the TOC You will find the controls for the Table of Contents under the Layout > Table of Contents menu. Make sure that you have switched on ‘More Options’ in this panel. You will see all of your paragraph styles on the right and you need to select each heading style in turn and add to the left panel. Pay attention to the levels (in this example you see 3 levels). Styling the TOC items This can be quite a complex routine, depending on your needs You will notice that (by default), the style being used as the entry style is [Same Style]. You, most likely, will need to select a different style. It is very likely that the style used for your headings will be forcing that item to move to the next page. In this scenario, your TOC may never appear, because it will always try to move to the next page for each item. The default paragraph styles palette will already include some TOC styles. You can use these, and then style for your own purpose and document style. Page Numbers You will want the page numbers to appear within the TOC and how these display is controlled by the paragraph style for the TOC items. Your reflowable eBook version will not display page numbers on the page. More on this later. In the example here, we have the page numbers appearing far to the right, at the edge of the margin. This is achieved by using the ‘Right Justified’ paragraph style. Tabs and Repeated Markers It is quite common to put a row of dots between the TOC item and the page number. How do we achieve this? In the TOC panel (see above), we need to add a TAB between the entry and the page number. Once we have made sure that the item is followed by a tab, we then need to adjust the paragraph style that we are using in that line of the TOC. First make sure that paragraph style is set to ‘Right-Justify’ in the ‘Indents and Spacing’ panel. Adding a line between the item and page number. For the style (in the case TOC Body text), we need to adjust the tabs and the repeated leader. Select the Right Justified tab marker and add the dot as the leader. Click on the ruler and then hit repeat. This can be very confusing and so I suggest that you have the Preview check box ticked, so you can see that it works as expected immediately. Saving the Table of Contents Style When you are satisfied with your TOC display, you can save this through the Layout>Table of Contents dialogue. Not only does this mean that you can re-use this style and configuration in other documents, but it also offers you the potential to create alternative TOCs for different content. When you export to the ePUB, you will choose this TOC by name. Other types of Tables of Contents You may also create a table of contents for your illustrations, tables and other figures. You will find the location for saving and loading your TOCs from the menu Layout>Table of Contents Styles: For eBook production we will need to replace the print version with something very similar but without the page numbers. We may also put the TOC on the paste-board instead of on the page, because some devices prefer to use their own method for building the interactive TOC within the user interface for the eBook reader. However, you may just leave the TOC where it is, but remove the ‘on-page’ version from the export routine, by using the Articles panel. We will read more about this in a further chapter, since this does depend on whether you are making a reflowable of fixed-layout eBook. Interactive Table of Contents for PDF When you create the TOC, you will notice the check box ‘Create PDF Bookmarks’ under the ‘Options’ panel. When selected, an interactive PDF exported from the InDesign file will include the TOC on the page (with hyperlinks to the appropriate page) but also, you can invoke a bookmarks panel in your PDF reader. Creating a Table of Contents for the eBook version Whichever type of ePub you are making from InDesign, you still have a choice about whether to include the TOC on the page or just within the reader software interface. Options for the Fixed-layout ePub. For a fixed-layout ePub, you can leave off the table of contents altogether (not recommended by me), and then the reader software will simply use thumbnails of each page as a navigator. If you do choose to include the generated table of contents on the page, then you certainly should include the page numbers, since those will be matched correctly. A better option may be to have InDesign generate the TOC in the file, but not exported on the page. We refer to this as the logical Table of contents. Options for the Reflowable ePub. The re-flowable ePub definitely needs the generated table of contents from InDesign, and this will be used in the reader navigation interface. Optionally, you can include the generated table of contents ‘on the page’, but the page numbers should be removed becasue they will only refer to the page numbers in the printed version. This ‘on-page’ version of the TOC will be interactive so that click or touch will navigate the user to their chosen chapter.. Keeping things simple for pBook and eBook If your workflow means that you are wanting both print and eBooks from the same file (wouldn’t it be nice?), then you can leave the table of contents on the page with it’s page numbers, but leave it out at the export stage. If you need to keep the table of contents in the pBook version, how do you then leave it off the page for the eBook version? When you build the TOC from Layout>Table of Contents panel, then you should create this as a separate story. It will then be in it’s own text box. With this in mind we can use the Articles panel, to build the structure of our eBook, but leave off the Article that includes the TOC. The lack of the tick in the box means that the Article named Contents will not be included on export. Introduction InDesign is a brilliant tool to design the display of type on a page. We have every possible control over the letters, the words, the lines, the paragraphs and how the blocks of type are shaped, spaced and aligned. Some designers believe that we have too many typefaces available to us, and this may well be true. Your job is to choose type appropriately. Don’t over mix styles in the same book. Recognise that headings, titles, captions and body text all have a different purpose in the book and on the page. Indesign Paragraph Styles InDesign uses the term paragraph, to mean any type element that lives in its own line — begins and ends with a paragraph break. This means a paragraph (of course), but also a heading, sub-heading or even a list item. Paragraph styles should be set for every different type of paragraph or heading. InDesign, does give us the means to control all aspects of a paragraph, but ultimately, it is best practise to build a style for consistency throughout the book. Paragraph Indication in a book There are 2 common ways to indicate that a new paragraph begins. The often used method is to have the first line indented by about the height of an uppercase letter of the typeface being used. In typography speak this would be 1em. However, you will need to choose a dimension based on your preferred units (millimetres possibly). If you use this style for body text, then you should not include a first line indent on the first paragraph following a heading. This means that you will need a ‘normal’ body text paragraph style and a ‘first paragraph’ style. Alternative way to indicate a paragraph, is to have a space after each paragraph. This could be around 1.5 times the leading on the paragraph. It is unwise to use both an inter-paragraph space and a first line indent. The first paragraph in a section or chapter is often treated differently with a drop cap for the first letter, or different treatment for the first line or range of words. Drop Caps and Nested Styles Setting the first letter in a line is possible by using the Drop Caps and Nested styles feature of the paragraph style palette. It is possible to increase the size of the first letter by a chose number of line, and you can also set up a character style for this first letter, if you wish to change other attributes such as colour or even typeface. You can also create a character style for the first line of the paragraph. If you prefer to only style the first few words, then use a nested style rather than a nested line. Drop caps and first line styles will successfully transfer to the exported ePUB, however not all devices will support drop-caps, nor the CSS needed for the first line. InDesign does often successfully create the correct style for drop caps, but you may find that you will need to make some adjustments to the CSS (inside the ePUB) to make the first letter position pixel perfect. Drop Caps and iBooks Author Unfortunately, the current version of iBooks Author, separates the first letter drop cap as an independent entity. Of course you can make this look correct, but it does mean that the word will not appear in a search list! Paragraph Alignment and Spacing Apart from distinguishing one paragraph from another, we should also pay attention to the space around the paragraph and how the type is aligned left, right top and bottom. In the ‘Indents and Spacing’ section of the paragraph style panel, we have a great number of controls that we should now explain. Alignment These choices really take the paragraph as a whole and organise the letters, words and lines to present the block in a variety of ways. The standard way to present a paragraph of body text is to have the left edge aligned with the right side not aligned at all, but be set as ‘ragged-right’. This means that the text flows naturally, with each line breaking when it runs out of space in the column. You can see the various choices of alignment here, and it is better if you experiment with these to see the results for yourself, however, there are some important things to consider when using any of the Justify choices. Reflowable ePUB Export Alert: eReader software gives the user some control over text alignment in body text. When text is set left-aligned then it may be possible for a user to set their reader preferences to justify the text. You may need to make some changes to the CSS within the ePUB package to prevent this. Justification Justified text may look awful because InDesign needs to space the words out along the line in order to achieve alignment both left and right. If the column width is narrow, then this can cause large spaces to appear between the words. There are some ways that we can further control this Justification. Under the Justification section of the paragraph style panel you can choose which method that InDesign uses to calculate the spacing to achieve alignment left and right. By choosing the Adobe Paragraph Composer, InDesign will go through the whole paragraph to help decide where to adjust word spacing. Reflowable ePUB Export Alert: The CSS that controls the styling of the eBook, does not have the same degree of word spacing control when exported from InDesign. Hyphenation Hyphenation can be used to break some longer words between lines. Using hyphens can resolve some spacing problems between the words, however, hyphenation comes with its own issues such as visual unpleasantness when too many lines of text end with a hyphen. Reflowable ePUB Export Alert: Once again we must remember that some eReader software gives the user the ability to switch on or off automatic hyphenation. Some clever editing of the CSS can avoid this. InDesign can use more sophisticated algorithms to calculate where to best place the hyphens and under the Hyphenation menu, you will see many choices. Introduction We can set verse with 2 possible techniques — we can either set each line with a paragraph break at the end of the line — or we can use a forced line break (using Shift-Enter) keeping the verse or stanza in one paragraph. There is a significant advantage when setting each line as a paragraph, — it means that we can use first-line indent and left indent in combination to get effective wrap control over the long lines in verse. With each line as a paragraph, we can use space-before and leading in combination to show the difference between the space between lines and the space when lines wrap. In our Shakespeare Play example we need to know the difference between verse and prose. Some of Shakespeare’s plays have more of one than another, but many have a good mixture of both. If we have received text from a facsimile edition — that is, the text is scanned and converted — we are likely to find that long lines are broken with a paragraph break. We must remove these artificial breaks because our prose text must be allowed to freely flow and only break when it reaches the eight hand edge of the column. Keep Options In the paragraph style options you will find the Keep Options section. From this panel we can determine that a topic heading (in our play this is the Act or Scene start) will always start with a new page. We can also control orphans and widows from these paragraph settings. Starting a New Page As with most page layout and word processor programs, we can enter a page-break, where we want to force a new page. However, it is better to make this a function and attribute of the style for the heading. It is often the case that we want a chapter or section heading to begin at the top of the recto page (the right-hand page in a spread). InDesign has this feature and we can see in the following image how we have determined that the Act in our play will begin on the ‘Next Odd page’ — the same as recto. Widows and Orphans Widows are those items that are left all alone, either at the bottom of the page or at the end of a paragraph. Reflowable ePUB Export Alert: When we export to the reflowable ePUB format, the Act will indeed start on a new page, but there is no concept of left and right even in the landscape view. If a single word appears at the end of a paragraph, on its own line, then it is said to be a widow and disturb the balance by providing too much white space. When the first line of a paragraph appears at the bottom of a page or column, then, again it is a widow and gives a poor reading experience. One word at the end of a paragraph and one line at the bottom of the page, are both undesirable, but are, not only, difficult to control, but have very different approaches. Widows at the word/paragraph level can be controlled by making the space between the last two words in a paragraph a non-breaking space. You can only resolve these individually as you encounter them at the very end of your design (for print) process. This will then ensure that there are at least 2 words on the last line. Alternatively, you can use the Balance Ragged Lines attribute of the paragraph style. This is found under the Indents and Spacing section of the Paragraph Style palette. However, this latter method does impact on all lines in the paragraph — you cannot apply this to one single line! InDesign provides the typesetter with ways of determining how many lines of a paragraph should be left behind on a page (orphan), or how many lines should appear at the top of the following page (widows). Gone are the days when we would adjust leading or font size, just to get the single line back onto the previous page! InDesign does not use the terms Orphans and Widows (#annoying), but rather uses ‘Keep with Previous’ and ‘Keep with Next’. The Keep Options in InDesign Using these features can be rather disconcerting, because small changes may move our text in a very dramatic way. My advise is that you work from the beginning of your text in InDesign and try to resolve these issues from the first pages. If you are previewing changes at a later page, your visible text, will suddenly disappear as earlier text is forced to shift on to new pages! The Page in a Reflowable eBook What happens to these ‘Keep Options’ settings when we export to the ePUB? In a reflowable eBook, the page is not strictly a page at all! When you are using eReader software to view an eBook, the screen is really like a frame - viewing a portion of a long scroll of text. Where the bottom of this frame cuts off the text (to be continued on the next), will depend on the text settings that the user has set. If the user has increased the font size (to make the reading more agreeable), then the page will appear to break earlier. The Keep Options setting will result in some CSS within the ePUB, but not all of these style rules are supported in the eReader software. Start Paragraph Setting When you set a heading to start on a the next page then the CSS in the ePUB will become: page-break-before:always; for that element. This will successfully push the content onto the next page. I should emphasise that in a reflowable ePUB, there is no control over the left and right page in a landscape view, although this may change in future versions of the ePUB standard. Keep with Previous and Keep with Next There is nothing in the stylesheet language that can hold separate paragraphs together, so the settings here are ignored. Keep Lines Together This InDesign style setting will prevent orphans (fragments of text left on their own at the bottom of a page) and widows (remnants of text appearing isolated on the following page). CSS does have these terms available for paged-media (when a web page is printed), and InDesign will add the following to the stylesheet when exported to reflowable ePUB: widows: 2;
orphans: 2; There is no support for these values in an eReader. Starting a Chapter or Section It is most likely that your chapters or sections are designed to start on a new page in your print intent. Your book design may dictate that a section or chapter starts on the recto page (right in a spread). Our reflowable eBook cannot be so restricted, however we can ensure that the chapter will begin on a new page and this will depend on your use of the book panel in InDesign. A reminder of the EPUB format. Look again at the structure of the ePUB package and you will see that it consists of XHTML files amongst other components. The reading order is defined by information held in one of the files in the ePUB, and this lists these XHTML files in order. When the eReader software encounters a new XHTML file then this will begin on a new page. Having a separate XHTML file is your guarantee that the chapter begins on a new page. In the next chapter we will also look at the other way to ‘split’ the book into these discreet chunks as well as further modifications to the CSS (post editing the ePUB). Pages and Illustrations You want an illustration full page Here is the problem: Your print book needs an image and a caption on a page by itself. This is the design of the print book. When we export this to the ePUB (reflowable), there is no certainty that the image will be on it’s own on the page. Text may appear on the page with the image if there is space for it. When we export to the ePUB, we can opt to force a page break before and after in the Object Export Options panel. There are circumstances where this is not enough. You really need to achieve a completely separate XHTML document inside the ePUB package and there is a way to achieve this with the help of InDesign and some editing of the CSS; post export. What we need is a paragraph style before and after the image that we can set to split the ePUB. This is where we need to consider adding some false content to the page. When we post process the CSS we need to hide this content with the following rule for this paragraph. p.splitpage {
display:none;
} You can read more about how we edit the inside of the ePUB package in a later chapter. When you make this kind of change to the print version InDesign pages, then you are setting a fork between 2 versions. If you want to avoid this, you can set the style of this false line to use a character colour of [None]; effectively transparent. You can also use this paragraph style to ‘Start on a New Page’ under the Keep Options for this style. The Baseline Grid The baseline in typography is the imaginary line on which most letters sit. The descenders of letters will extend below this line. Also, the body of some letters such as the J and Q in some typefaces will also extend slightly below this baseline. In Indesign, the purpose of using the baseline grid is to make sure that the text will align properly across columns or across the spine of the pages when seen in a double page spread. There can be something very uncomfortable looking when the text appears on a different alignment. This is always particularly obvious when the text reaches the bottom of the page. The paper used in a book may have some slight ‘see through’, and having the lines of text align (back to back), will reduce the ‘noise’ from reverse of the paper. There are several steps and various options for aligning the text to a common baseline grid. Baseline Grid Preferences One way to set the baseline grid in under InDesign>Preferences. You can start with this method, and change as you see for the whole document. You will notice that there is no way to preview this, so you need to set this up, go back to your pages and use the menu View>Grids and Guides>View Baseline Grid. The critical options for you in the Grids Preferences are where the gridlines begin (Start and Relative To:), and the increment. You probably want the gridlines to begin at the top of the margin. Once you decide to align the text to the baseline, then this will take precedence over any other settings, such as the leading on the paragraph. If the leading is set to something smaller than the increment setting, then this will be ignored. When the leading is set larger than the increment, then the lines of text will skip one baseline. The Space Before and Space After settings for the paragraph will also be over-ridden by the baseline grid.To align the text to base line grid you need to choose from the options found in Paragraph style palette for Indents and Spacing. Some features of the the baseline grid can be somewhat confusing, since your chosen units may be millimetres, but the baseline grid is normally set in points. Baseline Grid and text frames So far, we have looked at setting the baseline grid in the global settings. This is not ideal, since the setting is not tied to the document, but rather to your preferences. A better way is to set the baseline grid for the text frame(s) and this is best done on the Object Style. Setting an Object Style for all of your text frames where the text is threaded throughout the document will require an extra step. The way to apply an object style on a great number of text frames is to use the Find/Change dialogue and choose Object — Search for all object that are using an Object Style of [None], and applying your new object style to all. The Grid Alignment in the reflowable eBook When you export to the ePUB (reflowable) format, the baseline grid is ignored. For this reason, you must be sure to set the Leading and Space Before and Space After in the paragraph style settings, for it is those settings that will be transferred to the CSS in the ePUB. Remember that these settings will affect the way that the lines of text sit on the baseline but my advice is to turn off ‘align to grid’ temporarily so that you can see the results without the baseline grid. Baseline Shift In some circumstances you may wish to adjust the alignment of a paragraph to the baseline. Under the Advanced Character Formats you can adjust the baseline shift. In our play we can make the character name appear to the left of the speech as long as we have enough left indent for the longest names! Baseline Shift Issues When you use the baseline shift you may find that controlling orphans and widows through the Keep Options becomes less rational. You may need to increase the number of Keep Together line for this to function properly. Note: The Baseline Shift will be ignored when exporting the ePUB (reflowable) format. Threading the Story When we place our text into InDesign it will flow and add pages automatically if use the Shift key when we drop the text filled cursor on to the page. This text will be threaded and exist as one ‘Story’. View the text threads You should show the text threads when you are working with InDesign. You will find that setting under the View>Extras menu. Although it is possible to add text into different text boxes, the text in here will be unthreaded and a separate story. If I add a quote text box, and add some text to this, it will look great in the print book, but it will not be threaded to the rest of the story. For our print workflow this won’t matter, except that if we make any adjustments to the text flow, then this new text box will stay in this position on the page and not shift with the contextual text. If we anchor this text box, it will still be a separate story, but it will remain tied to this placing in the text. This has significant implications for the reflowable ePUB, because we will need this inserted text box to be anchored before we export to ePUB(reflowable). Because we want the main text to wrap around this new text box, we will need to anchor somewhere before the text in the columns of that page. text will only wrap around text that comes after the anchor point. Columns The easiest way to set columns in InDesign is to adjust the settings for the text frame, so that it has the number of columns that you need. When columns are very narrow, you should look carefully at the alignment of the text; when you justify text across a narrow width, you may find the space between words becomes ugly. The Effects of Threading and Columns on the Reflowable ePUB When you export to reflowable ePUB, the columns will be ignored and set to one column. Objects that have been anchored will appear in the correct location. Use the Articles Panel If all of your text is threaded in one story, then you should have no issues when exporting to ePUB (reflowable). If you have multiple stories, then if you do not take action, these stories will appear in the eBook in the order of your placing them into InDesign. If you work on a title page after the main text block, then this may appear at the end of the book. To get over this problem, you will need to use the Articles panel, wher you can order the content before exporting to the ePUB(reflowable) with the Order set to ‘Same As Articles Panel’. What we are going to do This work follows on from previous workflows in creating a Shakespeare play for print. We should already have an Indesign ‘book’ with at least 2 sections. We will export from InDesign for ePUB (reflowable) and then 'break open' the ePUB file and make some changes to some of the included files. What you need You will need to be using Photoshop to edit the cover image and edit the pictures and add the metadata. Note: You can use InDesign CS6, but some aspects of the ePUB export are much improved with InDesign Creative Cloud. If you use Creative Cloud then be sure to use the latest version. You will need to be using InDesign Creative Cloud (2014). The screen grabs in this document are created from InDesign version 10.1 You will need to edit the ePUB file after export from InDesign and I suggest Dreamweaver or Textwrangler (MAC), Notepad++(PC). In order to edit the ePUB package, you will need to ‘unpack’ the file and then re-pack. Prepare You should keep the original versions the InDesign files and book that you have used to create the print version. We may need to make modifications to the InDesign files, so I suggest that you archive the original work that you have used for the print version. Note: In an ideal world, creating a publication for both print and eBook, should be possible. But you will soon see that there are certain challenges to overcome. Book Pages For my example I am working on ‘A Midsummer Night’s Dream’. I have already created a version of my book ready for print. It has the following components. The Cover (I need to extract the front from the complete jacket previously designed). A half title page (I will abandon this in the eBook) A copyright page A Title page A Table of contents The Introduction The Dramatis Personae The Play I will also need to add a colophon We will export the ePUB (reflowable) from InDesign, but first there are several things we must consider and modify before we are ready to export. Illustrations You will want to illustrate your Shakespeare Play, so you need to gather the images in your images folder described above. The plan is to have at least one image for each scene of the play. Note: rename your images so that they have no spaces in the filenames. This will give you less problems with the ePUB export later. You will want to make some adjustments to these images using Photoshop perhaps. The images should be large enough to display in good quality within the eBook. They should be no smaller than 1000pixels wide in 72 PPI. InDesign will create the appropriate format for the eBook later, but, for now you are gathering your assets (text and images) and considering the structure of your eBook and how the play should display. The Cover The reflowable eBook will always be delivered as a portrait page, but the cover does not have to be! It is possible to make the cover in any ratio (height x width), but you should take note that the cover will be seen, first as a thumbnail (in the eReader software library) and then on the page of the book – but not filling the page. This means that if your cover is square or landscape, there will be a much reduced view of that cover. It is recommended that you make the cover in the proportion 8 x 6 portrait, or somewhere near to this. The Book panel The presumption is that you have used the book panel to manage your individual InDesign documents as a collection, so go ahead and open the book panel and view the first of your InDesign sections. We now need to address the various aspects of our previous work and how this will be affected when we export to the reflowable ePUB format. The Page The page size in my example is (portrait), 164mm x 234mm. This was set up for print and this is a physical dimension. If we were creating an eBook from scratch with no intention to make a print version, then we might use pixel dimensions. However, the print size will not effect the way the eBook is exported, but if we want to get a better idea of how the eBook will look while we are working with InDesign, then having deep margins and single pages rather than spreads is an advantage. When you get more experienced with eBook production, you should be able to work for the print and eBook versions within the same InDesign document. Creating print and eBooks from the same InDesign document is the ultimate goal—some might even say the ‘Holy Grail’! As you will see, it is often the case that we will need to modify some attributes of the InDesign document to get a better eBook result. Spreads Although we may have our InDesign set up as spreads, we have no absolute control over the recto and verso pages in a reflowable eBook. In fact we should avoid using those terms since they indicate front and back of the paper, rather than left and right! Some eBook reader software does provide a double spread view, and some tablets will automatically give you a left and right view when the tablet is used in a landscape/horizontal mode, but these left and right pages may not be the same that you see in the print version of the book. If our book design depends on the spread view; with images that cross over the spine, or images that bleed right to the edge then we should consider using the fixed-layout eBook format. In this book we are focussing entirely on the reflowable format and the many challenges that we face in getting beautifully designed responsive eBooks. We may need to make compromises but we intend to keep them to a minimum. Margins and Bleeds Different eBook reader software and devices already provide margins, and some even allow the user to adjust these margins, so your settings may be irrelevant to the eBook. With a reflowable eBook, there is no way that we can take content right to the edge of the screen. There will always be a margin. Content that goes to the edge for our print version, will be cropped or moved. Colour is Free In a printed book, colour costs money. An eBook does not have that constraint, and so you might consider using colour in your text. You may use colours for the headings or to give emphasis here and there. You should create the swatches for the colours that you will need. Perhaps you could take colour ideas from the cover that you already created. You should not overuse colour. It is always best to use a limited palette; be consistent and remember, readability is crucial, so good contrast between text and background is essential. CMYK or RGB? Where print ready PDFs need to have colour set for the process inks (cyan, magenta, yellow and black [CMYK]), eBooks need colour in RGB (red, green and blue). When we export to the ePUB format, the colour mode will be transformed automatically. CMYK will become RGB. If you use colour in the text, then I suggest that you define the colour with RGB values directly, because you will get a better result than if you leave InDesign to make the conversion from CMYK. Previously, we insisted that colour images for our print version should be in CMYK mode. If this is how your images are set up in the InDesign document, then all will be well when you export to the ePUB. If you are adding images specifically for the eBook version, then they can be left in RGB mode. Styles for the ePUB You will already have set up paragraph and character styles for the print production version. It is important that you use styles for every aspect of the typographic design and avoid where possible, overriding text formats. There are now some very specific details that we need to address for quality output to the reflowable ePUB format. Styles become HTML and CSS in the ePUB When we export to the ePUB format, the paragraph and character styles will be resolved into a combination of markup in the HTML and stylesheet definitions in the CSS. We have control over this output by using the Export Tagging section of the style panel. Styles for the Headings You will notice in the example here that the beginning of the ACT and the beginning of the SCENE in each case begins on a new recto page. This is because I have selected ‘On the Next Odd page’ under the keep options for this style rule. This forces this heading style to move to the top of the next facing page. We used this style setting for our print book. You will need to think carefully about how you want the headings to appear. Do you want to start the ACT at the top of a page? Will the Scene also start a new page, or only when it comes in a subsequent scene? This is an important concept in InDesign, and we would normally use this feature for printable documents. In our ePUB though we will need to apply some other settings before we export to ePUB. Controlling where pages begin is a challenge. Controlling where pages end is virtually impossible. Export Tagging You need to pay special attention to the Export Tagging panel because it will help you get a successful ePUB. Do not rely on InDesign to create the markup for you. Choose the tag and give each a class name. Class names are without spaces, however a tag can have more than one class name by entering a single space between them. Splitting for the ePUB The final attribute panel in the paragraph panel is ‘Export Tagging’. This is where we tell InDesign what HTML tag to use in the ePUB file. We also need to consider if our heading is an appropriate place to ‘Split the ePUB’ and how this relates to our table of contents. It is important that we use the correct level tags; h1 through to h6 for the headings but p for the paragraphs. Images and Text Images will need to be anchored in the text, so that when the text flows (when the reader has increased the font size), the image stays with the correct text. Images that are not anchored may simply appear at the end of the ebook. The important thing to remember, is that this process is more about the flow of the document rather than the appearance, so we cannot just place the images anywhere and expect them to appear in the right place within the text. The images need to be 'anchored' correctly. Anchoring Images In my eBook I plan to put a different image with each scene. I intend to place this image below the Scene heading and before the start of the first stage directions. Here we see the image on the pasteboard. Notice the small blue square on the border of the image. We need to shift-drag this to the end of the line ‘Athens. Quince’s House’. This will anchor it at this point in the text and you should notice an ‘anchor’ symbol in place of the small blue square. Now we need to create an Object Style for all images that will follow the scene title. Object Styles Object styles are a very powerful feature of InDesign, and allow you to apply formatting to various attributes of the object. With the anchored image selected, find the Object panel, and create a new object style. I will name mine ‘scene_image’. When we use Object Style Options panel, we are setting some generic features of all objects that use this object style. We can also make some specific style changes to each image individually. Export Tagging for Objects In the tag drop down field you will find div and span but because this is a block element rather than inline, we will use div and give this a class name. We can type anything into the tag field, but only some accepted HTML tags will work. We could actually use the HTM5 tag — figure, but not all ePUB readers will accept this. The ALT text In the markup language of HTML for the web, images should have some alternative text. So, it is with the ePUB format. All images should have some ‘ALT text’. Here is what this would look like in the HTML markup: Ancient Athens showing the Parthenon Image Metadata If we wish to use the ALT text setting in the Object style panel then we will need to extract this text from the metadata held in each image file. This can only work if you have added the metadata for each image. Although you can type some ALT text in the text panel here, this would mean that all images have the same ALT text! This is not acceptable. It is not good practice to use something like ‘Image for the scene’. Using the metadata from each image is the most efficient way, because we can use the Object Style to apply this for all images. Adding metadata for the images can be done with Photoshop under the ‘File Info…’ menu. You can use the title or description fields, but you need to know which to choose in the InDesign ALT text panel. The Cover Image Since we have already created a wrap around cover for the print book, we can use some part of this for the eBook cover. We only need the front part of the cover, not the spine nor the back or flaps. Of course, you might want to use any text you have created for the back of the book somewhere in the front matter, so don’t abandon this altogether. The cover that I have created for the print book is shown here. This is for a paperback edition with a spine and back. I just need the front for the eBook, so I am going to take the PDF into Photoshop and crop down to a portrait image. There are certain requirements for this image. If we intend to distribute this eBook through the Apple iBooks store, we need an image that is, at least, 1400pixels on the short side. This is the image that you can put into the ePUB, although be sure to keep a copy of this, because distribution systems such as Apple’s or Amazon’s will need this large high quality image for marketing purposes. In my ‘Midsummer Night’s Dream’ eBook I have cropped the cover in Photoshop and saved as a JPEG image ready to be used when we export to ePUB from InDesign. Be sure to know where you have saved this image, because we will need to select it at the time of export to ePUB.. The cover is a special image and we have certain issues to consider. Remember, this cover will be seen as a thumbnail image within the eBook delivery system, so make it clear enough to be read at small sizes. Do not use text that is too small or against a complex background. In my example, I am using the same image from the print edition. You don’t have to do this. Design an eBook version if you prefer. This eBook will be a portrait format eBook and so the cover should be in the proportion of 6x8 although this is not critical. Even if the cover is reduced in size for the eBook, keep a larger version available for marketing purposes. Should we put the publisher’s name on the front for the eBook; after all, the printed book has a spine... The Title Page Our title page needs special treatment because we have spread out the title, author and sub title down the page, and we want to be sure that this fills the page with no possibility of user changes to font size disturbing this arrangement. The way to make this happen is to convert the grouped texts into an image. We do this through the Object Export Options Panel, found under the Objects menu. We will invoke this panel after we have grouped all of the objects on this page. The settings for the Object Export panel are shown here. You can select the correct ePUB:type, make sure that you use ‘Rasterise Container’ and also add the ALT text information. Once we have set this up, we will need to make sure that this group is added to the Articles panel in the correct order. The Table of Contents In our previous work for the print production workflows, we have created a table of contents on the one of the front matter pages. We successfully created the TOC and displayed the items from the structure of the book—the headings, acts and scenes from the play. We displayed the page numbers right aligned with tabs marked with dots. This was appropriate for our print ready PDF, but our ePUB version needs something slightly different. Most eBook reader software will use a structured table of contents within its user interface. In most cases we do not need the TOC to be displayed on the page, because this interactive TOC is a navigation aid available from a drop down menu or in a ‘slide-out’ panel. We have dealt with the details of building a table of contents with InDesign in an earlier chapter, so we don’t need to go through this again, but what issues will we encounter when we export to the reflowable ePUB? By using the table of contents feature, InDesign has already added the structural TOC into the file. All we need to do is to hide this from the page and then choose it by name at the time of export to ePUB. We have two options to hide the ‘on-page’ version of the TOC: We could simply drag the TOC text box to the paste board. Drag it left or right and make sure that no part of the text box is on the page. It will be in the file but NOT on the page. A better way though is to set up the whole of our book using the Articles panel. With this method, we simply disable ‘Include when Exporting’ for the ‘Contents’. We will look further at the Articles panel before we export to the reflowable ePUB, because it is with this that we can order the structure. Metadata Every eBook needs metadata. This can include the title, description, publication date, copyright information and so on. When we export the ePUB (reflowable), there is a panel to add this information and we will look at this when we go through the export options later. Even before we get to this point, we can add this metadata information in InDesign, through the File Info… section under the File menu. However, we are using the book panel, so, the question is, where should we enter this information? Which of the section documents? The book panel does not provide metadata input for the whole book! It turns out that if we enter the metadata information in the File Info… section for the InDesign file that is set as the style source, then it is the information in this file that is used for the metadata in the ePUB! Save the InDesign File, but be sure to save with no spaces in the name. Use underscores or just save using CamelCase. We will add further metadata to the ePUB when we export to ePUB. More on Metadata Metadata provides information about the content of an item. The metadata for a book will include such elements as the title, author, description and copyright. Some metadata will be an absolute requirement for an eBook. Before a book will validate, it will need a unique identifier such as an ISBN (International Standard Book Number). This is a 13 digit number  that is issued through a country specific ISBN registration agency. In the ePUB3 format, there are several metadata items that can be included but the essential ones are: title author publisher unique identifier (usually the ISBN) publication date We will see later how we add this metadata to our ePUB through one of the export options panels. Hopefully, we are ready to export to ePUB(reflowable) now, but let us just recap on a few things so we don’t get any nasty surprises. And, by the way, we don’t ruin anything when we export. We can always keep trying and overwrite previous versions of the ePUB! What features are lost when we export the reflowable ePUB? There are some aspects of our work for the print version of this book, that will not be carried over to the reflowable ePUB. I am going to list them here with a little explanation. Master pages
Anything on the master pages such as the page numbers and the headers will be ignored. Margins
If you have set different margins for left and right pages in a spread, these are ignored. The eBook will be created so that each page is the same. Columns
These will be ignored. The reflowable eBook can only have one column. Alignment to the Baseline Grid
This will be ignored, so you are advised to be sure to set leading for all of your paragraph styles and test these by turning off the Align to Grid option temporarily. The line spacing (leading) in the ePUB will only come from the leading setting NOT to the baseline grid. Advanced Character Formats
Any settings for the character or paragraph styles here will be ignored, so if you have set a Baseline Shift, then you may be disappointed that this is not available in the ePUB. It may be possible later to add some CSS style rules to simulate this. Paragraph Rules
If you are using a line above or below (or in any other place), this will be ignored in the ePUB. We can add this back in using a border in the CSS. More on this later. If you use the underline rather than rule, this will appear in the ePUB, but without any offset or colour change. Footnotes
This won’t be ignored and we can use these to create ‘popup’ notes by selecting the correct option in one of the Export panels. Orphans and Widows
These are controlled using the Keep Options and they will not be ignored, however, the concept of orphans and widows is not supported by any eReader software that we know currently. The Keep Options panel also controls when a style starts on a new page. This will be used to force a new page, but not all systems support this feature. More on this later. Text wrap
If you have text wrapping around a shaped object, then this feature will be lost. In my book I have a portrait of Shakespeare in an oval shape with the edge of the text following the curve. Our eBook version simply stops the text either side of this image. And more….
I am sure there will be other aspects that will surprise you such as any tabs that will disappear in the ePUB! Prepare the Styles for Export We have looked already at how we can add tags and class names to the styles. We must be sure to do this before we export. One handy way to make sure of these is by using the Edit All Export Tags… feature that can be found in the drop down context menu of the paragraph styles palette. Note: Don’t forget, that when we are using the book panel to manage the sections of the book, only one of these files is the ‘Style Source’. Chunking the eBook The ePUB package consists of a number of HTML documents, and for our example we want one separate HTML file for each of our Scenes in the play. We have already simulated this in InDesign, by styling some of the headings to start on the next odd page (see this in a previous section). If we are using the book panel and have different sections as separate InDesign files; Title, Contents, Introduction, Play—then these will become separate HTML files inside the ePUB. Therefore those sections will always start on a new page. For each of our heading styles inside these sections, we need to tell InDesign to ‘Split Document’ under the Export Tagging tab of the style palette. The ‘Export tagging’ panel is where we set up the HTML tags for each of the paragraph, character and object styles. We can configure these setting for each style in turn. We can also conveniently, use the ‘Edit All Export Tags’ panel to configure all of these in one place. As you can see here, we have given all of the various elements such as verse, prose, act and scene a tag and added our own class names that identify their meaning in the structure of our play or introduction. From Book to ePUB (reflowable) If you are following along from the previous print workflows, then you will be using the book panel to organise your InDesign sections. If you are using the book panel, you should export to ePUB and then choose the correct format - ePUB(reflowable). The dialogue box for the reflowable ePUB has several sections and you need to pay attention to each of these in turn. If you have Adobe Digital Edition software then this will will be the default ePUB viewer. You can use other ePUB viewer software to review your work. MAC users with OSX version 9 and above can use iBooks to view the eBook. If you have an iPad, you can view the eBook with iBooks. We will discuss getting the eBook onto your devices later. The viewer apps can be set up in the final panel when you export the ePUB (reflowable) Now follows instructions for each of the sections of the export to ePUB (reflowable). When you make changes to these settings, they will stay with the file, so you don’t need to fill in the details again each time you export. The General Section Select ePUB3.0; we are using the most recent version of the ePUB standard. The cover will be selected from the graphic made earlier. Choose the TOC style from the one we made for our print version. You may find that your saved TOC is not listed, this is because you may have saved it in a different document from the Style source. The solution is to change the style source to the file that contains the TOC. Content Order: Same as Articles Panel. This is the best option for us, because we have arranged our content in the Articles panel, and even turned off the page based Table of Contents, so that it doesn’t show on the page. We want to Split Document based on the Paragraph Style Export Tags. This is so that we can control exactly where the ePUB is split into the separated HTML documents. This is often referred to as ‘chunking’. The Text Section If we have left unwanted paragraph breaks in the text, we can remove them here. If we have used footnotes in our book then these would normally be delivered at the bottom of each page. Here is a sample of what this looks like in InDesign. If we choose Inside a Popup (ePUB3) then we should get a hyperlinked elevated number in the text which will then produce a popup window with the text of our footnote. We may need to make some adjustments later to the style of the numbered reference in the text. The Object Section You might prefer to experiment with some of these settings for yourself, but here are my suggestions Use preserve Appearance from Layout, so the images will take on the style and approximate size that you have given them.
When you view your eBook in some software and devices, you can enlarge the image by double tapping. The image file inside the ePUB needs to be big enough for this to work, so make sure that your originals are at least 1200pixels wide or tall. Use ‘Relative to Text Flow’
What this really means is - resize to fit the space; if we view the eBook in a smaller device or window, then the image should be smaller relative to the overall space.
The alternative is ‘Fixed’ and this may give us display problems on some devices. We can Align the images left, right or Centred. However, when aligning left or right, the text will flow around the image and—in some situations this can restrict the text to very narrow widths and produce awkward spacing. It is possible to add a page break automatically after or before an image (or even for both!) The Conversion Settings We can choose the way that InDesign converts the images inside the ePUB file. In this example I have opted to use the JPEG file format, although you can just use the automatic setting or PNG. With the JPEG setting you have more options for reducing the file size by reducing the quality. This setting really needs your full attention and please experiment, so that you can build an eBook that has superb images but is not too big overall. Users will not be happy if they need to wait a long time to download you eBook. The Medium or High quality is probably going to be good enough if you have a lot of images. On the other hand use the Maximum quality if you analyse a few images. If your images use transparency (such as blended shadows or colour overlays), then you should choose PNG. Be aware, though that not all devices support transparency. Later on we will learn how to unpack the ePUB and modify the images to reduce the amount of space that they take up in the ePUB package. The CSS panel If you don’t know what we mean by CSS, then you should grab some information from the web or get one of the many books on the subject, but essentially… CSS means Cascading Style Sheets and is the associated language that goes along with markup languages such as HTML to apply styles to the elements used in the structure of the content. When we export to ePUB, the various styles (paragraph, character and object) need to be converted to these CSS rules. The ePUB format uses HTML and CSS inside the package—you knew that of course. Do you remember, that we have set the Export Tagging for each style? This is where we get to use these tags. So, we need to check the box ‘Generate CSS’. We can optionally add a margin around the content. As you will notice you can also turn on or off the local overrides; if you have specifically selected some text and made the style different without applying a style, then InDesign will create a new tag and CSS to try to match your design style. I suggest that you try to avoid using overrides, but this is where you get a second chance to turn them off! Embedding Fonts
This is whole topic that deserves a separate chapter, but you can opt to include embeddable fonts in the ePUB. Some font vendors disable the ability to embed fonts, so you may get a warning if embedding is prevented. Additional CSS
Optionally we can add our own CSS file. The idea here is that this will be linked in the head of each XHTML file in the ePUB3 package. InDesign puts this file after the InDesign generated one so you can override some of the style rules that InDesign creates. The Javascript Panel There are some situations where you might want to add javascript to the ePUB package. In the example here I have added jQuery and some other routines that help with the display of certain styles. Using javascript inside the eBook is certainly an advanced topic and you should know that it will have very limited support apart from the Apple iBook software where javascript can be used to great effect on the iPad. The Metadata Panel Every eBook must have certain information stored within the package before it can be published. It is essential that all of the fields provided in this panel are completed. If you don’t yet have an ISBN for the eBook, you can use the random identifier that has been added automatically. Most of these entry fields are self explanatory but the date field will need a special format. The date must be in the form shown: Year-Month-Day, in numerals like this: 2015-01-23 Some further Metadata is added to the eBook automatically: Modified date comes from the time that you exported the ePUB Language will come from the Dictionary setting in InDesign. This is a generic setting for the whole book, but paragraph and character styles can have different language settings as well, so the metadata can be overridden within the ePUB. Cover metadata will be generated when you selected the cover image Viewing Apps The final panel ‘Viewing Apps’ gives you an opportunity to set your default eReader software. If you are using the MAC then this could be iBooks. Adobe Digital Editions could also be a choice, but, remember, you should test your ePUB in a number of environments if possible. If you are using a MAC then view with iBooks, and if you have an iPad then you should get the ePUB onto your device. Hopefully, your eReader software will show you a cover image and you will be able to observe the table of contents. You may not be happy with some aspects of the visual appearance and so we will now need to make some changes to the CSS that controls the typography and layout. Lost Styles? You will notice in this view with Apple’s iBooks, we seem to have lost the heading for the Act — above Scene 1. This is because we used a white text against a deep offset grey rule with InDesign. This does not get converted to any supported CSS.. Note: InDesign now has a paragraph shading feature that will achieve a coloured background in the ePub. Orphans and Widows Although we may have taken great care to control the orphans and widows with the ‘Keep Options’ panel, you are very likely to get some lonesome lines of text that got separated from the rest of the paragraph. This is an example of a problem we will need to address when we edit the insides of the ePUB file. Blank Pages You may also experience blank pages in the eBook. This is because we have 2 mechanisms that have effected where the pages break. We have a style for the Acts and Scenes that starts on the next odd page and we have also split the eBook by creating a new HTML file for each section. We can easily resolve this by editing the CSS inside the ePUB.. No Text Wrap InDesign is great at wrapping the text around shaped objects. This is very difficult to achieve with HTML and CSS, and so you will expect some compromise for this feature. What comes Next? The next chapter will focus on how we can edit the insides of the ePUB file and what changes we can make to the styles and other view settings. Some text editors have the functionality to edit the components of the ePUB package even without unpacking. BBedit is the one I use most, but Oxygen XML will also give you that ability. Oxygen is more sophisticated and expensive; it will allow you to remove and add files into the package, so if you wanted replace a picture, Oxygen will do it! Unpacking A more flexible approach is to unpack the ePUB package and get access to all of the components, make your changes and then repack. If you have access to Adobe Dreamweaver, then you can use this web design tool to make your edits. If you are a web developer, then you will be familiar with the relationship between the files that display the ePUB — namely the HTML, CSS and image files. The ePUB file created on export from InDesign is actually a package of files wrapped up in a ZIP file. You probably have come across ZIP files before; they are useful when you want to send someone a bunch of files or when you want to save some disk space by compressing large files. If you are a MAC user then you may have used the 'compress' utility found when you right-click over a folder or file. PC users may have used other ZIP utilities for compressing or unzipping files. The ePUB file that you now have from InDesign is actually a ZIP but the file extension is .epub. There are some particular features of the way this file is compressed into a package, and this is what makes it slightly different from a regular ZIP file. We can easily unpack the file by renaming as a .zip file and using an unzip utility. The problem comes when we want to re-pack into the ePUB file, because one of the files inside this package needs to uncompressed and first in the order. Repacking To achieve this re-packing correctly we need to use a script that will add items back into a new ePUB package. If you are working within the MAC environment then I suggest downloading ePub Zip/Unzip - a script that will, not only, unpack the ePUB but repackage after editing. On a PC (Windows), this is slightly more complex; you will need first to rename the file, with .zip instead of .epub. Then use an unzip utility, to extract the files. You can then edit the components, but to repack, you cannot simply re-ZIP. You need to download a utility called ePubPack. MAC Users If you are a MAC user I recommend that you grab a copy of the ePUB Zip/Unzip Applescript, because you can add this to your Finder toolbar and then simply drag the ePUB file onto the icon. This will create the folder of files. Once you have completed your editing tasks and are ready to test, simply drag the folder onto the icon and the script will repack the folder into the ePUB, with the same name (warning you that it will overwrite the original). How Can we Edit? It really depends on the software tools that you have. I am a MAC user. I own a copy of BBedit. This is how I work, and you will find the screen images from now on will show this application in use. However, if you would rather use DreamWeaver, then you will find the instructions for setting this up on page 43. What Can We edit? This really depends on how the ePUB looks after export from InDesign and what changes you want to make, but crucially you need to keep your options open to go back to InDesign to make further changes. This means avoiding the editing of the XHTML documents and just focussing on the stylesheets. In our workflow we plan to return to InDesign for further edits, so let us explore how to create our own copy of the stylesheet (CSS), that we can link back in the next time we export to the ePUB. If you have used the InDesign book panel to organise your content, you are gong to find several CSS files; one main file with a filename- idGeneratedStyles_0.css and then further stylesheets one for each of the documents in your book panel. The main CSS file is where the generic styles are located (those which are common throughout the eBook), and then each of the others will only include style information for elements present in those separate XHTML files. All we want to do at this stage is to edit the stylesheet called idGeneratedStyles_0.css. Our First Correction You will remember from our previous chapter that we found that an paragraph rule that provided a background grey block to the Act heading had disappeared when we views the ePUB. The reason for this error is that InDesign does not export the rules (lines) above or below the paragraphs from the paragraph style settings, and our text is white so it disappears. The correction we need to make is in this file: idGeneratedStyles_0.css. In our Export Tagging setting we configured the paragraph style called act to use the tag - h1 with a class name of ‘act’. We then look for and find this block in the CSS: We need to add the following line: background-color:#a196a0; I grabbed the hexadecimal value of the colour from InDesign. We can make adjustments to the height of this block of colour by adjusting the leading – in CSS this is the line-height: line-height:1.5; Test and View Our Changes In my own workflow, I use BBedit and thanks to people at Bare Bones Software, this editor gives use the ability to edit the components of the ePUB and then we simply drag our ePUB on to iBooks on the MAC. Using Dreamweaver If you prefer to use Dreamweaver, then will need a slightly more complex routine that involves unpacking the ePUB, setting up a site, edit the CSS (as above), repack the folder into an ePUB, and then — view with iBooks. However, there is one advantage with Dreamweaver, you can preview the individual XHTML pages in the preview window; not exactly how it will look in the ePUB, but enough for those little tweaks such as the CSS edits above. Roundtrip to InDesign If we need to return to InDesign then we will lose these corrections that we make to the CSS, because InDesign will generate the same ones again. We have 2 approaches to solving this: Once you have made the corrections that solve the style and display issues, then you can take a copy of the CSS file and save this somewhere in your working files with a logical name (mine is dream.css). The next time that you export the ePUB, we can then select this external CSS file (see the CSS panel when exporting), and this will be added in the head of each XHTML file. Caution: There was a bug in earlier versions of InDesign CC 2014; the added CSS file would be linked at the top of the XHTML pages in the head tag. However, your own CSS file will come before the others, so you could not use this method to overwrite the InDesign generated style rules. Other Changes to the CSS. Page Breaks Each of the XHTML pages represents a new chapter or section (or Act / Scene of the play), and will therefore begin a new page. This has happened because you opted to have the style for the Act or Scene to ‘Split the ePUB’ on export. The paragraph style in the play is ‘act’ and the resulting HTML is: <h1 class=“act”> Because for print we also set this up to Start on a New Page (in fact - On Next Odd Page under the Keep Options), InDesign has been less than helpful by applying a rule to the CSS as follows: page-break-before:always; Guess what! This means that you may get a blank page, because the ePUB gives the eReader software 2 reasons to start a new page. The line in the CSS will need to be changed to: page-break-before:auto; Anything to Hide? Remember in our section ‘The Page Ends and Begins’ in the Chapter “Attention to Detail”, we added a paragraph before and after an image that we wanted to be on the page by itself? Well, now is the time to add the following to the CSS: p.splitpage {
display:none;
} This will make this content disappear. Footnote References In a printed book the footnotes are at the bottom of the page and the references in the text are usually a superscript number (slightly smaller in size and elevated next to the appropriate context. In our eBook version we can opt for the footnotes to become popup notes (supported in ePUB3 in Apple’s iBooks software). However, the little superscript number are very difficult to spot and even more difficult for the finger to touch, so I suggest making then stand out a bit more by adjusting the CSS to give a background colour and slight increase in size. In the CSS we need to edit these lines to the rule for the reference element: span.reference {
color:#cc071e;
font-variant:normal;
text-transform:none;
vertical-align:super;
/* changes below */
font-size:1.6em;
color:white;
background:#cc071e;
padding:3px;
font-weight:bold;
} Typography In our print book we have 2 columns in the introduction text and we have set this to be justified. When this arrives in the ePUB (reflowable), we find only one column but the text is justified. Maybe we are happy with this, but if not we need to change the CSS in the body text rule from: text-align:justify; to text-align:left; If you delete the line altogether, the user will control the text alignment, in their eReader software settings. If the intention is to go back to InDesign in this workflow / editorial cycle, then you should avoid editing anything other than the CSS. Your objective (wherever possible) is to avoid editing the XHTML pages. Once you edit any other files inside the ePUB package, then roundtrip to InDesign will be difficult. If your workflow requires that you edit the ePUB in order to consult the other members of your creative team or even a client, then you should copy and record the changes that you make so you can wind these changes back to a previous version. Other modifications that you may want to make are explained in the following section. There are a number of adjustments that can be made to the OPF file that will affect the way that the ePUB is displayed. Some of these settings are particular for iBooks on iPad, but there are some settings that are generic and are needed for other devices and platforms. If you exported from InDesign this file will be named: content.opf The Cover You will find references to the cover in 3 places in the content.opf file. This is a line required only for backwards compatibility for ePUB2 and is not really need but leave this alone! In my case this is a separate page that can optionally display the cover. In other words, this refers to an XHTML page that includes a link to the image source. However, the item in the spine section that refers to this looks like this: and the ‘linear=“no”’ attribute means that this page will never show unless it is linked from elsewhere - for example - from the table of contents. So, if you would like your users to be able to navigate back to the cover, then you can remove linear=“no”, so that the cover itself is part of the book flow, and can be seen as the first page in the book. Note: Do not do this if you intend to convert to the Kindle version, because you will then have the cover showing twice! We are not done with the cover yet! There is another line required for the ePUB3 format and you will find this in the section: This we should leave alone! The Spine The spine section of the content.opf file gives the reading order. This will have come from the order of the pages in InDesign or even the the Articles panels. Also, if (like me) you are using the book panel, the order of the InDesign files will affect this spine list. You can modify this order; let’s say you have a colophon and you would rather have this at the back of the book, then you can move the appropriate line to your choice in the sequence, although you probably want to avoid this kind of editing. <spine toc=“ncx">

</spine> The Guide Section You will notice that under the spine items you will find the Guide section and this is only here for backwards compatibility. The Guide Section of the package OPF file provides a similar function to the Landmarks section of the ePUB3 navigation document (see later), but harks back to the ePUB2 format. There is some advantage to adding some items here if you plan to export to the Kindle/MOBI format for Amazon devices; especially if you wish to support earlier versions of these devices. Kindle software does have a drop down menu that can be populated with some items. Here is my Guide section built by InDesign on export: I want to add the Table of Contents in here because Amazon recommend that the TOC should display on the page; this is at odds with the ePUB3 format, where we would rather use the logical version in the eReader interface. So, how can we add an XHTML version of the TOC? We have one already, because the ePUB3 export has given us - toc.xhtml - the Table of Contents that is perfectly formed to be displayable. So we use this. Add this line to the section to become: 
<reference type="TOC" href="toc.xhtml" title=“Table of Contents" />
 This change will not effect the ePUB3, but is useful for the Kindle version. The Metadata Block We can make some additions to the section of the content.opf file. You should notice the following line if you opted to embed fonts when you exported to the ePUB: <meta property=“ibooks:specified-fonts">true</meta> InDesign has put this line into the content.opf file at the same time as encrypting the fonts that you chose in your paragraph styles. There could be a situation where you want to add this line in to the block. This would be a situation where you are only targeting the Apple devices and you want to use some fonts that are present on the iPad/iOS devices. You don’t need to embed those fonts but you do need to switch on the ‘specified fonts’. So, if you plan to use the fonts that are available on the iOS systems, then do NOT tell InDesign to embed the fonts (when you export, but rather, add this line into the opf file. Let me offer an example. The fonts that are available on the iOS devices are listed here: http://iosfonts.com So, let’s say that you decide to use Avenir. [Used in the eBook that you are reading]. So, build your ePUB with InDesign, with that font used in the paragraph styles. When you export the ePUB, you can opt to NOT embed the fonts. Then, you will need to add the above line into the content.opf file. But this line will only make a difference if the package item is included with all of the following: <package version="3.0" xmlns="http://www.idpf.org/2007/opf" unique-identifier="bookid" prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/“> Orientation and Spreads If you expand the package section even more as follows: <package xmlns="http://www.idpf.org/2007/opf" unique-identifier="bookid" version="3.0" prefix="rendition: http://www.idpf.org/vocab/rendition/# ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/“> We have added the extra prefix for rendition and this will also give you the potential to lock the orientation to landscape or portrait. To lock the orientation on all iOS platforms we can use: portrait</meta> To lock the orientation on a specific Apple device we can use portrait-only</meta> Please note that orientation settings for iOS is no longer available for fixed layout eBooks. The Navigation Document (toc.xhtml) The Logical Table of Contents InDesign CC will create the essential navigation document - toc.xhtml file ePUB3 as well as the ePUB2 equivalent - the toc.ncx file. This latter is provided for backwards compatibility. All being well, your intelligent construction of the table of contents in InDesign, means that there should be no good reason to edit the TOC section of these files. This is a perfectly formed set of nested list items that can be viewed as a web page. Here is what the toc.xhtml page looks like if I open in a web browser: Here you will notice another section called the Landmarks. Landmarks Landmarks are a feature introduced with the ePUB3 format, and are provided so that eReader software can give the user a means to navigate to particular sections of the eBook. The ePUB format is ready to accept a number of epub:type values that can be addressed by the eReader software and will enable further navigation aids for the reader. In later versions of InDesign you are likely to find this section on Landmarks is provided within your toc.xhtml file when you have selected the ePUB3 format on export. In my first export to the ePUB, InDesign has given me 2 landmarks entries. Here is why: The ‘Cover’ entry is there because InDesign has constructed a cover.xhtml file and this is normally not in the reading order of the spine (see the paragraph on The Spine in the section on The OPF Package Document). In eReader software that supports this feature, users can locate the cover from a menu. The second item (Title-Page) is slightly more complex, and you will need to refer to the work we did in InDesign on our title page. See on the next page what this looks like in InDesign with the Object Export Options panel open. As you see in the following image, the epub:type is set to title page and this is what provides the item in Landmarks section. The Landmarks section may include ‘cover’, ‘titlepage’, ‘bibliography’ etc. Here is an example: This mark-up can be be added to the toc.xhtml file or you might prefer to set this up in InDesign by setting the Object Export Options for particular text frames. This feature only seems to work for individual single objects on a page and not threaded text frames over a number of pages. How can the Landmarks help in the way the eBook is read? The way that the eReader software uses the Landmarks does vary. Some software does not make use of these items at all. For iBooks on Apple devices we can be very specific: When you distribute the eBook through the Apple iBookstore, Apple will generate a preview of your book. This preview will be constructed from information in the landmarks section. If you add the following to one of the items in the Landmarks section, the eBook will open on that page: epub:type=“ibooks:reader-start-page” This is from the specific iBooks vocabulary and will only make a difference on Apple devices if you add the following attribute to the HTML tag at the top of the toc.xhtml page: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" epub:prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/“> You will see in the next section how we might add style to our Table of Contents file (toc.xhtml) and include in the flow of pages in the eBook. Getting the book to start at a particular location is very difficult to test for because the eReader software (in this case iBooks on Apple devices), will remember your last location in the eBook, so you can only be certain by putting a fresh copy of the ePUB on to your device. First Page in the Book? Generally though, one specific item needs to be positioned correctly, with the correct epub:type so that it becomes the first page that the user sees on opening their eBook. Probably the most contentious issue here is the cover. The ePUB3 standard seems to presume that you don’t want your readers to see the cover as the first page. I can see the logic here, but if you do want the book to open initially at the cover, then you will need to follow the next paragraph on including the cover page in the flow within the spine section. Pages Outside the Flow A more significant controller of your page ordering is the Spine section, where you are likely to find the following: The export from InDesign routine did this. This means that your cover is not available to your readers other than as a view in the Table of Contents (when in landscape mode on the iPad), or if you have linked in your logical table of contents. You can rectify this by using: Users can then navigate to the cover by turning back from your title page. Non-Linear Content The concept of non-linear content is really important, because it means that you can have pages that will not be found by turning the page, but only through a hyperlink. For example, if you want a References page in your eBook, but you don’t want this page located at the end of the book (viewed by swiping through to that page), then you could edit your toc.xhtml file to include:
  • References
  • But then in the spine use: To prevent the page from being in the flow of pages. Displaying the Table of Contents as a Page InDesign has been great at building the table of contents for us on export. We opted to keep this TOC off the pages, because we unchecked this page in the Articles panel. Indesign created an HTML page for the ePUB3 version and this is used as the logical TOC. But suppose you want to display this in your eBook with some further enhancements? As you have seen earlier in this chapter, the toc.xhtml page is a page built with ordered lists, so we should be able to make it look better with some CSS. We can add some CSS into the head tag of this page. So I will just go ahead and add that to the toc.xhtml file. Now I need to add this to the Spine section of the content.opf file: I have also hidden the Landmarks section of this navigation document by using this CSS: nav#landmarks {display:none;} Adding Other ‘Non-Linear Content When editing the unpacked reflowable ePUB, it is also possible to add other non-linear content and have that content appear when the user touches a link. This feature is only guaranteed to work on the iOS version of iBooks, but you can add PDFs, images or even scrolling HTML pages. Using Javascript inside the ePUB package It is possible to use javascript to your ePUB3 package, for special purposes although this has limited support on devices and eReader software. The example I am using here will solve a common problem when going from InDesign to ePUB - Balancing Ragged Lines. In your paragraph styles, under Indents and Spacing, you may have switched on ‘Balance Ragged Lines’. This will be ignored on export to ePUB3 (reflowable), but we can use jquery and some code from Adobe. [read my article here] We will need to add a class name to the item that we wish to apply this to, so in InDesign for the heading style - be sure to add this to the Export Tagging panel: You will notice that we have 2 class names. This is perfectly correct. Now we need to add to our own CSS file the following: h2.balance-text {
text-wrap: balanced;
} Then we add the following javascript files at the time we export the ePUB3: jquery-1.6.2.min.js jquery.balancetext.min.js Adding Content with Javascript jQuery also gives us an easy way to add content to pages. For example, suppose we want to take a heading and the first paragraph that follows it, and wrap this in a
    so that we can apply a style to the whole block. We can create a javascript file that includes the following: $(document).ready(function(){
$(".subhead").each(function() {
 $(this).next('p').andSelf().wrapAll('
    ');
});
});
//]]> We then add some style to the CSS like this: div.staytogether {
page-break-inside:avoid;
} Adding Content with CSS CSS also has the potential for us to add some content at run-time. In this example we are going to add a flourish before and after the scene name in the play. The CSS we need is: .scene::before, .scene::after {
font-family:ZapfDingbatsITC;
content:'✣';
font-weight:normal;
font-size:1em;
vertical-align:middle;
color:#6bc77e;
margin:0 10px;
} Summary This chapter has shown you some of the edits you can make to the inner workings of the ePUB package. Remember, if you want to ‘roundtrip’ back to InDesign then you will need to keep a record of these changes so that you can re-instate them, when InDesign overwrites your ePUB file. It is possible to add your own CSS at export time, but all other changes (to the package documents, toc.xhtml, landmarks etc.)- these will be lost at export time. As time goes on, the export to ePUB3 feature of InDesign will improve, and so it may be that we will have more control over the output without having to make any edits inside the ePUB package. Until that time — have fun! The fixed-layout format ePUB3 format provides a way to deliver every single page in your print book laid out just as it was in the print version. This fixed-layout format can be considered almost the same as an interactive PDF, however, as you will see, the ePUB can have much more interactivity and, you, the designer can control the way the eBook is displayed. For those that ask ‘why can’t I deliver a PDF?’. The answer is that you cannot sell and distribute a PDF through the same channels as the ePUB (or Kindle) format eBooks. InDesign CC 2014 Changed Everything InDesign Creative Cloud 2014 introduced the ability to export the ePUB3 as a fixed-format package, and we can use this method to create a perfect acceptable ePUB3. However, it should be pointed out that the controls for the way certain aspects work in the export process (in the current version), are very limited: There is no way to include footnotes as popups (they will simply be at the bottom of the page - as in your print version) You cannot use the Articles panel to order content, or even prevent some objects from exporting. All items will be delivered as they appear, including the master page items. Post editing the CSS is almost impossible, because every single word on the page is positioned with the CSS, so you dare not make any adjustments. Is there Another Way? I had previously written instructions for another way to create a fixed-layout ePUB prior to the release of InDesign 2014, and, actually I still prefer this method. This method involves creating a reflowable ePUB and making some adjustments to turn it into the fixed-layout form. So this chapter will take you through both ways and we can compare the difference. The instructions for this are very limited, but we should first explain that the fixed-layout ePUB is formed from many XHTML files – one for every single page that you see in the InDesign view. Whichever method you use for this output, you need to become aware of the individual pages (how they begin and end, if there are orphans and widows, and what your master page items look like. Effectively, you are now designing as if for print. Duplicate and move on. I suggest that you duplicate your InDesign documents and book, because you might (for this fixed-layout edition) be making some destructive changes. Page by Page Go through all the pages, and satisfy yourself that each page is how you want it to be. You can make adjustments to fix widows and orphans. You should be certain that the master page items display correctly. Items can bleed off the page. What you need You will need an InDesign document set up as if for a re-flowable eBook. Images should be anchored in the text, although technically, for this method you do not need images to be anchored. Since this is all about trying to use the same file for these different techniques, we should have anchored images!. You will need to be using InDesign Creative Cloud. The screen grabs in this document are created from InDesign version 10.1. Having had a good look at our InDesign book and files, we only have two matters to address : The TOC - do we want the table of contents on the page or just as a logical TOC? If the TOC is on the page, then it will be on the page in the ePUB (fixed layout). If you don’t want this, you need to move it on to the paste board and delete those pages – see what I mean about destructive! The Footnotes. - Are we happy that the footnotes are at the bottom of the page where the reference occurs? Export ePUB (Fixed Layout) I am presuming that you will export from the book panel, but if you are working with a single file, then the procedures are exactly the same. You will already be familiar with the panel that appears when you export the ePUB, only this time the features are very limited. The General Section In the General panel you will need to select the cover image and the table of contents as a Multi Level Navigation from your saved TOC in InDesign. There are Spread Layout options that will control the way the spread is formed. You can even join the pages as a landscape form. On the other hand, you may simply base the spreads on your layout (as if for print). You can also choose to Disable the Spreads so that only one page at a time will show. The Conversion Settings In this panel we can decide how the export process will convert the graphics in your book. This is much the same as the reflowable settings although the position of all objects on the InDesign page will be respected. The other panels that you can select include the the CSS panel,which allows you to add your own CSS and the javascript panel, which provides a chance to add javascript, as we did for the reflowable ePUB in the earlier chapter. We will need to add Metadata in the appropriate panel, before we proceed. You will see pages exactly as you had in the InDesign. Is this successful? Certainly. If this is what you wanted, then we can surely say that we have a good fixed-layout eBook. But take a look at another image from a spread in the play. Now have a look at the XHTML of one page in the eBook. If you look carefully, you will see that every word on the page is wrapped in a span tag with a position set through an inline style rule. This is the way that InDesign has exported the content and it works to precisely position all content on the page. The problem comes when you want to make any edits after-export. We have little hope of making any changes to the CSS other than possibly adding a background colour to the pages. Animation and Interactivity? Before we move on to create the fixed-layout ePUB in a different (more handcrafted) way, I should point out that using the Adobe Export to ePUB(Fixed-Layout) method also offers some other benefits, namely interactivity and animation. We will address this in a later chapter. This is a method that is formulated to create a single page for each page in the InDesign layout, but rather than fixing every word with a position rule, we create a simpler CSS that allows some flexibility in post editing. It creates a more efficient ePUB, with far less markup per page. These instructions presume that you have already built styles and used ‘export tagging’ to specify the HTML tags and class names. The objective is to make each page in InDesign become a page in the eBook. You can optionally change the InDesign layout to spreads by using the Document Setup and choosing ‘Facing Pages’. You can build an eBook where the spreads will be as InDesign presents them, although you can also control this through some further editing of the metadata inside the ePUB. You can easily make adjustments to the type size overall, by editing the CSS that InDesign creates on export. Prepare Your Assets and Working Copies I urge you to create a duplicate of your previously created version that you have made for the reflowable ePUB before progressing. Master Page Items We have previously discovered that Master Page items are ignored when we export to ePUB (reflowable), but when we create our Fixed layout ePUB, master page items will prove useful. If you don't already have a header in the generic master page (the one that is used by all pages), then you need to create one. Spreads or Single? Ultimately, we need to decide if the header will display in our fixed-layout eBook. If it does, then you may need to make the left and right pages have the same header. The reason for this is, that when someone reads your book one page at a time (not as double spreads), then the header will alternate from page to page, and this may feel disconcerting. If you intend to deliver a double page eBook (locked to landscape with 2 pages per view), then you can have alternating headers. If you are not using spreads, then you need just one header. Having created this on the master page, you need to create a paragraph style for the text and an object style for the text box that contains this text. You should pay attention to the tagging export options, for the paragraph style and for the object style. For the object style, I suggest that you use 'header' as the tag and give this a class name of ‘topText'. Note: To make sure that the header (originally only on the master pages), will appear above the main text, make the header text box very wide so that it is the first item reading left to right. The articles panel will then put things in the correct order reading from top left. Modifications to the Headers and Footer To make things really simple, I have created a header in my master pages and used this master page for all pages that I intend to keep in my eBook. I have also created a new (hidden) layer, and put those items that I don’t want in my eBook – this includes the page numbers and the solid colour block at the top. Text Frames When you first started this InDesign document you may well have opted for ‘Primary Text Frame’. This will be useful, because you really need an object style applied to the text box on each page (as well as the header created above). If you are not able to attach an object style to each text frame, then you can use Find/Change to do so. Note: I am not really interested in setting any attributes of this object style other than the name and the Export tagging setting (creating a div with a class name of ‘play’). If you simply have all of your text in one thread then use ‘select-all’ when the text cursor is within the text. Then using the Find/Change dialogue box, select the Object tab and simply use the change field to select your object style. In my example I want everything to use the same object style - ‘play’. If you have more than one threaded story, then you can (if you prefer). create other object styles and make sure that the text frames are using those object styles. You will later, learn how making these text frame use a particular named object style with a specified tag that will help you edit the CSS to fix the layout of these frames on the page. Radical Destructive Changes Come next! The next set of changes are very dramatic, so I suggest that you duplicate the file, so that you can always go back to the original (text threaded, re-flowable) version. I often make use of the Revert command on the File menu. We should now be seeing the header at the top of every page. This will be on the master pages, so it will be showing with a dotted line. Note: Before taking the following step, be sure that the text object on the master page has an object style attached and that the tagging is set up properly. You may also need to remove any footer items in your master pages or (better still) put them in a separate layer and then hide that layer. Now right click over any page and select 'Override all master page items'. After a few moments you should notice that the dotted line has gone from the header text box. You have now put the header on every foreground page in an identical place. Time to Split And I don't mean time to go home! We are now planning to split apart the threaded stories. This again is rather dramatic action so there are some pressing issues that require great attention to detail. Footnotes This could present a problem. We don’t actually want the footnotes on the bottom of the page, so we need to move them to the back of the book. InDesign does not have any configuration that provides this so we need to use a script. There is one available from Peter Kahrel. On his site he credits others too, but the one you need is called ‘Footnotes to Endnotes’. You can grab it here: http://www.kahrel.plus.com/indesign/footnotes.html Go through every page from the front of the book, and adjust the bottom of the text box if you are unhappy with the way that orphans and widows are showing. You can drag the handle on the text panel up to reduce the size and thus, move the text onto the next page. Please do this from the front of the book! Do not start in the middle pages of the book! Of course, if you already controlled this for your print version then you already are set to go. I am presuming that all of the images are anchored in the correct way. Check this before proceeding. You need to locate the Scripts panel (under Utilities). You will find a script in the Application>Javascript list called 'SplitStory'. Get ready; Save your work. You cannot undo the following action! With your main text box selected on one of your pages, double click the script mentioned. After a few moments, you will then see that nothing is threaded. You have un-threaded every text box into its own 'story'. Text will no longer flow across pages. If you are using the book panel, then you must do this for each of your InDesign documents. What you have now done is to create a set of objects on each page, all unthreaded. We now need to inform the ePUB export process what order we want these items to be placed in the flow of the book. Articles We now will need to gather everything up for the articles panel. In fact, we only really need to make one article out of everything, and the Articles panel will cleverly do this automatically for us. Remove any previously organised articles first and then with an empty Articles panel, use CMD-Click over the plus (+) sign. This will add all items throughout the page of the book, into one article. You can name this article, but this is not crucial. Edit all Export Tags From the paragraph style panel, go to the context menu and find 'Edit all Export Tags...'. You have seen this before! You should be seeing a table of all of your element styles and the tags that you have given them, class names, and if they are set to Split the ePUB. All being well you should have an object style called 'header', and a new paragraph style for the contents of that header. Mine is called 'headerText'. This is the only style that is used to 'Split the ePUB'. Go ahead and checking this on and follow through by unchecking any others. I guess, that you may have previously split the ePUB at various heading styles. Turn those off. I should explain what we are doing here. We are intending to create a separate HTML document inside our ePUB package for every single page in the book. This is what a fixed-layout ePUB is! By having the header at the top of every page, we are going to achieve this by splitting the ePUB right there. Time to Export to ePUB Choose Content Order - Same as Articles Panel. You can use the same CSS file, or remove yours and let InDesign create it's own. Whatever you do, though, you are likely to need to edit the CSS after this export. Indeed, this is the next step. At the end of the export routine, you may have been 'shown' the eBook in Adobe Digital Editions or Apple iBooks if you are on a MAC. Don't get disheartened! This will not even come close to the fixed-layout eBook that you were hoping for. You still have to modify the CSS, edit all HTML files and add some metadata settings to the OPF file before this will work properly. Crack Open the ePUB I use a wonderful AppleScript call ePUBZip/Unzip for this task. Note: The following editing tasks are going to limit your ability to round-trip to InDesign, so you are advised to backup work so far, for peace of mind! You can also make copies of the changes so as to be able to re-instate them if you do need to re-export from InDesign. Once unpacked you will need to edit many files. You need to use a tool that will have the power to search and replace across multiple files. I am going to use Dreamweaver to do this work, but I should mention that I often use BBedit (MAC only), because I can edit the various files inside the ePUB without unpacking. Changes to the (X)HTML files When you create your local site with Dreamweaver you will notice that you have a great number of these XHTML files; my Midsummer Night's Dream play book now has more than 130 of these files! For a fixed-layout eBook we need to inform the eReader software (iBooks), of the size of our viewport. These numbers are not absolute; you may choose different figures. We'll cover the numbers and what they mean later. Inside the head tag of each XHTML document, you need to add the following line: The reason we use 900 rather than 800 is that we want to use the full height of the iPad when in landscape mode. Making this addition inside the head tag of each page can be done be using a Search and Replace technique within Dreamweaver. Search for: </head> Replace with: 
</head> Using Dreamweaver is a very good solution because you can select the entire site to make these changes. You should make a note of these changes to the HTML files, because if you do need to return to InDesign (round-trip), these changes will be lost when you re-export. Edit the CSS If you already prepared your own copy of the CSS file, and this has linked on Export from InDesign to ePUB, then you need to make some further changes to this file. First you need to give the body element a width and height equivalent to same settings for the viewport above. body {
width:600px;
height:900px;
} We will come back to the CSS editing in a moment, but now we should make some important changes to file called content.opf. Editing the content.opf file This file is inside the OEBPS folder, however, if you are using Dreamweaver, you will need to assign this type of file to open in the code view. Simply go to the preferences for Dreamweaver and under File Types/Editors, add .opf.to the file list. This is a one time preference set up for your system. Fixed Layout Specifics There are several required changes to get your eBook to display in fixed-layout format. First you need to change the package metadata. <package version="3.0" xmlns="http://www.idpf.org/2007/opf" unique-identifier="bookid" prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/“> to this: This adds the rendition vocabulary for Apple iBooks. Now we need the following line within the meta section: pre-paginated</meta> Pre-paginated means ‘fixed’! Package the Folder back with the ePUB Zip/UnZip script and test on iBooks or Readium within Chrome. To confirm that this a fixed layout eBook you should see no font-size menu. You are likely to see the text too small and your header will show at the top of each page. These things can be changed. More CSS Editing If you have named the header text frame that appears at the top of the page, and it is called ‘header’, then your CSS will look like this: header.top {
} The header element may have a dark border. No style rules are applied. Change this to: header.top {
border:none;
} If you don’t want to show the header at all then use: header.top {
display:none;
} In other words, hide this block. No content will appear. If every page has a block enclosing the content; mine is: <div class=“play”> Then you can add a margin to this block in the CSS like this: div.play {
margin:30px 40px 0 40px;
} In fact because we are using the book panel and we have named the text blocks differently, I am using the following to provide a margin for all major blocks: div.play, div.prefacetext, div.dramatis, div.figure {
margin:40px 50px 0 50px;
} Your overall font-size maybe too small and you can change this globally through a rule on the body of all pages like this: body {
font-size:110%;
} Background Images Fixed-layout eBooks can have background images for the whole page. We would add this to the CSS as a style rule for the body element. Create an image to fit the size of the viewport. We currently have 600px by 900px, however, CSS does give us the ability to resize the background image, so the actual image can be bigger and then re-sized down. Note: Not all devices support scaling of background images with CSS, so, for delivery to devices other than the iPad you may need to resize your background image to the same dimensions as your viewport. In my example I could create an image 600x900 pixels or alternatively change the viewport to a higher resolution. I am using an image with the dimensions - 1024x768 pixels. We first need to add this file inside the package within the images folder. Then we need to add the information to the manifest. You will need to have your ePUB unpacked. Copy your image into the image folder. With Dreamweaver, we now need to edit the content.opf file again. Inside the manifest section add another line below the references to picture assets: <item id=“paper_texture" href=“image/paper_texture.jpg" media-type="image/jpeg" /> To get this image on every page, we must add to the CSS. For completeness, here is the whole body section: body {
width:600px;
height:900px;
font-size:110%;
background-image:url(../image/paper_texture.jpg);
background-position:top center;
background-repeat:no-repeat;
background-size:100% 100%;
} So, you see, we can very easily add the same image to every page. However, if we need to provide different images to different pages, then we need to observe what ID InDesign has given to the for each page. Different styles for Different Pages? If you have a look at a typical XHTML document inside your ePUB package then you might find something like this: <body id="dream-102" lang="en-GB" xml:lang=“en-GB"> This is the markup for page 102 and if we want to apply a different style (background, in this case) for this page then we need to use: body#dream-102 {
background-image:url(../image/pale_texture.jpg);
background-position:top center;
background-repeat:no-repeat;
background-size:100% 100%;
} If you want to have different styles throughout the eBook, with occasional positioning rules or background images or colours, then you have a number of options. So far, we have always used an external stylesheet to apply the CSS rules. This is certainly the best approach, because you can then make the changes in one place. However, as described above, you will need to be able to identify individual pages within the book by adding a class name to the body tag like this: In earlier versions of InDesign the Export to ePUB was only slightly Helpful, but in InDesign CC 2014 and beyond an id value has been added to the body tag. If you have an earlier version of InDesign you can use the method described on my web site here. Further changes to the content.opf file Some further metadata information can be added to the content.opf to control spreads. Here are some examples: If you only want to show one page at a time use: <meta property=“rendition:spread">none</meta> the default is: <meta property=“rendition:spread”>auto</meta> You can also lock the orientation with: <meta property=“rendition:orientation”>portrait</meta> Note: If you want to force the eBook to display in portrait only and you do not want to see part of the following page, then use 800px (instead of 900px) for the height (in the CSS and the viewport), and then use the orientation lock as described above. The previous chapter on ePUB Editing will be of help here. Note: orientation lock is no longer supported for iBooks on Apple devices.. Footnotes Unfortunately, if you want to use popup references from your footnotes, InDesign will expect them to be in the same XHTML file where they are referenced. Do you recall that we did not want to show them in our fixed layout ePUB ( at the bottom of the page), so we have used a script to move them to the final page of the eBook, as endnotes. InDesign CC 2014 will not build these into popup references, so we have no choice but to handcraft the markup to make this work properly. If you locate one of your references in the text you will find an empty hyperlink and no mention of the correct epub:type for the ePUB3 format. We will need to go to the last page in the ePUB to add the correct ePUB3 signals for the eBook format to get the correct message! So, in the final page we need to have a look at the destination references and where we find this:
  • <a id=“_idTextAnchor032"></a> We need to add the