Roundtripping InDesign and ePub re-flowable
You know an InDesign file is never finished, even if you do save it as 'Final version'!
Get real. You are going to want to go back to InDesign and re-export your ePub (reflowable), because someone noticed a typo or a badly captioned photo.
Can we, save ourselves a lot of bother by grabbing all those changes and slip them into the new version?
Here's how with InDesign CC (2014) — yes you gotta get the latest version.
Frankly, I am only dealing with re-flowable ePubs from InDesign. Not fixed-layout.
An Outline of this Article
This is how I am organising this article:
- Summary of the Steps
- Paying attention to the way you work with InDesign
- Export tagging
- Editing the CSS
- Making your own CSS
- A BUG in InDesign
Export your first version of the ePub3 file from InDesign, and use this as your experimental version. I use BBedit on a MAC to delve into the CSS.
You can edit the CSS and then look again at the ePub within your eReader. I use iBooks on the MAC.
Go back to InDesign, if you must, and look carefully at the Export Tagging panel. Do this from the 'Edit all Export Tags' (see figure 1) from the paragraph context menu. Notice, that you can have more than one class name on any style. Just separate them with a single space.
In the ePub you will edit the CSS, and observe the changes until you are happy with the results.
Note: Your objective is to avoid editing the HTML, because this will be replaced when you re-export.
Once you have edited the CSS, then you need to take a copy of the contents of the whole file and save somewhere as your own (something.css).
Back to InDesign
Avoid the following
- Do not change tag names in the Export tagging panel.
- Do not add styles and their tags.
Export again, but this time find the CSS section (see Figure 2) and add your CSS file saved previously.
This extra CSS file will be added in the head tag of all XHTML files.
Bug Alert... we have a problem though.
CSS means Cascading Style Sheets. The last loaded rule will overide the previous one. What should happen, is that your own personal version of the CSS file should come after the one that InDesign builds, so that your changes are then implemented. Unfortunately, InDesign CC (10.1), puts the CSS in the wrong order—yours first and then the internal one after. Making your CSS changes null and void! Argh!
Presently, the only way to change this, is to use a text editor like BBedit to search and replace throughout all XHTML files. Alternatively, you can simply copy and paste your version of the CSS into the end of the CSS that InDesign builds.
Here is what my markup looks like in the head tag of each XHTML file:
<link href="css/idGeneratedStyles_0.css" rel="stylesheet" type="text/css" />
<link href="css/idGeneratedStyles_2.css" rel="stylesheet" type="text/css" />
<link href="css/dream.css" rel="stylesheet" type="text/css" />
Why do I have 2 idGenerated CSS files?
That's becuse I am exporting the ePub from the book panel.
More about that in a future post.
Posted on 18 Dec around 9am