ePUB Design for The New Publisher

ePUB Design For The New Publisher

By David Bergsland

Written and published in May, 2011 © David Bergsland • All Rights Reserved

Mankato, Minnesota • http://radiqx.com • [email protected] let us know if there is anyway we can help you

in you publishing endeavors.

3http://bergsland.org/blog: THE SKILLED WORKMAN

ePUB DesignFormatting your ePUB without coding

I need to let you know of my assumptions here. This is a book for ministers. The focus is on publishing teaching, training, and educational materials for people with a real need to demonstrate good stewardship of resources. My contention is that with a little help and InDesign this can be done by any writer/designer, by the grace of God.Coding is anathema: Again, I must assume some things. My experience is that people like us can handle simple Web coding like HTML and CSS. However, most people who do what we do really dislike coding. It is a specialized skill not found often in creative people.

Fancy ePUBs require fancy codingAt this point in the development, ePUB design is com-

monly produced by coding specialists. This is because of one simple issue. In order to do simple things like text wraps (alignments), sidebars (divs), special fonts, and all the rest, you must be able to crack the compressed ePUB file and mess with its innards (many files and folders).

There is no simple program that allows you to do this. Dreamweaver is the obvious candidate for this capability, but nothing has been done yet by the Dreamweaver team. As a result, all of these things must be done on the code level and most of us are simply not ready to do that.InDesign 7.5 (CS5.5) can produce validated ePUBs: but you must rethink your book layouts severely. Many of the excel-lent design possibilities of print are simply not available in ePUBs. What I intend to do is give you a list of changes you must make to get a validated ePUB. The good news is that several things that I would have had to mention for CS5 are no longer necessary for CS5.5. InDesign has taken a large step forward. Contact and pester Adobe to continue this growth toward design freedom with ePUBs.

Digital books are a very different world. You must rethink your conception of a book in order to design one that will work for ebooks in general and ePUBs in particular. Let’s talk about some of these necessary changes.

4THE NEW PUBLISHER: http://radiqx.com

Why ebooks are so differentThe most important factor is adjustable type: At this point, you will get little control over font choice, font style, font size, font spacing, or typography in general. All of these criti-cal typographic concerns are out of our control. OpenType features are not available. We are back to the bad ol’days of 8-bit fonts with their very limited 256 character choices. The second major factor is the single column layout: With-out coding—cracking the ePUB to edit the raw code—there is nothing that can be done about this.

So, it is obvious that we must rethink our book designs. The real question is how much do we want to change in the conversion from print to ebook? The unavoidable answer, at present, is that we need a complete redo. This goes quite a bit beyond simple repurposing.

Designing for repurposingThis can certainly be done. What it requires is a clear

idea of what is going to be needed for the conversion. So what we need to do is talk about what you will need to make your ePUB look as good as possible. Then we can reasonably think about how to set up our print documents so they can be converted as easily as possible.

Document sizeAt present I am using a document size that lets me

use a wider column width of six inches. This seems to give me better graphics when they are exported. It also lets me know that this is not print and that I need to shift to another design model in my head.

Graphic format, size, and resolutionThis one is rough. They always look horrible when

compared to print. What you basically need to understand is that you will be using high resolution Web graphics. This is obviously a serious conflict with the way we have been working for the past decade. Basically you need 600 pixel wide, full-color RGB JPEGs or better.

This obviously takes some preplanning as you will be using grayscale images in your print documents—in most cases. You’ll have CMYK images if you print in color.


Everything in one story: eliminate all separate storiesRemember that everything in an ePUB must be in

one story and inline. This is a radical conversion in many cases. And you will need to do it by hand. The new Articles Panel is supposed to be a help, but in my workflow I drop separate stories into a location that makes sense, rewriting as necessary to keep the copy flowing well. Again, simply repurposing is not a good idea.

No anchored graphics: convert all to inlineFor very graphic books like mine with the wrapped

graphics, I simply redo the graphics and drop them in inline in their own paragraph with auto leading. Again this requires moving graphics around to make the most sense.

