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 info@radiqx.com Please let us know if there is anyway we can help you in you publishing endeavors.

ePUB Design
Formatting 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 coding

At this point in the development, ePUB design is commonly 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 excellent 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. Lets talk about some of these necessary changes. http://bergsland.org/blog: THE SKILLED WORKMAN

Why ebooks are so different

The 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 critical typographic concerns are out of our control. OpenType features are not available. We are back to the bad oldays of 8-bit fonts with their very limited 256 character choices. The second major factor is the single column layout: Without codingcracking the ePUB to edit the raw codethere 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 repurposing

This 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 size
At 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 resolution

This 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 documentsin most cases. Youll have CMYK images if you print in color. THE NEW PUBLISHER: http://radiqx.com

Everything in one story: eliminate all separate stories

Remember 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 inline

For 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 styles

Eventually 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 changing 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 changes
Even 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 fonts
Academy 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

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

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 Unicode# for Zapf Dingbats. Youll 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 remember, 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 fromour standard Caecilia font, a condensed version of Caecilia, 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 selling 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 changes

We have no choices here until we can edit the CSS in our ePUBs. THE NEW PUBLISHER: http://radiqx.com

Small Caps & All CAPS now work

Of 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 outline

If 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 lists

Lists still do not translate well. All you can do is delete all special indents you set up. Make it a numbered or bulleted 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 lists

You must crack the ePUB and change the CSS to use special bulletseither from dingbat fonts or graphics.

Add chapter breaks before a section gets over 300K

Supposedly 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 use

Nothing can be done about this. Epub and ebook readers do not support OpenType features.

Eliminate tabs
Put 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 http://bergsland.org/blog: THE SKILLED WORKMAN

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

Eliminate tables
Put 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 rules

Put your paragraphs with rules in a separate InDesign 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 Strikethrough without any customizing allowed. If you need the rules, youll 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 borders
Put 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 styles

Prior 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).

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

Making these changes & proofing

What 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 EditionsAdobes 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 crudedisplayed 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 formatting. This is why the use of styles is so critical.

Deal with reality

Do 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 more

If 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, theyll try changing the sizebut more likely theyll just quit reading.

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

Setting the TOC (This is required)

This is a very important part of setting up your styles. ePUBs do not support page breakswith 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. Im 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.

10

You do need to set up a TOC (Layout>> Table of Contents). 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 THE NEW PUBLISHER: http://radiqx.com

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 http://bergsland.org/blog: THE SKILLED WORKMAN

11

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 rules

These rules are Apples 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 Lulus page:
Title must match everywhere: metadata, cover, and books title page No advertisements or links. No mention of included materials that dont 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: &lt;, &gt;, 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.

12

THE NEW PUBLISHER: http://radiqx.com

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 Tags

New 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 wont know how this is going to work until I see the exported ePUB. In general, it looks pretty goodfor 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 dont need to worry http://bergsland.org/blog: THE SKILLED WORKMAN

13

about it. In earlier versions it simply didnt workin 5.5 it does and the ePUB validates. There is certainly nothing wrong with editing the CSS by hand: it is recommendedif you can stand that sort of thing. As mentioned, I do some of it in Website design, but I really have major problems staying awake while doing so.

The ePUB export box

With 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 page

Lets go through these in order Include Document Metadata: We want to do this to help with marketing. The metadata is where you add the keywords, 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. Youll 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. Ive heard that Nook requires specific settings, but Ive heard no complaints about the ePUBs I give them and they are still a small part of my market. Ill change if they ask me to. THE NEW PUBLISHER: http://radiqx.com

14

Bullets & Numbers: I leave them at the defaults. As mentioned, 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 yetand probably never will be uneventful. But then that is still true for the print versions also and Ive been doing that for decades. http://bergsland.org/blog: THE SKILLED WORKMAN

15

The image page

Here 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.

16

Image size: Finding out this information is like trying to pull hens teeth (and no, they dont 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 THE NEW PUBLISHER: http://radiqx.com

processes trash the graphics. So, I open them in Photoshop and save them as JPEGs. If I use bitmapped images, I use PSDs (Photoshops native format) at 300 dpi set to the width of the column. Ive 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, Ill 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. Ill 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 support graphic excellence. Maybe the eventual support of SVG (vector) graphics will solve these problems. Resolution (ppi): 300you need the highest resolution possible to look good on the better machines like the iPad and the Retina Displays of the iPhones. I imagine the other tablets wont be quite as good, but they will be getting better. Image size: The choices are Fixed and Relative to page. Ive 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 didnt have an iPad, so I really didnt 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 lowres 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 dont expect any changes when I click the Left button here. It doesnt make any difference as I make all my images the width of the column. I http://bergsland.org/blog: THE SKILLED WORKMAN

17

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.

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

Contents
This 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 havent 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 havent tried it yet.

Click OK and youve got an ePUB

It will open in ADE. Proof it carefully. Redo as necessary. 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 youll have a good idea what is translating well.

Edit the CSS if you can (or dont if you cant)

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. Its an AppleScript 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. http://bergsland.org/blog: THE SKILLED WORKMAN

19

For those of you who are ready, this helps a lot The 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 pthe 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 Castros 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 it
Redo 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 Ive mentioned they are an official aggregator 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 Lulus ISBN (but PubIt does not require one). Youll need a cover with a different resolution.

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