Background image with text on top?

[Psymon]

Originally Posted by RbnJrg

The size limit of 127kb is for .mobi files; for .kf8 the limit is 256kb. But I repeat you, don't worry and continue using a image of 1200x1800. If the image is heavier than 256kb then KindleGen will recompress it to a suitable size.

Oh, well, that's good news! But also bad news -- at least, for images that are 1200x1800. I just pulled up some of the images in my epub that were the largest in file size, and to bring them down to 256kb (or less) I had to apply a lot of compression -- like, down to between 15% and 20%.

But I gather there's not much I can do about that? Assuming not, then I suppose I'd be best off to bring them down to 256kb (or less) myself, rather than let KG do it, right? My original working files are all uncompressed Photoshop files, and if I make them into "high-quality" JPEGs first (greater than 256kb) then I'm already adding compression, and if KG then re-compresses them then I'd only be losing even more quality (i.e. I'd be losing it twice, in a way).

It's a shame, because it doesn't seem that iBooks (and I presume ADE, although I don't know for sure) has that requirement, and for them it's no problem to have nice, high-quality images -- but if I want to make one file that works on all platforms, then it's Kindle's file size requirement that sacrifices quality on every other platform. :/

[RbnJrg]

Originally Posted by Psymon

Oh, well, that's good news! But also bad news -- at least, for images that are 1200x1800. I just pulled up some of the images in my epub that were the largest in file size, and to bring them down to 256kb (or less) I had to apply a lot of compression -- like, down to between 15% and 20%.

But I gather there's not much I can do about that? Assuming not, then I suppose I'd be best off to bring them down to 256kb (or less) myself, rather than let KG do it, right? My original working files are all uncompressed Photoshop files, and if I make them into "high-quality" JPEGs first (greater than 256kb) then I'm already adding compression, and if KG then re-compresses them then I'd only be losing even more quality (i.e. I'd be losing it twice, in a way).

It's a shame, because it doesn't seem that iBooks (and I presume ADE, although I don't know for sure) has that requirement, and for them it's no problem to have nice, high-quality images -- but if I want to make one file that works on all platforms, then it's Kindle's file size requirement that sacrifices quality on every other platform. :/

Again, leave the images as they are; in iPad and ADE will have the best quality and in Kindle they'll have a good quality (the kindle compiler will do the work) and you'll have only one file that works on all plataforms.

[Psymon]

Originally Posted by RbnJrg

Again, leave the images as they are; in iPad and ADE will have the best quality and in Kindle they'll have a good quality (the kindle compiler will do the work) and you'll have only one file that works on all plataforms.

Sounds good -- obviously you know a LOT more about this stuff than I do! And I think my ignorance has me talking myself into imagined problems that don't actually exist sometimes (but, however slowly, I'm learning!).

[Psymon]

Rubén! Rubén! Rubén! I need your help again! I hope you work on weekends (ha ha)!

Originally Posted by RbnJrg

Yes, you can do that by using "media queries". It will take you a bit of work but you can achieve that things degrade gracefully. All styles you want to be used by modern Kindle devices, you must enclosed them between:

@media amzn-kf8 {
...
Here must be all styles for kf8.
...
}

And styles you want to be used by old Kindle devices must be enclosed between:

@media amzn-mobi {
...
Here must be all styles for mobi.
...
}

Okay! I've been working on getting my first epub (which is already up for sale on the iBooks store) converted so that it will also work in Kindle, and I just wanted to confirm something re the above, and also ask a "how-to" question...

Firstly, I think you already answered this, but the stylesheet that I've been using for iBooks/ADE should work fine for KF8 -- correct? So I don't need to make any changes/additions to that?

Assuming that's right, then the only thing I need to do up now is separate styles for mobi. As you described above, these would be done in the same stylesheet, but I seem to recall a way of detecting a device and then importing an entirely separate stylesheet, i.e. can I do something like this, and just put this in my main (iBooks/ADE) stylesheet?...

@media amzn-mobi {
@import url("../Styles/mobi.css");
}

This would greatly simplify designing that stylesheet, actually. In Sigil, I could very easily do a search & replace for the stylesheet references in all my HTML files and change them to point to that mobi.css, then design the latter how I want it to look -- all the while that I can actually "see" how it will look right there in Sigil -- and then when I'm done I just do a search and replace and change it back again.

I presume that makes sense?

EDIT: I'm such a dummy sometimes -- sheesh! Instead, I just put all my mobi styles at the end of my CSS file (but not wrapped in that "@media amzn-mobi", of course) and have just been getting all my styles figured out that way. Duh! So never mind -- re the above, anyway. I'm so dumb sometimes, don't mind me. :/

One other question, on a different subject... in my iBooks/ADE version, I have a few links to websites (not in my main text, but just in my CIP data at the back of the book, in the "small print"). What happens with web links in devices that can't be used as a browser? On the iPad (and Mac) that's no problem, of course -- it just switches over to Safari and displays the web page -- but I have no idea what happens in other devices.

I'm wondering, I guess, if perhaps I should just get rid of those web links completely, or if perhaps I should just write out the URL in full. For example, right now I have stuff like this...

<a href="http://www.DomainName.com">A Website Somewhere</a>

I'm assuming that won't work in some Kindles -- since it's not a web browser -- so would the best way to do that be to change that to something like this?...

<a href="http://www.DomainName.com">www.DomainName.com</a>

At least then the reader can "see" what the link is, even if their device doesn't allow them to actually click on it, and go to it.

Any thoughts on that would be most welcome! Thanks again, in advance!

[RbnJrg]

Originally Posted by Psymon

Rubén! Rubén! Rubén! I need your help again! I hope you work on weekends (ha ha)!

No, I don't work on weekends But in this forum there are many people that are able to help you (Doitsu, Hitch, Jellby, SBT, etc., they know a lot about this stuff –much more than me–).

Okay! I've been working on getting my first epub (which is already up for sale on the iBooks store) converted so that it will also work in Kindle, and I just wanted to confirm something re the above, and also ask a "how-to" question...

Firstly, I think you already answered this, but the stylesheet that I've been using for iBooks/ADE should work fine for KF8 -- correct? So I don't need to make any changes/additions to that?

That's correct (at least, I think so).

Assuming that's right, then the only thing I need to do up now is separate styles for mobi. As you described above, these would be done in the same stylesheet, but I seem to recall a way of detecting a device and then importing an entirely separate stylesheet, i.e. can I do something like this, and just put this in my main (iBooks/ADE) stylesheet?...

@media amzn-mobi {
@import url("../Styles/mobi.css");
}

This would greatly simplify designing that stylesheet, actually. In Sigil, I could very easily do a search & replace for the stylesheet references in all my HTML files and change them to point to that mobi.css, then design the latter how I want it to look -- all the while that I can actually "see" how it will look right there in Sigil -- and then when I'm done I just do a search and replace and change it back again.

I presume that makes sense?

I recommend you to read the Kindle Publishing Guidelines, section 8.3. There you'll find all the methods to submit a media query that Kindle can understand. You can use the @import sintaxis, but in that case maybe should be better to write:

@import url("../Styles/mobi.css") amzn-mobi;

One other question, on a different subject... in my iBooks/ADE version, I have a few links to websites (not in my main text, but just in my CIP data at the back of the book, in the "small print"). What happens with web links in devices that can't be used as a browser? On the iPad (and Mac) that's no problem, of course -- it just switches over to Safari and displays the web page -- but I have no idea what happens in other devices.

I'm wondering, I guess, if perhaps I should just get rid of those web links completely, or if perhaps I should just write out the URL in full. For example, right now I have stuff like this...

<a href="http://www.DomainName.com">A Website Somewhere</a>

I'm assuming that won't work in some Kindles -- since it's not a web browser...

I'm not quite sure for older Kindle devices, but modern ones (K3 and newer) they have a "built-in" web browser.

-- so would the best way to do that be to change that to something like this?...

<a href="http://www.DomainName.com">www.DomainName.com</a>

At least then the reader can "see" what the link is, even if their device doesn't allow them to actually click on it, and go to it.

That would be a good idea for the older Kindle models if they don't have a web browser. Maybe Hitch can inform you better about this point

Regards
Rubén

[Hitch]

Hi:

Hitch thinks that showing the URL is a good idea. If it's a long link, I strongly recommend getting a shortlink from bit.ly or goog, etc., and using that instead, for those folks that have older devices, so that when they go to their computer, it's fast to type. Other than that, I don't see anything here I need to correct or advise upon further that would be of more value than me hearing the sound of my own voice. ;-)

Hitch

[Psymon]

Thank you so much, Rubén and Hitch! That does help alot -- although only a few minutes ago I edited my original post from earlier, after I realized that all I had to do was write out my mobi classes at the end of my original CSS file, work on them there, and then when I'm done just wrap those in "@media amzn-mobi".

Seriously, I'm so slow (dumb) sometimes -- and I do apologize for that. It's crazy, but I started doing web design almost two decades ago, and yet there's times when I feel like such a complete newbie at this. :/

Anyway, thank you for both your replies -- that does indeed help (and/or confirm) with what I was working on. I've just encountered a couple of other little problems, though, as I've been working on this...

One issue relates to some "fancy typography" that I did on my title page(s), which works/looks great in virtually all platforms that can handle my embedded font -- basically everything except KDX, of course. My code looks like this (essentially, but with different words and in a fancy font)...

<h1><span class="shrink">My</span> <span class="grow">T</span>itle <span class="shrink">Page</span></h1>

...and the relevant styles are...

.grow {
font-size: 138%;
}

.shrink {
font-size: 85%;
}

This ends up looking great with my embedded font, but in KDX, without that font, it looks ridiculous.

How do I turn "off" a class for KDX? I don't want to just set the font size at 100%, because that doesn't necessarily always apply. I just want that class to be ignored. I've been searching all over the place with google trying to find an answer to that and can't seem to find one.

Also, one other KDX issue is with images that I'd used for dropcaps. Here's how I've been doing those dropcaps, which works great in everything except KDX...

<p><span class="dropcap drop1"><img alt="L" src="../Images/init-L.gif" /></span>orem ipsum dolor blah blah blah</p>

...and my related CSS...

span.dropcap { margin-top: 0.2em; margin-right:0.38em; }
span.dropcap img {width: 100% }
span.drop1 { float:left; width:6em; max-width: 23%}

In KDX everything blows up and falls apart! The image comes out HUGE, and the text is aligned to the baseline.

If there's another, better way for me to do my dropcap images that's totally different from what I've done here, I certainly don't mind -- I just want them to work okay in KDX, too. I'm just clueless as to how. :/

Thanks so much, to Rubén or anyone else that can help!

[RbnJrg]

Originally Posted by Psymon

One issue relates to some "fancy typography" that I did on my title page(s), which works/looks great in virtually all platforms that can handle my embedded font -- basically everything except KDX, of course. My code looks like this (essentially, but with different words and in a fancy font)...

<h1><span class="shrink">My</span> <span class="grow">T</span>itle <span class="shrink">Page</span></h1>

...and the relevant styles are...

.grow {
font-size: 138%;
}

.shrink {
font-size: 85%;
}

This ends up looking great with my embedded font, but in KDX, without that font, it looks ridiculous.

How do I turn "off" a class for KDX? I don't want to just set the font size at 100%, because that doesn't necessarily always apply.

In the case of your example, you need to make what you said, that is, set the font-size at 100% for both selectors. In others cases will vary according to the properties used. As a general rule, to turn "off" a class for KDX, you'll have to set the property values to the "default" values (that is, values that are applied to a tag when that tag doesn't have any selector in the stylesheet).

I just want that class to be ignored. I've been searching all over the place with google trying to find an answer to that and can't seem to find one.

Well, if the property it can't be applied to KDX (because KDX doesn't support it) then the property is ignored by the Kindle compiler. In that case, is like that you have never written it. In all others cases, you should proceed as I said above.

Also, one other KDX issue is with images that I'd used for dropcaps. Here's how I've been doing those dropcaps, which works great in everything except KDX...

<p><span class="dropcap drop1"><img alt="L" src="../Images/init-L.gif" /></span>orem ipsum dolor blah blah blah</p>

...and my related CSS...

span.dropcap { margin-top: 0.2em; margin-right:0.38em; }
span.dropcap img {width: 100% }
span.drop1 { float:left; width:6em; max-width: 23%}

In KDX everything blows up and falls apart! The image comes out HUGE, and the text is aligned to the baseline.

KDX doesn't support the property "float"; and there you must indicate the image width in PIXELS (width: 100% means 100% of the screen width) and the text aligned to the baseline is the better you can have in KDX.

If there's another, better way for me to do my dropcap images that's totally different from what I've done here, I certainly don't mind -- I just want them to work okay in KDX, too. I'm just clueless as to how. :/

You can have a raised letter as a dropcap, but I like the idea of using raised images as dropcap. If you calibrate well the dropcap width (with a proper image), it could look very well in KDX.

Thanks so much, to Rubén or anyone else that can help!

You are welcome
Regards

[Psymon]

Originally Posted by RbnJrg

In the case of your example, you need to make what you said, that is, set the font-size at 100% for both selectors. In others cases will vary according to the properties used. As a general rule, to turn "off" a class for KDX, you'll have to set the property values to the "default" values (that is, values that are applied to a tag when that tag doesn't have any selector in the stylesheet).

