View Single Post
Old 02-02-2013, 04:16 PM   #6
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 248
Karma: 556004
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Don't use background-image. It isn't part of the EPUB required CSS subset, so not all readers will show the image.

There are only two correct ways to do what you're asking:
  1. Use an image that contains the text (which will not be searchable).
  2. Use SVG.

I would recommend a combination of the above. Use SVG, and produce two versions of your EPUB—one for Kindle translation and one to ship publicly. In the Kindle version of it, include *two* copies of each image—a flattened PNG image with text inside it and a PNG image without the text. Then use CSS media queries to tell Kindlegen to include the flattened PNG version in the MOBI book and the non-flattened SVG version in the KF8 book, e.g.

Code:
@media amzn-mobi
{
    .mobiOnly {
        display: block;
    }
    .kf8Only {
        display: none;
    }
}

@media not amzn-mobi
{
    .mobiOnly {
        display: none;
    }
    .kf8Only {
        display: block;
    }
}


<div class="kf8Only">... SVG here ...</div>
<div class="mobiOnly">... flattened image here ...</div>
dgatwood is offline   Reply With Quote