Fixing the stylesEventually we are going to edit the exported tags. But

for now I want to talk about how the styles need to change. The easiest way is to simply start editing the copy and chang-ing the styles as we get to them. We must bear in mind that there can be no sidebars or anchored graphics. You need to convert them to inline. Often I find I need to rewrite copy to deal with the reality of the ePUB reading experience.

Font changesEven though the ePUB spec says we can embed fonts,

this cannot be done at present without cracking the code. Supposedly, we can choose fonts that are available on the iPad. But, InDesign does not allow us to edit the CSS to set up our fonts to do this.The iPad supports 33 fontsAcademy Engraved LET

American Typewriter

AppleGothic

Arial

Arial Rounded MT Bold

Baskerville

Bodoni 72

Bodoni 72 Oldstyle

Bodoni 72 Small Caps

Bradley Hand

Chalkduster

Cochin

Copperplate

Courier (& New)

Didot

Futura

Georgia

Gill Sans

Helvetica (& Neue)

Hoefler Text

Marker Felt

Optima

Palatino

Papyrus

Party LET

Snell Roundhand

Times New Roman

Trebuchet MS

Verdana

Zapfino


If you are a coder: you can also use the HTML character entities which will add symbol and Zapf Dingbat characters. You can also add the Uni-

code# for Zapf Dingbats. You’ll need to crack the ePUB and edit the copy by hand.

Remember! The reader can change fonts at will: Reflow is the goal. That trumps typography in an ebook. Also remem-ber, that an ePUB is the typographic wonder of the ebook world. Kindle, Nook and the rest are much more restricted.

According to an article on ireaderreview.com the following fonts are available on the various ereaders. You quickly see that the iPad and iPhone give us exceptional choices. So buck up, Bucky!

❦ Kindle uses PMN Caecilia: this is a very readable slab serif.From Amazon: New Font Choices. “Kindle now has three font styles to choose from—our stan-dard Caecilia font, a condensed version of Caeci-lia, and a sans serif option” — so you can change your font style along with the font size.

❦ Nook uses Helvetica Neue (sans-serif), Amasis (serif), and Light Classic (serif): Amasis is a more humanist slab serif.

❦ Sony uses Dutch 801 and Swiss 701: A Times variant and a Helvetica variant.The Kindle, Nook and Sony choices may be easily

readable on their devices. But they certainly do not provide good typographic choices for a designer.Your only real font choices are serif or sans, plus you can add italic and bold: The problem, of course, is that serif or sans is not a font choice in InDesign. Hopefully, we will be able to control things like this in CS6.

However, ebooks using these limited choices are sell-ing like crazy. Kindle has a huge majority of the market (or it did until very recently). Kindle has gone below half and iPad has grown to over a third. If you want to sell to that market, you need to make a book that fits their paradigm.

Leading changesWe have no choices here until we can edit the CSS

in our ePUBs.


Small Caps & All CAPS now workOf course, the fonts used do not have small caps, in

most cases. So, any small caps would have to be in fonts like Copperplate & Bodoni 72 Small Caps.

No special fonts: convert to outlineIf you need a special font, you need to make it into a

graphic. Sometimes selecting the words and choosing Create Outlines will do it. But the resulting rasterized graphic will likely be a bad size and very pixilated. Often it is necessary to make a separate PDF graphic with that type to rasterize, save as a JPEG, and place into your ePUB document.

Remove all indents: left and right, from listsLists still do not translate well. All you can do is delete

all special indents you set up. Make it a numbered or bul-leted list (with no special bullet) and let InDesign do the translation. Not good, but anything else requires you to crack the code and set up special CSS rules for the ol and ul tags.

Eliminate fancy bullets: from listsYou must crack the ePUB and change the CSS to use

special bullets—either from dingbat fonts or graphics.

Add chapter breaks before a section gets over 300KSupposedly graphics are not counted here. But long

files with no chapter breaks will not work. You must set up a H1 style (headline) and specify it as the chapter break.

Eliminate all soft returns.You must crack the ePUB and change the HTML to