Oh, okay. I guess I'll have to play with it a little more -- I just wish it was more "fun"! I'm surprised, though, as I thought for sure that there must be some way to simply turn a class "off" (so to speak). Obviously not -- but they should make a way of doing that.

Re dropcaps...

KDX doesn't support the property "float"; and there you must indicate the image width in PIXELS (width: 100% means 100% of the screen width) and the text aligned to the baseline is the better you can have in KDX.

You can have a raised letter as a dropcap, but I like the idea of using raised images as dropcap. If you calibrate well the dropcap width (with a proper image), it could look very well in KDX.

Ah, okay -- I'll try that. Does it have to be pixels, though? Can I not set the width as a percentage?

You are welcome

And thanks again, Rubén!

[Psymon]

I'm so exasperated, I just can't seem to figure this out.

I have two issues (unrelated), it would seem...

First, when I add in my mobi styles (which I put at the end of my CSS file -- I'm assuming that's where they should go), most of them seem to work okay in KDX. And that's great! But at the same time I end up losing my embedded fonts in Paperwhite -- all I have to do is temporarily delete all those mobi styles and the embedded fonts come right back again (in PW).

I have no idea why they don't continue to show up in PW, just because I add in those mobi styles -- which should only be affecting KDX, right?

Secondly, I just... can't... seem... to get my stupid dropcaps (using images) to look okay. It's no problem to get them to look like they're supposed to (with minor variations) in everything, using the same code that I was using before, but I just can't seem to get things to work in KDX.

