UPDATE 11.09.12 | A good number of searches regarding deleting extraneous CSS continue to lead readers to this blog post. During the time since I wrote this post, my coworker India Amos started to use BBEdit to quickly isolate used CSS in her ebooks (which therefore allows her to get rid of unused CSS) and has shared her workflow on her blog. I highly recommend checking out her instructions.
Lately I’ve been working on editing the code on series of eBooks that need to look the same. Each of these eBooks was released at a separate time and each outsourcer treated the conversion from print (InDesign or PDF) to ePub a little differently (these ePubs have not benefited from a “meat grinder” approach and that’s all I’ll say about that). Most of the time, the CSS and HTML is similar enough so that I can work on one title, and then 1. copy that CSS and apply that to the rest of the ePubs and 2. do a find/change on the HTML to make it match the CSS.
The problem is that some of these .css files were huge and some of the CSS was making my files do weird things. For instance, one ePub had a blank page after every chapter on the iPad. After much trouble shooting, I pinpointed the error to a div in each HTML file that surrounded all of the text and had extra space added to the top and bottom margins. These divs were pushing each new chapter opener out a “page”. It didn’t appear in ADE but it appeared on the iPad. That’s just one example of the many fun times I got to say, “Why is this happening?”
So, I looked for a way to delete extraneous CSS from my ePubs in order to cut down on these pesky errors and avoid having to troubleshoot so much. I also wanted to be able to copy over only the CSS that I needed to the other titles in the series. I think I found a solution with Firefox’s add-on called “Firebug,” and Firebug’s extension called “CSS Usage.”
Here’s how it worked out.
Installing Firebug and CSS Usage
1. Open Firefox. Under tools / add-ons search for Firebug. Press the install button. Restart.
2. Open Firefox. Under tools / add-ons search for CSS Usage. Press the install button. Restart.
Running on an ePub
1. Check that the HTML across all of the files is consistent and that the CSS for that HTML is working the way you want it to. (Obviously the simpler the books, the better. Today I was working books with straight text).
2. Access an HTML file from an unzipped ePub by opening it in Firefox.
click on the pictures to enlarge
3. Click the Firebug icon in the upper right corner of the browser window.
4. In the panel that pops up in the bottom of the browser window, click on the “CSS Usage” tab and then click “Scan.”
5. There’s the results. The “Seen” CSS is highlighted in green.
Preserving the Seen CSS
1. Record the “Seen CSS” on a new sticky on your Mac. After you’ve reviewed all of your HTML files you’ll have all of the CSS you’ll want to keep in a list. You can use that list to move this CSS to the top of your .css file and then you can delete the unused CSS.
or 1. Click on “export cleaned CSS.”
2. Copy the used CSS (the unused is preceded by “UNUSED.” into a text editor to refer to later or directly into a clean .css file.
I then used my new, clean .css file on the rest of the series. I’m thinking that being proactive about searching out and applying only the CSS I want will cut down on weird things happening in these ornery ePubs. I’m going to pick this up again on Monday and apply this solution to another series and see what happens.
Now, the flip side of all this is finding extra HTML that needs CSS. Anybody know that trick? For now I’m using the new .css file in the whole series and then previewing the series in ADE or the iPad and visually finding text that has extra HTML (it just looks weird and out of place) and either changing the HTML to match the CSS, or adding new CSS.
So, while not a perfect solution, this worked for me today. As a print person I think this works but some of you web gurus might be seeing something I missed. Anybody have any suggestions? Comments? Think I’m crazy? …that tends to happen to me by 5:00 on a Friday after a week of checking ePub code.