Can i rotate text and insert images in Mobi and EPUB?

[JanGLi]

I have attached 3 pictures. I am converting an ebook in PDF format to mobi and epub. The tools i am using are calibre and sigil.

In picture 1 can i rotate a paragraph? and put a picture like it in behind text. Can it be done using sigil? HTML? CSS? or any other way that i don't know of? I know i can always paste a picture, but i want it to be text.

In picture 2 can i write headings like this using sigil,HTML or CSS?

In picture 3 the boxes are easy and i think i can put pictures in these boxes, but how to create these bubble or any other reasonable alternative?

I am waiting for your reply. Regards and thanks every one in advance

[Iznogood]

The only way to achieve these effects is either
A) insert images of what you want. I.e. make an image of your rotated paragraph and insert it as <img src="path_to.jpg" alt="The text in the image"/>
B) using svg (scalable vector graphics). This is a powerful tool, but you need to read up on the subject yourself.

Html/CSS will not suffice to do what you want to do

[JanGLi]

Thank you for your reply. I have tried svg and nearly achieved the effect but the problem is they are not supported by mobi format, i think epub supports them but not sure. Can any one confirm if they are supported by mobi/epub?

[Jellby]

SVG is not supported by mobi (at least by the "classic" mobi format). It is supported by ePub, though, but whether the particular features you want to use are supported by any specific reader... that's something that has to be tested.

By the way, I used SVG to rotate a couple of lines of text in my Tom Sawyer ePub (it can be found in our library here at MR), chapter 5.

[JanGLi]

thank you every one. I successfully inserted a background image for Epub.

style="background-image: url(../Images/andrew.JPG);"

but i doesn't work of mobi. Plus i think background images are not good for ereader. The text is usually hard to read if there is a background image.

THanks any way.

[dgatwood]

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.

@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>