add the soft returns. You will get rid of all of them when exporting the ePUB.. Soft returns are a real problem when the reader can change fonts and font sizes at will while he or she is reading.

Eliminate all OpenType feature useNothing can be done about this. Epub and ebook

readers do not support OpenType features.

Eliminate tabsPut your tabular materials in a separate InDesign file

and export it as a PDF to rasterize and place into your ePUB document. HTML/CSS does not support tabs. The resulting


pixilated type is the same problem we have been dealing with throughout this exercise.

Eliminate tablesPut your tables in a separate InDesign file and export

it as a PDF to rasterize and place into your ePUB document. InDesign 5.5 will export the tables, but they will look bad with all borders and backgrounds deleted or changed.

The problem, of course, is that the resulting type is very pixilated. In reality, you need to think of a way to design around the need for either tabs or tables. They simply do not work well or translate into ebook limitations.

Eliminate paragraph rulesPut your paragraphs with rules in a separate InDe-

sign file and export it as a PDF to rasterize and place into your ePUB document. HTML/CSS does not support rules. The only rules you have available are Underline and Strike-through without any customizing allowed.

If you need the rules, you’ll need to create graphics that you can place before and/or after your paragraphs. The only problem with that is the lack of spacing control. Plus there is no way to do an overlap so you cannot have a rule as a bar from which the type reverses out to white.

Eliminate bordersPut your frames with borders in a separate InDesign

file and export it as a PDF to rasterize and place into your ePUB document. You can only use borders on a graphic. The ePUB readers cannot put borders on a frame. If you have type in the frame make it clear enough to work as a Web graphic. Basically that is all ebooks allow.

CS5.5 now works with nested stylesPrior to 5.5, we had to hand format any character

styles by selecting the type and applying the style. Now you can use nested styles. Of course, you need to do all the ePUB changes to make those character styles work in an ePUB: font. For example, I would only change style and color. Changing the font, size, or case is an exercise in frustration, though ALL CAPS should work (while it cuts readability).


Making these changes & proofingWhat needs to be done now is to go through all the

styles used in your print document and convert them to work within ePUB limitations. Then export your ePUB and open it in Adobe Digital Editions—Adobe’s free ePUB reader. You can set the export options to automatically open your ePUB after it is exported.

If you own an iPad: open the ePUB in it to see how it will look there. It is especially important to check out the graphics and see how they fit.

Adjust spacing as well as you possibly can.If you are typographically trained and visually sensitive,

this first attempt at an ePUB will be a horrible shock. The typographic ugliness of HTML after you have so carefully crafted your typography is a major hit to the senses. No kerning, tracking, or careful spacing. All the controls are very crude—displayed on a low resolution screen.

Take a deep breath!Now get on with it. This is the reality of ePUB. Now

your goal is to make it as easy to read as possible. Make the window narrow enough to be readable and go to it. It is likely that your first attempts will require you to fix several of your styles. Thankfully, they control the entire document globally because everything is formatted with no local for-matting. This is why the use of styles is so critical.

Deal with realityDo not hang on to impossible requirements. The more

simple you make your typography, the better it will work in this greatly restricted environment.

ePUB does give us much moreIf we quit looking at ePUBs from the background of

the printed book and start looking from the background of ebooks, then we can see how much we have available in an ePUB. Just focus on readability: go easy on the bold, italic, and small type. If they have to work at reading your book, they’ll try changing the size—but more likely they’ll just quit reading.


Setting the TOC (This is required)This is a very important part of setting up your styles.

ePUBs do not support page breaks—with one exception. If you have a style set up as a headline, with the keeps set up to start on the next page, the ePUB will start a new chapter when you use that paragraph style. You find this choice in the ePUB Export Options dialog box: Break Document at Paragraph Style with a popup menu to pick the style.

The only problem I have had: Because I have h2 & h3 based on h1, I have found that I need to make sure that the styles chosen for H2 and H3

