Friday, February 12, 2010

ePUB Comic Book Template

[UPDATE (8/13/2018): Use this. Works in iBooks and Adobe Digital Editions. Good for iTunes, Google Play and Kindle. Validated here. Note: to work with Nook, take out the three rendition properties from the metadata section of the content.opf file.]

I've made an ePUB template just for comics. The biggest problem with ePUBs is their inability to handle large images (that shouldn't necessarily flow), which this template attempts to address. Download here. Right-click to download (opt-click on Mac).

The template is for a 24-page comic with cover. Page images are 592 x 900 (pixels). Page count and image size can easily be changed (until the iPad comes out, I'll wait until settling on a final size). There's an XPGT page template file to make it look better in Adobe's Digital Editions. Other readers will ignore this file, which is fine since the readers I tested don't need it. There's a copyright page that shows font embedding. The template is using pixelated images for testing purposes (and to keep them small).

The book is built with three parts; each with 8 pages. Those are broken down into 4, 2-page spreads. Each spread is a DIV element enclosing two IMG elements (the IMGs flow, but the DIV doesn't). This rendered the best (as far as I could figure out) since it compensated for 1-3 columns thus displaying either a single page or a spread. Pages and spreads are centered in the display window. Each image has some margin right and bottom to add separation between pages and spreads. If anyone has better solutions, let me know.

Some helpful things to know for newbies:

- To open an ePUB and check out the contents, open file by unzipping
- To create an ePUB, run this in the command line: zip -Xr9D epub_comic_tmp.epub mimetype *

I'll have PHP source to handle ePUB creation and font mangling (ADE & IDPF) plus UUID creation soon. I'm debating whether to include some form of encryption (of image files). Is encryption or DRM even necessary when every method has been decrypted? Also, DRM is by far the biggest complaint from users (including myself).

I'm leaning towards simply mangling fonts and images to frustrate most users (users could still do screen shots of the images). Adobe says not to mangle images but why not (it works and who the hell cares what Adobe thinks)? Those images, in addition, are of such low resolution, that their use would be limited. A system of watermarking/stamping could be used to deter sharing/posting of the ePUB files. A lot depends on what Apple's iBook Store implements.

Let me know if anyone has more ideas/solutions.


Anonymous Julien said...

thanks for the template. I will try to use it (not necessarily for comics, but maybe for some coffee table e-book with nice pictures :-)

I'll be sure to give you feedback on my trials.

2/15/2010 6:00 PM  
Blogger bumperhead said...

A bit off-topic, but interesting methinks:

2/24/2010 9:00 PM  
Blogger Marc Hansen said...

Right on topic. Can't really say how the "fan based geeks" will like it if their comics have DRM.

2/25/2010 6:17 AM  
Anonymous Will said...

I wrote a program to do most of this automatically. It's free and open source. One click to convert a comic to EPUB.

It will take care of the image size (you tell it how big a 'page' is) and will also clean up noise, enhance contrast, and trim page margins so that you get as much content as possible on the screen.

3/17/2010 12:01 AM  
Blogger Marc Hansen said...

Nice, but I don't think this is what we're talking about. This is about creating ePUBs (mainly for publishers) not end users converting their CBRs to other formats (and it doesn't do the best job either). For giggles, I tried your app on a CBR I had and then tried to validate it - no dice! It wouldn't validate.

Since your app only converts, what am I supposed to do - create a CBR first and then run your app to create my ePUB? That's ridiculous.

What I'm trying to come up with is an ideal template for the presentation of a comic, which (after checking the source) your app seems to pay the least amount of attention. The html your app creates uses tables, which would be a no-no for ePUBs (not to mention the needless metadata you added). You might want to go to and study up on the ePUB specs (maybe there you can find out why they create an ncx file).

Also, the image "enhancement" the app does is over kill. Since your app is only converting from a previously made ebook then why would it need enhancement? Anyway, I would much rather trust Photoshop when making my enhancements than with your app.

Sorry, two thumbs down.

3/17/2010 7:16 AM  
Anonymous Will said...

Let's clarify something: my program lets you convert comics to epub so they can be read on an ebook reader. As far as I (and many others) are concerned: mission accomplished.

Not sure about your validation. Did you actually try reading the epub or were you just doing the ePub equiviant of the acid test?

I don't think you understand why I use the HTML that I did. The table is to avoid the page margins some ebook readers use around image. I want as much comic on the screen as possible, thank you very much.

The app converts from CBR/CBZ to ePub, not from ebook-to-ebook.

The image enhancement is to avoid exactly the thing you mentioned. Most of us don't want to spend time in PhotoShop or the GIMP mucking wih 30 - 50 scanned images. We just want to read our comics.

Scanned comics tend not to have white backgrounds, and the lettering isn't always as dark as it could be. It's too hard to read the words if they don't contrast against the background. The application fixes that (among other things).

Has this offended you for some reason? I didn't get paid to do this you know. I'm not a spokesperson or industry rep for ePub. I did just enough research to make it work. This may surprise you but I have a day job and a family-- writing free software (and giving it away by posting on forum like this) comes out of what little free time I have.

The program works, works well, and costs a whopping $0.00. If you don't like it then don't use it.

3/20/2010 12:56 PM  
Blogger Marc Hansen said...

The problem is you're trying to hawk your donationware (if it's free, why're you asking for money?) on my site (as well as a few others as I've seen). I'm guessing you trolled the sites that even mentioned ePUBs and dropped your "hey, I can do this all automagically" bomb.

I'm glad you were able to write some software that does what you needed it to do. All I'm saying is that your software is totally useless to any ePUB publisher. Note how I said "publisher" and not fan boy wanting to convert their CBR collection.

That's the distinction I think you're missing.

3/20/2010 1:56 PM  
Anonymous Anonymous said...

This template does not work properly because it does not resize itself proportionately when you change the screen size.
Here is a working comic epub example. It resize and fills the screen no matter what your screen size is.

4/29/2010 5:20 PM  
Anonymous Anonymous said...

My bad
Sorry to jump on quick conclusion. Your template works better than the other one. Disregard the previous comment. Thanks for the effort.

4/29/2010 5:43 PM  
Blogger Code Style said...

Marc, thanks very much for your research and the template, this is a helpful reference. I picked up your technique for setting the cover image in the centre of the display area, though its a shame we have to use text-align: center when auto margins should do the job.

In your research have you found an ideal or recommended size for rasterized cover images? The major references recommend vector images but this isn't suitable for my purposes.

6/28/2010 3:41 AM  
Blogger Marc Hansen said...

Thanks, I think the template's a good start. Hasn't been tested with the iPad yet. The use of raster images may not be the best thing because of screen resolution. Just look at the new iPhone - it's screen res is almost the size of the iPad! I think the iPad and other tablets will follow suit with higher screen resolutions. This will effectively make any raster images smaller and smaller (more pixelated). If you have to use raster images, you may want to use images larger than what you need (now) and have the code size them to fit the screen.

6/28/2010 6:12 AM  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home