I just don't know what to do -- and I don't even care if I do them up an entirely different way, or if they're placed/sized differently than what I had, I just want them to look okay in "everything". I've searched these forums, and elsewhere on the 'net, and I just can't seem to find anything about this subject -- surely there's gotta be something, somewhere, about using images as dropcaps (and in a way that works in all Kindles, including DX)? I just can't seem to find anything anywhere. Surely I can't be the first person to ever try this (let alone succeed at getting it to work)?

I just don't know what to do.

[RbnJrg]

Originally Posted by Psymon

Ah, okay -- I'll try that. Does it have to be pixels, though? Can I not set the width as a percentage?

Yes, you can use percentage but take in count that means percentage of the screen width and not percentage of the image width.

[RbnJrg]

Originally Posted by Psymon

I have two issues (unrelated), it would seem...
First, when I add in my mobi styles (which I put at the end of my CSS file -- I'm assuming that's where they should go),...

Yes, that is a good place but you are not forced to written them there.

...most of them seem to work okay in KDX. And that's great! But at the same time I end up losing my embedded fonts in Paperwhite -- all I have to do is temporarily delete all those mobi styles and the embedded fonts come right back again (in PW).

I have no idea why they don't continue to show up in PW, just because I add in those mobi styles -- which should only be affecting KDX, right?