(used in the TOC) have the “starts on new page” option turned off in Keeps. Otherwise, every time H1, H2, or H3 is used you will get a page break. I’m starting to base H1 and H3 on H2 which also solves the problem. I can then turn on start new page for H1 without affecting H2 or H3.

You do need to set up a TOC (Layout>> Table of Con-tents). You will chose this Table of Contents in the ePUB Export dialog. The styles you choose for your TOC will be added to the bookmarks in the column to the right of your ePUB. You do not do leaders or page numbers as leaders do


not work and page numbers do not exist in ebooks [more accurately the page numbers change all time as the reader changes fonts and/or type size].

A major problem: As you can see above, I have two styles I have mapped to H2 and two styles mapped to H3. I also chose No Page Number,

which also turns off the leader. However, the ePUBs would not validate. I kept getting cryptic messages about TOC entries missing. I finally had to delete all the TOC entries except for H1 and H2 to get the ePUB to validate.Practicality rules in these things. You can spend time

and money trying to figure out why these things are so or you can publish books. I publish.

Writing the metadata (This is required)

You need to write the metadata before you export the ePUB. As you can see above, this is just partially complete. The important things here are the title, description, and


keywords. You find this dialog in the File menu under the Get Info command It is required to fill out the File Info… description page. You open it at the bottom of the File menu.

There are some new strict rulesThese rules are Apple’s rules,as far as I can tell. They

include things like the metadata title must be identical to the copy found on the cover. It must be in title case except for a half dozen or so tiny words. There are several others things like this. Here are just a few from Lulu’s page:

ǆ Title must match everywhere: metadata, cover, and book’s title page

ǆ No advertisements or links. ǆ No mention of included materials that don’t exist in the digital product (Example: CD, poster, etc.).

ǆ Cannot up-sell to a version of the product that is more complete.

ǆ Cannot mislead buyers or misrepresent the ebook (Example: An illustrated guide containing no illustrations or pictures).

ǆ Subtitles are particularly important for differentiating multiple books in a series that share the same title.

ǆ Improperly formatted HTML tags in the description can cause a garbled description in retail channels.

ǆ Do not use character entity references in the description (Example: <, >, etc.)

ǆ Do not use font sizes in the description (Example: <font face=”Helvetica” size=”3”>)

ǆ Titles and Subtitles incorrectly capitalized. The first letter of all words in the title and subtitle should be capitalized, except for the following words: a, an, and, for, from, of, or, the, to. The first and last word of the title and subtitle should always be capitalized.

ǆ Use of HTML lists in description ǆ Titles beginning with articles should display properly. EX: A Tale of Two Cities, not Tale of Two Cities, A

ǆ Multiple blank pages. Especially at the beginning of the book. Please remember to remove blank pages before converting to ePUB

ǆ Must have a valid description. Ex: Do not use the title.


There are many more like this on the eBook Retail Distribution Guidelines page of the Lulu site. If you do not follow all of them precisely, they will not publish your book.

Setting the Export TagsNew to InDesign 7.5: As mentioned, this new ability to open a single dialog box and set all the HTML tags and add the CSS classes for each style is huge. It is a real disappointment that we cannot edit these class rules, but I am strongly hoping that Adobe comes up with something for CS6.

This is my first attempt at tagging for this document. I am always surprised by something. I have no idea what it is at this point. But, I will probably change this a couple more times before I finish the book. I won‘t know how this is going to work until I see the exported ePUB. In general, it looks pretty good—for an ePUB. There is always a little massaging, but it is minimal for a book this complex.

I have looked at the CSS file generated. From what I have seen, InDesign adds a ridiculous amount of code to do a simple job. But, it works and you don’t need to worry


about it. In earlier versions it simply didn’t work—in 5.5 it does and the ePUB validates.

There is certainly nothing wrong with edit-ing the CSS by hand: it is recommended—if you can stand that sort of thing. As mentioned, I do

some of it in Website design, but I really have major prob-lems staying awake while doing so.

The ePUB export boxWith InDesign 7.5, the ePUB export dialog gives us a

