View Single Post
Old 02-28-2011, 12:05 AM   #1
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
Step-Step-Guide to ePub creation from InDesignCS3

Caveat: This is the way I do it, there are plenty of other and probably better methods, but I don't care, because it works for me

Prerequisites
A working knowledge of InDesign. I will not be describing how to make a style sheet
InDesign CS3
TextWranger (or another text editor which saves as UTF-8 and supports regular expressions)
Dreamweaver CS3
Photoshop (or another image editor)


InDesign:
Tip: Every style change must have a style sheet applied to it
  1. Create Character Styles for Italic, Bold, Bold Italic and so on for each element eg (Smallcaps, Dropcap), ID will strip out any nested styles you must apply the character style to compensate
  2. Search for any Dinkus's and apply Paragraph Style "Dinkus" to it
  3. Make sure all images which will float are made in-line and have a paragraph style "image" applied
  4. Make sure all Bullets, Lists Quotes etc have the following Style Sheet naming convention applied eg. QuoteFirst, QuoteMiddle, QuoteLast. With the appropriate spacing applied and also a QuoteSingleLine, with space applied to both top and bottom. This applies to bullet lists as well Tip: InDesign WILL strip out empty carriage returns.
  5. Delete all page numbers from Content page.
  6. Delete all running heads and Footers. including folios.
  7. Splits Document into separate Documents and create a book and insert files into it, ePub will apply a page break for each Document, so each time you want a new page then create a new document)

  8. Check file in the Book for stray elements like Blanks at the start of Files etc.
  9. Create a blank Cover file and name it "Front Cover" insert into the book at the start and place an image in if you don't already have the front cover pic any image will do, and resize to 600x860pixels and call it "Cover.jpg" (also do the Kindle version while you there resizing to 600x800pixels and label it "Cover_kindle.jpg") Tip: Double check the cover in Photoshop to make sure it's set to RGB
  10. Strip out any Index file and backmatter adds
  11. Export book to Digital Editions. (I like to use these setting below)



Unzip the sample.epub changing the name to sample.zip

The folder Structure will look something like this:



File clean up
I like to replace the "Cover-fmt.jpeg" in the Images folder with the "Cover.jpg" I made earlier, also adding in the "Cover_kindle.jpg" to the images folder.

TextWrangler
Open the Content.opf file.
This is what they will typically look like after the conversion.

