Hello Santosha,
Since no one else has replied and I've been struggling with similar issues, I thought I'd chip in even though I'm a rank beginner.
In short, I think some type of fallback styling is needed, and that an @media query forking between mobi and kf8 may not always be enough. I have a Paperwhite, which speaks kf8, but styling based on embedded fonts is ignored unless ‘Publisher Font’ is selected.
My thoughts are still incomplete, but here’s what I’ve learned so far.
I'm currently formatting a book (my very first) as a favor for an author-friend, and I’m trying to do two simple things:
- Add a decorative element to section breaks.
- Add a small image to the title page and to an 'About the Author' page. (It's a glyph taken from an old woodcut, which the author uses like a chop mark).
My workflow is HTML => Sigil => KindleGen. I know HTML and CSS fairly well, and enough RegEx for the simple tasks involved. Both the HTML and CSS passed the W3C validator.
So it should be a piece of cake, right?
The ePub looked great in ADE, and the mobi file looked good on my PW. Then I tried it on Kindle Previewer and found that the images looked horrible if I switched to sepia or night views when emulating one of the Kindle Fires. Searching the MR forums, I learned that Kindle support for transparent backgrounds in image files is broken. (I was using transparent .gifs)
My next idea was to use an @media query:
- The basic CSS would set ‘display: none;’ on the elements containing the images and instead use decorative characters from an embedded font. The font would have to be modified, of course, to include the author’s glyph. This, I was thinking, would work for both ePub and kf8.
- @media amzn-mobi would set ‘display: none;’ on all elements referencing the embedded font, and ‘display: block;’ on those containing the images. Since the target devices are b&w, my thinking is that the lack of transparent backgrounds would be acceptable.
I’ve been testing my idea with a font I found in a thread on
Dividers and fleurons. My testing is not complete ― all I’ve done so far is embed the font and use it for the section breaks ― but I’ve already encountered the font selection problem I mentioned above: on my PW, unless I select ‘Publisher Font’, I get the letter the glyph maps to instead of the glyph from the embedded font. I surely can’t expect the person reading the book to switch fonts, so my idea will only work if the decorative character I want to use maps to an appropriate characters included in the basic Kindle fonts, such as ‘•’ or ‘*’. That way, if the reader has selected their own font ― which I have to assume will generally be the case ― they’ll get something like this
•
for a section break. I’m a survivor of the browser wars, so I’d really like to find ‘the one ring that rules them all’. I hope I can have one set of HTML and CSS that serves for both ePubs and Kindles.
Anyway Santosha, that’s my current thinking.
Best of luck !
Storax