lot of tools and options as we fight to control our output. There are three pages and many things you need to set.

The general pageLet’s go through these in orderInclude Document Metadata: We want to do this to help with marketing. The metadata is where you add the key-words, description, and so on.Add publisher entry: I always add Radiqx Press here. I know that legally Lulu, CreateSpace, and all the rest are really doing the publishing as far as owning the ISBN#s is concerned. But they do not want to be known as the publisher.EPUB cover: I design a specific front cover to be used and link it here. That way I can set it up in vector with live type and so on. Just remember to use a JPEG for the cover, at this point. I also place a copy of the cover on page one of the book so it shows up as the first page in the ePUB.Ordering: I use based on page layout, as you can see. I can do this because I completely re-layout the ePUB version in a new document. Also I do not write XML. I find the articles panel does not give me the control I want. I always place my graphic, for example, in specific locations to read as part of the copy. I do the same with the converted sidebars and all the rest. If your book is simple, you may not need to do this. You’ll need to experiment and carefully proof the resulting ePUB to see if the other options work best for you.Book margin: I leave this at the default. I’ve heard that Nook requires specific settings, but I’ve heard no complaints about the ePUBs I give them and they are still a small part of my market. I’ll change if they ask me to.


Bullets & Numbers: I leave them at the defaults. As men-tioned, you really need to eliminate all special indents and tabs and let the defaults carry the day. Other than that, you will need to crack the ePUB and edit the CSS file. Hopefully CS6 will give us some better options.

View after Exporting: Always check this. Always look over the exported ePUB in ADE before you validate and upload. You also need to go over the ePUB in iBooks. I am still regularly surprised by something that needs to be fixed.

This is not a smooth process yet. It is really good that InDesign can now export ePUBs that can be validated. But it is not smooth yet—and probably never will be uneventful. But then that is still true for the print versions also and I’ve been doing that for decades.


The image pageHere things are in flux. Again, 7.5 is much better about

these things. But there is really no direct guidance. I will share what I know from experience. You may well find new information available by the time you buy this book. I will keep this info updated whenever I hear new data. Please share it with us if you hear anything.

Image size: Finding out this information is like trying to pull hens’ teeth (and no, they don’t have teeth). The best I can find is that the iPad and most smart phones require 560 x 800 pixels‚ or 600 x 900 pixels. At this point, I make my images to size, and vector if possible. I make them wide enough to fit the column of type and place them as inline graphics (unanchored). But InDesign automated conversion


processes trash the graphics. So, I open them in Photoshop and save them as JPEGs.

If I use bitmapped images, I use PSDs (Photoshop’s native format) at 300 dpi set to the width of the column. I’ve found that I really need to save them as JPEGs. I keep the original PSDs in case I want to go back to the way the image was before the JPEG compression ruined it with all the artifacts around the edges.

Of course, for a book like this one with many screen captures, it is not possible to maintain the 300 dpi. The image quality suffers, but there does not seem to much we can do about this. When I hear of a better plan, I’ll post it in the blog and update this information.Preserve Appearance from Layout: I check this but I am not sure why I bother. It seems to help certain images in iBooks. However, I am continuing to experiment with it. I’ll post new knowledge in The Skilled Workman.

ebook graphics are ghastly: I continue to fight the good fight, but you really need to question why you are even including graphics. The iPad

does a good job, but the ePUB format itself does not sup-port graphic excellence. Maybe the eventual support of SVG (vector) graphics will solve these problems.

Resolution (ppi): 300—you need the highest resolution pos-sible to look good on the better machines like the iPad and the Retina Displays of the iPhones. I imagine the other tablets won’t be quite as good, but they will be getting better.Image size: The choices are Fixed and Relative to page. I’ve was using fixed. I experimented with Relative to Page in 5.5. That seems to blur the images horribly. But that was just in Adobe Digital Editions. I didn’t have an iPad, so I really didn’t know. Now that I got my wife an iPad2 things have changed a lot. I now use Relative to Page, and this seems to make good graphics that are the width of the page. I want them the width of the page because they are basically low-res bitmap images. So that is where it is now.Image Alignment and Spacing: Because my images are all inline the alignment is controlled by the paragraph style used and that is flush left, so I don’t expect any changes when I click the Left button here. It doesn’t make any dif-ference as I make all my images the width of the column. I