You will notice that although there are only two images in the epub.
The Content.opf file duplicates these image for every xhtml file in the manifest section. You have to remove these except for one set. I like to keep the top set under the Cover.xhtml file
Tip: this problem is fixed in InDesign CS5
Once you've done that you need to:
  • start at the top you will need to add the following lines (because I don't like the way ID puts in certain things).
Firstly. In between the <metadata> tags
PHP Code:
    <dc:identifier id="isbn_9781234567890">978-1-2345-6789-0</dc:identifier>
    <
dc:title>Book Title</dc:title>
    <
dc:creator>Author Name</dc:creator>
    <
dc:publisher>Publisher</dc:publisher>
    <
dc:rights>Copyright © Author Name 2011</dc:rights>
    <
dc:format />
    <
dc:date>2011</dc:date>
    <
dc:description>Blurb for the Book</dc:description>
    <
dc:subject>Humanitiessciencessocial sciencesscientific rationalism</dc:subject>
    <
dc:language>en</dc:language>
    <
meta name="cover" content="my-cover-image"/> 
The date, language, and Cover entries MUST be there, the rest is optional
Next in the <manifest> section
PHP Code:
    <item id="my-cover-image" href="images/Cover_kindle.jpg" media-type="image/jpeg"/> 
This goes with the other images
Next in <spine> section
PHP Code:
    <itemref idref="cover" linear="no"/> 
This replaces the Cover line

Then at the bottom, between the </spine></package> insert
PHP Code:
<guide>
<
reference type="cover" title="my-cover-image" href="images/Cover_kindle.jpg"/>

<
reference type="toc" title="Table of Contents" href="Contents.xhtml"/>
</
guide
These two relate to the Kindle conversion.
Tip: If you don't have a content.xhtml file then remove the table of contents line

So you should end up with a file looking like this:


Save and close

The TOC.NCX file you can leave, unless you change order of the files, but if you had them set correctly to begin with then this will be ok.

Dreamweaver
  1. Open the Template.CSS file in Dreamweaver.
  2. Insert text below into bottom of the file
    PHP Code:
    samp {
        
    font-familysans-serif;
    }
    .
    centerImage1    {
        
    margin-top0%;
        
    text-indent0%;
        
    text-aligncenter;
        
    margin-bottom:0%;
            }
    .
    image {
         
    margin-top1em;
         
    margin-bottom1em;
         
    margin-left1.2em;
         
    text-aligncenter;
    }
    img {
        
    max-width100%
    }
    p.float {
        
    line-height1.20em;
        
    font-size1.00em;
        
    floatleft;
         
    clearleft;
        
    text-alignleft;
        
    font-weightnormal;
        
    font-stylenormal;
        
    margin0 0.5em 0.5em 0;
        
    colorrgb(0,0,0);

  3. In the code where it list the "p" styles (p.stylename). Add at the end of the font family line , serif; (or "sans-serif") depended on the paragraph style required, like this:

    PHP Code:
    p.x-body-no-indent {
        
    font-family"Minion Pro"serif;
        
    line-height1.30em;
        
    font-size0.96em;
        
    margin-bottom0.00em;
        
    margin-top0.00em;
        
    text-indent0.00em;
        
    margin-right0.00em;
        
    margin-left0.00em;
        
    text-alignjustify;
        
    font-weightnormal;
        
    font-stylenormal;
        
    colorrgb(0,0,0);

  4. At the bottom of the CSS file you you see:

    PHP Code:
    span.italic {
        
    font-weightnormal;
        
    font-styleitalic;
    }
    span.bold {
        
    font-weightnormal;
        
    font-stylebold

    Tip: the span.bold and span.italic entries could be blank, so you will need to add the required information above

    PHP Code:
    span.hyperlink {
        
    colorrgb(0,0,255);
        
    text-decorationunderline;
    }
    span.strong {
        
    font-weightbold;
        
    font-stylenormal;
    }

    span.dropcap {
        
    floatleft
        
    font-size2.6em
        
    line-height0.9em;


Now you are ready to start opening your xhtml files in Dreamweaver.
I open the Cover, Title page and any other file with a full page image.

I select the image and set the max height to 100%

I then move onto the Chapter files and go though each one, to make sure nothing strange has happened and everything is where it should be.

Next, I open the contents file, and set up my TOC linking (I didn't bother with it in InDesign because the process is a real hit and miss PITA. It's much easier and faster IMO to do it from here.)



All you do is select, say, Chapter One. In the "link" pallet at the bottom, click on the Folder icon and choose Chapter_01.xhtml.
And that's it...Rinse and repeat for the remaining chapter entries in your Contents file.
To link you chapters BACK to the Contents.xhtml file, then you need to open each chapter and select the text you want the hyperlink to be on, in this case it's Chapter One. Click on the folder icon next to the "link" window at the bottom. and select the content.xhtml.



Once you are happy with what you have, then you need to compress the epub folder back up.

I do this by dragging the folder onto an Applescript which you can find here:
https://www.mobileread.com/forums/sho...light=epub+zip

Once you have the filename.epub
I go to the three press website and run it through the validater
http://www.threepress.org/document/epub-validate/


Ok. I think that's it.
This is just a guide on how I make epub files from InDesign CS3.

It is NOT to start a debate on the the quality of the CSS code as it is what InDesign generates and for that reason I've left it as is...


I hope people will find this useful. If I have made some glaring mistakes, please feel free to let me know and I'll fix up my post.

Last edited by Adjust; 03-01-2011 at 05:26 PM.
Adjust is offline   Reply With Quote