Yes, that's very strange. How did you define your custom fonts in your css stylesheet?

Secondly, I just... can't... seem... to get my stupid dropcaps (using images) to look okay. It's no problem to get them to look like they're supposed to (with minor variations) in everything, using the same code that I was using before, but I just can't seem to get things to work in KDX.

I just don't know what to do -- and I don't even care if I do them up an entirely different way, or if they're placed/sized differently than what I had, I just want them to look okay in "everything". I've searched these forums, and elsewhere on the 'net, and I just can't seem to find anything about this subject -- surely there's gotta be something, somewhere, about using images as dropcaps (and in a way that works in all Kindles, including DX)? I just can't seem to find anything anywhere. Surely I can't be the first person to ever try this (let alone succeed at getting it to work)?

Post here an image of one of your problematic dropcaps.

[Psymon]

Originally Posted by RbnJrg

Yes, that's very strange. How did you define your custom fonts in your css stylesheet?

Well, basically as described here...

http://web.sigil.googlecode.com/git/...bed_fonts.html

Like I said, it seems to work fine in "everything" (almost), i.e. iBooks, ADE, and all the Kindles... except DX. But as soon as I add in those mobi styles to my stylesheet, the embedded fonts disappear in Paperwhite, too.

Post here an image of one of your problematic dropcaps.

