How to Preserve Text Clarity in ePub Covers

[MikeWV]

How does one create an ePub cover image that preserves text clarity when scaled to fit various screens, and for bookshelf and thumbnail images? I've searched and searched for an answer to this seemingly simple question and have yet to find an answer.

I'm, using a PNG image in an SVG wrapper. The image file was created from an Excel chart using XL Toolbox, which creates a publication quality PNG. Sometimes the text looks good and sometimes it doesn't. It looks great at full scale in IrfanView and almost as good in MS photo Viewer, but not so good in some of the reading software.

It looks real good as a basic SVG image, when it works. But as noted in a recent thread, a pure SVG cannot be used dependably as a cover. I've tried it and found that even when it works as a cover, it doesn't work as a bookshelf cover and presumably not for thumbnails, either.

I've found plenty of advice on what fonts to use and not use but nothing addressing the preservation of the clarity of the text. I know this is a problem with raster-type files but this problem has obviously been overcome somehow, I just can find anything explaining how it's been overcome.

Your input will be greatly appreciated.

[JSWolf]

You need to start with a high resolution cover. ADE for Windows is rather poor at scaling the cover. But if you can read it with ADE for Windows at different window sizes, it should be fine everywhere else.

[MikeWV]

I can read it in ADE but it doesn't look "polished." The large font looks OK but the smaller font is pretty broken up, and it actually looks worse at 300 ppi than it does at 222 ppi. I tried Nook PC, too. It looks worse at both resolutions in Nook PC than ADE.

When I look at the examples on the how-to pages, the text always looks good. But although those sites tell you how to do a cover, none of them say how they got the text to look good.

Maybe I need to go to a resolution way above 300 ppi.

[Hitch]

Originally Posted by MikeWV

I can read it in ADE but it doesn't look "polished." The large font looks OK but the smaller font is pretty broken up, and it actually looks worse at 300 ppi than it does at 222 ppi. I tried Nook PC, too. It looks worse at both resolutions in Nook PC than ADE.

When I look at the examples on the how-to pages, the text always looks good. But although those sites tell you how to do a cover, none of them say how they got the text to look good.

Maybe I need to go to a resolution way above 300 ppi.

Mike:

One possible aspect: if you are making your "image" of text as an image of something else--a spreadsheet, and the text you're talking about is in the spreadsheet, there's really nothing you can do. In the trade, when text is placed atop an image, it's anti-aliased, to prevent the "ragged" edge you're seeing. For a quickie on anti-aliasing, see the articles in Wikipedia, and then you can work your way out to more professional articles on the topic.

This is particularly noticeable on bright, primary-colored texts against high-contrast backgrounds, like red on black. So, again: you can't anti-alias the text, if it's IN the spreadsheet that you originally used to create the image. That's doomed.

What a pro would do is to remake the "spreadsheet" using something else--Illustrator, whatever, and recreate it in a way so that the text was anti-aliased. If that helps.

By the way, even though you didn't ask for this type of input: avoid lots of text on book covers, print or otherwise, but especially on ebooks. It's a sales-killer. The secret to a great book cover is simplicity: ONE single, strong graphic element, with very limited text.

You are correct that SVG cannot be used dependably.

Best of luck.
Hitch

[MikeWV]

Hitch,

I can probably extract the curves from the chart I'm using for my "ONE single, strong graphic element" and add the title, subtitle (maybe) and author (me) in some other program. I'll have to read up on anti-aliasing, as you suggested, first.

Thanks for your input. I think that finally answers my question as why covers produced by pros have nice, neat text that scales well.

[signum]

One more technique for you to think about. You can place a "text" block inside the "svg" block, just after the "image" block. Inside the text block you need to put the "x" and "y" position of the text and the text itself. "x" and "y" are pixels from the left and top of the "viewbox" you specified in the "image" block. This will overlay your text on top of the image.

So, remove the text from your image, get the image to display nicely, overlay the text and everything rescales together. Truetype fonts are basically outline fonts in vector format anyway, so it's pretty easy to add to the svg block. Since they are outline fonts, you also have to specify a "fill" color for them to show up. If you want, you can specify a separate width and color for the outline itself, probably in a contrasting color from the "fill" color.

The "text" block can be styled with font-family, font-size, font-weight, font-style, etc.

What makes this work is that the (vector) font isn't rasterized until after the final display magnification or reduction is known. This will allow the rasterizer to use all the information about the font, including hints. Further, the font will be re-rasterized every time the mag. or red. changes. Say when you shrink the window or make a thumbnail.

[MikeWV]

Thanks, signum.

That sounds like a good place to start. I'll give it a try.

[Hitch]

Originally Posted by MikeWV

Hitch,

I can probably extract the curves from the chart I'm using for my "ONE single, strong graphic element" and add the title, subtitle (maybe) and author (me) in some other program. I'll have to read up on anti-aliasing, as you suggested, first.

Thanks for your input. I think that finally answers my question as why covers produced by pros have nice, neat text that scales well.

You're welcome, Mike. Anytime!

Best,
Hitch