leave the spacing at the defaults and use auto leading for the special paragraph style I set up to hold my images.Image Conversion: I leave this at automatic, and set the JPEG options to High. The image quality in ePUBs is bad enough without any JPEG artifacts produced by compressing the JPEGs too far. However, for my font design book (with nearly 300 graphics) this made my ePUB nearly 20 MB. So, I changed the quality to medium and set the resolution at 150 dpi. Because the images all almost all screen captures, the new ePUB looks very good on the iPad.Ignore Object Export Settings: I leave it unchecked even though I have never set custom settings for any particular image.


ContentsThis last page is very important. Several of these

options radically control how your ePUB text will look after it is exported.Format for EPUB content: I always choose XHTML. I haven’t seen any recommendations to use DTBook.Use InDesign TOC Style: It used to be that you had to set up the default style to work. Now you can save a named style to use. As mentioned, be careful not to use too many levels or multiple styles to the same level. That has made ePUBs that do not validate.Break Document at Paragraph style: You need to check this and use your headline style. This is working well.Generate CSS: This works. Make sure you uncheck “Include Embedded Fonts”. No one supports this yet.Use Existing CSS File: This requires coding. It may be the best solution but I haven’t tried it yet.

Click OK and you’ve got an ePUBIt will open in ADE. Proof it carefully. Redo as neces-

sary. If your computer is like mine, the graphics will be very poor in ADE. Basically ADE is very crude.

Then drop a copy of the ePUB file onto iTunes and sync it into iBooks on your iPad to read it in iBooks. The reason you need to use a copy is that iTunes adds some weird plist file that prevents the ePUB from validating. Then open it in the Ibis reader at threepress. Then check it out in Calibre. Ibis and Calibre will give you a very good idea about what is really in the file. ADE and iBooks will not do this. But you need to know what ADE and iBooks look like because many people will be reading your ePUB in those apps. By now you’ll have a good idea what is translating well.

Edit the CSS if you can (or don’t if you can’t)The problem with this has been the difficulty with

decompressing the .epub file and then recompressing back into .epub. For that you will need a script. I recommend that you Google and download “ePUB Zip 1.0.2”. It’s an Apple-Script that will let you simply drop the ePUB folder you get when you uncompress the ePUB onto the script icon to recompress it into an ePUB again.


For those of you who are ready, this helps a lotThe problem is that even with CS5.5 the resulting CSS

has some major issues. Of course, you must know CSS to do anything about it. But some of the things are relatively easy.

❦ Make sure the font choices are good: I would double-check to at least make sure that the serif and sans-serif names are correct. Then make them work for the fonts in the iPad list.

❦ Define p—the basic paragraph tag: InDesign does not do this. It defines all the classes you set up in the Export Tags dialog, but p is not defined.

❦ Do anything else you can figure out from Castro’s “ePUB Straight to the Point”: It all depends on how comfortable you are with code, HTML, and CSS. You can open the whole folder as a site in Dreamweaver. Edit carefully, and work on a copy if you are not good with the code.

Validate itRedo the proof as often as necessary. When you have

what you like, go to:www.threepress.org/document/epub-validate

It should validate. If it does not, all I can do is pray you will be given information that will enable you to figure it out. The failure messages tend to be very cryptic. But both Lulu and threepress are getting much better about this and letting you know what is causing the problem.Upload to Lulu

If it does validate, then you can start a new ebook project at Lulu. As I’ve mentioned they are an official aggre-gator for iBookstore. They will give you an ISBN# and get your ePUB listed on iBookstore.Upload to PubIt!

You can use the same ePUB you produced for Lulu. You cannot use Lulu’s ISBN (but PubIt does not require one). You’ll need a cover with a different resolution.

Documents

ePUB Design for The New Publisher