Background image with text on top?

[RbnJrg]

Hi Psymon;

Try the epub I attach below; the image you are using as dropcap is not suitable for KDX so I employed an alternative method. Maybe this last one can be useful for you.

The stylesheet I used was:

p {
    text-align: justify;
}

span.dropcap {
    margin-top: 0.2em;
    margin-right: 0.38em;
}

span.dropcap img {
    width: 100%;
}

span.drop {
    display: none;
}
 
span.drop1 {
    float: left;
    width: 6em;
    max-width: 23%;
}

@media amzn-mobi {
span.dropcap {
    margin-top: 0em;
    margin-right: 0em;
}

span.dropcap img {
    display: none;
}

span.drop {
    display: inline !important;
}

span.drop1 {
    float: none;
    width: 1em;
    font-size: 1.8em;
    font-weight: bold;
}
}

And in the .html file the code was:

<p><span class="dropcap drop1"><img alt="M" src="../Images/init-m.gif" /><span class="drop">M</span></span>ORBI dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui.</p>

Regards
Rubén

[Psymon]

Originally Posted by RbnJrg

Try the epub I attach below; the image you are using as dropcap is not suitable for KDX so I employed an alternative method. Maybe this last one can be useful for you.

Thank you so much, Rubén! But there seems to be a problem -- I have no trouble opening your epub in Sigil, but when I try to open it in KP I get a message saying "Kindle Previewer has failed to compile the book" (and then it won't open, of course).

[RbnJrg]

Originally Posted by Psymon

Thank you so much, Rubén! But there seems to be a problem -- I have no trouble opening your epub in Sigil, but when I try to open it in KP I get a message saying "Kindle Previewer has failed to compile the book" (and then it won't open, of course).

That is because I forgot to add the metadata

Open the ePub in Sigil, press F8, fill the metadata fields and then save all. This time the ePub will compile under KP

[Psymon]

Originally Posted by RbnJrg

Open the ePub in Sigil, press F8, fill the metadata fields and then save all. This time the ePub will compile under KP

Excellent! That worked -- at least, now it compiles, however there's a problem...

Everything seems to display just fine in all the Kindles -- except in KDX. In KDX the dropcap doesn't show up -- no image at all. Here, I'll attach a screenshot of what I see...

[Hitch]

Originally Posted by Psymon

Excellent! That worked -- at least, now it compiles, however there's a problem...

Everything seems to display just fine in all the Kindles -- except in KDX. In KDX the dropcap doesn't show up -- no image at all. Here, I'll attach a screenshot of what I see...

Uh, guys?

The KindleDX is a K7 device. I haven't had the time to look at a boatload of this code, but didn't you guys code a K7 fallback that just shows the letters?

Hitch

[RbnJrg]

Originally Posted by Hitch

Uh, guys?

The KindleDX is a K7 device. I haven't had the time to look at a boatload of this code, but didn't you guys code a K7 fallback that just shows the letters?

Hitch

Yes, there is a fallback code to manage that. I don't know why is not working. I'll do some tests.

[RbnJrg]

Now it will work:

p {
    text-align: justify;
    text-indent: 0;
}

p + p {
    text-indent: 1.2em;
}

span.dropcap {
    margin-top: 0.2em;
    margin-right: 0.38em;
}

span.dropcap img {
    width: 100%;
}

span.drop {
    display: none;
}
 
span.drop1 {
    float: left;
    width: 6em;
    max-width: 23%;
}

@media amzn-mobi {
span.dropcap {
    display: none;
}

span.dropcap img {
    display: none;
}

span.drop {
    display: inline !important;
    font-size: 1.8em;
    font-weight: bold;
}

span.drop1 {
    display: none;
}
}

<p><span class="dropcap drop1"><img alt="M" src="../Images/init-m.gif" /></span><span class="drop">M</span>ORBI dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui.</p>

So it is as looks in KDX:



Below you can see the respective ePub.

Regards
Rubén

[Psymon]

Originally Posted by RbnJrg

Now it will work

Once again, that's great! And thank you again, Rubén!

That will work fine (of course), but I'm a little confused by something -- and was similarly a bit confused by Hitch's question about this. Images do show up in KDX, but is there no practical way to do dropcaps that make use of images in that (even if the placement of them is different than how it would appear in other Kindle versions, etc.)?

Just wondering -- obviously this will work just fine, still! Thanks again!

[Hitch]

Originally Posted by Psymon

Once again, that's great! And thank you again, Rubén!

That will work fine (of course), but I'm a little confused by something -- and was similarly a bit confused by Hitch's question about this. Images do show up in KDX, but is there no practical way to do dropcaps that make use of images in that (even if the placement of them is different than how it would appear in other Kindle versions, etc.)?

Just wondering -- obviously this will work just fine, still! Thanks again!

Psymon:

Making images work moderately consistenly across K7 devices is brutal, actually. For images to work, you have to size them, hard-size them, with the image height AND width set in pixels in the html, not the CSS, obviously. Now, that's all well and good, but the issue is, each K7 device (actually, all Kindle devices) have wildly different screen resolutions. (See this chart: http://en.wikipedia.org/wiki/List_of...density#Amazon and reference the PPI column).

So...getting an imaged drop (to misname it) to work wouldn't be easy. Moreover, the early K7's don't support inline images in any event. I actually don't know about the DX, because we always code for the K7's with the assumption that inline images aren't supported, so I've never tested that device separately.


See what I mean?

Hitch

[Psymon]

Originally Posted by Hitch

See what I mean?

Yes, thanks!

From what you said, though, am I to understand that there are more "Kindles" than what's included in Kindle Previewer? And there are some that can't display images at all? I guess I'm just wondering about not just these dropcaps, but how this thread all began, re "background image with text on top", etc.

Are there some earlier Kindles that don't/can't show images at all, that are "text-only", and that's all? And, at this stage in the game, should I care? I guess I'm just thinking now -- again -- about doing up my chapter titles as full-page images (or background images with text on top). If in some Kindles people won't see ANY chapter titles at all, well, then once again I have to wonder if I should just scrap that idea entirely.

Kindle might be the "most popular" ebook marketplace out there, but I do have to say... I'm learning to really hate it.

[DaleDe]

All Kindles can show images but not necessarily inline. The latest Previewer is v2.92 by the way. The previewer favors current hardware so to see old stuff the you might need an old previewer which of course you cannot download. They seem to care less about their customer base that we do. The Kindle DX turns out to be the last of the old school eBook readers from Amazon so it is the best test of the K7 format.

Dale

[Hitch]

Originally Posted by DaleDe

All Kindles can show images but not necessarily inline. The latest Previewer is v2.92 by the way. The previewer favors current hardware so to see old stuff the you might need an old previewer which of course you cannot download. They seem to care less about their customer base that we do. The Kindle DX turns out to be the last of the old school eBook readers from Amazon so it is the best test of the K7 format.

Dale

FWIW, I'm not using 2.92, because of the AZK and DX issue. I'm still using 2.9 so I can use the K7 previews, to save me all the sideloading time to the K2. The DX may be a K7, but when it comes to more complex books, I need that smaller screen so I can evaluate what the final result will really look like.

Yes: I was surprised to see Amazon just "dump" the K7 K's from the Previewer. They're not Apple, and they've never behaved as cavalierly as Apple does vis-a-vis their hardware and software.

Hitch

[Psymon]

Thanks for the info, Dale and Hitch! That's strange that they drop stuff from the previewer, at the same time that they don't make earlier versions of KP available -- I just searched around and couldn't find earlier versions either. Guess I'm stuck with what I've got (which is the latest). :/

[DaleDe]

Originally Posted by Psymon

Thanks for the info, Dale and Hitch! That's strange that they drop stuff from the previewer, at the same time that they don't make earlier versions of KP available -- I just searched around and couldn't find earlier versions either. Guess I'm stuck with what I've got (which is the latest). :/

You could install an older one if someone made the install program available for download. Or perhaps put it in their dropbox account.

Dale

[GrannyGrump]

oops, sorry, wrong app. I'll try again. (I found KindleGEN 2.9 )

Edit 2:
Anyway, KindlePreviewer version 2.85 is available on many of the softonic.com websites, if you feel you can trust it to be a safe download, and if you don't mind jumping through the hoops of using their downloader and fighting off the default spamware installations that are included. (You have to select "custom" install on those, and THEN you can unselect them!)