I presume you mean the image I'm using as a dropcap? Here's one of them (attached).

Thanks -- as always!

[Hitch]

Originally Posted by RbnJrg

Yes, that is a good place but you are not forced to written them there.

You can write them wherever you want, but you need to put the correct media wrapper around them.

Yes, that's very strange. How did you define your custom fonts in your css stylesheet?

I know I'm going to find out that this was asked earlier, but, Psymon, you DID remember to go to the font list and turn on "Publisher font" for the Paperwhite view, right? You're not expecting the font to simply display, are you?

Post here an image of one of your problematic dropcaps.

And what's the real physical size of the image you're using, in terms of pixels? Remember that all the devices will display this image differently, based upon the actual a) pixel size of the image and b) the pixel density of the display. A 100-pixel wide image, for example, looks very different on a DX than it does an HDX. Just FWIW.

Hitch

[Psymon]

Originally Posted by Hitch

You can write them wherever you want, but you need to put the correct media wrapper around them.

Well, I hope so! Basically, I have the same style sheet that I used for iBooks/ADE (with just a few new tweaks to it), and then at the end I put all my "new" styles for mobi at the end, with this wrapped around them...

@media amzn-mobi {

[all my mobi styles here, written out like any other styles would be written out]

}

That is how I'm supposed to do it, isn't it? Like, at the end, I'd effectively see two of those closing curly-brackets, right? I've got a whole bunch of styles in there -- or am I supposed to have that "@media amzn-mobi" stuff wrapped around each and every individual style (for mobi)? I just assumed it was the same as, say, wrapping a <div> around a whole bunch of stuff (if you know what I mean).

I know I'm going to find out that this was asked earlier, but, Psymon, you DID remember to go to the font list and turn on "Publisher font" for the Paperwhite view, right? You're not expecting the font to simply display, are you?

Ha ha, no, I'm slow, but not that slow!

However, now you've got me wondering if there's something corrupt with my Kindle Previewer. Your question got me to fire it up again and check my book (and my settings), and before my fonts weren't showing up in Paperwhite, but my styles in KDX seemed to all be coming out reasonably okay. In checking it out again just now, though, suddenly the fonts are showing up in Paperwhite (and my font settings are the same as before), but my styles in KDX aren't rendering correctly!

I honestly don't know what's going on -- like I said, maybe my installation of KP is corrupt, or maybe it's some weird bug in it... or maybe it's a ghost that just doesn't want me to get this right (which would be my luck!). :/

And what's the real physical size of the image you're using, in terms of pixels? Remember that all the devices will display this image differently, based upon the actual a) pixel size of the image and b) the pixel density of the display. A 100-pixel wide image, for example, looks very different on a DX than it does an HDX. Just FWIW.

Geez, this only seems to get more and more ridiculously complicated.

Well, my dropcap images are all about the same size as the example I posted earlier today (which is one of them) -- they're all 216 px wide, and vary between 215-220px in height or so.

I'm finding Kindle so utterly exasperating, actually. Trying to figure this out has been like riding on a train that keeps going off the rails -- I'll finally get the train going, slowly-but-surely, but then the next thing I know I'm in another train wreck and everything comes to a complete halt (which is when I come here and call out for help!), and then I'll slowly get it lumbering along again... only to end up in yet another wreck that has me trying to clean up yet another disaster and figure out how on earth I got off the rails again.

You all really have my admiration for having figured out how to stay "on track", that's for sure!