|
|
Thread Tools | Search this Thread |
06-13-2020, 02:33 AM | #1 |
Zealot
Posts: 126
Karma: 2167
Join Date: Oct 2005
Location: Houston, Texas
Device: ipad 1, Nook Simple Touch, Kindle 3, ebookwise 1150
|
Why are css media query examples in Amzn Kindle Publishing Guidelines so terrible?
Why are css media query examples in Amzn Kindle Publishing Guidelines so terrible?
A few weeks ago, I was testing an ebook on Kindle Previewer and Paperwhite and Kindle apps, and I see that my media queries don't work on the Paperwhite (and they ought to). It looks okay in Kindle Previewer though. My goal is on the title page and chapter headings to keep the headings bigger for large displays and smaller for small displays. Sounds logical, right? But what I see instead on the Paperwhite device are title and heading fonts which come from my media query for large displays even though Paperwhite shouldn't do this. Code:
/* Start naked css without queries */ div.book h1.title {font-size: 2em; color: blue; } /* END naked css without queries */ /* BEGIN query for large displays */ @media only screen and (min-width: 1025px) and (max-width: 4000px) and (orientation: portrait) { div.book h1.title { font-size: 7em; font-weight: bold; margin: 1em 0em 1em 0em; text-align: center; } } /* END query for large displays */ I don't know where the problem lies. But things look fine in Kindle Previewer (even for simulated devices) and larger displays on android. Look here: https://kdp.amazon.com/en_US/help/to...4KL488MXKPZ5BK I see this format @media amzn-kf8. This is only applied for the KF8 format. For Mobi CSS styles, use the media query @media amzn-mobi. And then: @media amzn-kf8 and (device-aspectratio:1280/800) Sorry, what is that garbage? Does Kindle only process proprietary tags such as amzn-kf8? Why did they specify an exact device-aspectratio rather than min-width and max-width? (Ok, maybe because Kindle doesn't support max-width css property, does that also mean you can't use such statements in media queries? Finally, if the only way to query a reading system is using device-aspectratio, doesn't that mean that Kindle ought to be providing exact dimensions of all their devices? Where does such information exist? If you have to declare aspectratios in order to do your queries, should there be better examples? (and a table of device aspect ratios) I have several other ebooks with problems like this. Although the code examples are about h1.title, in fact I'm seeing this thing in other css as well. How do you make queries so that smaller displays actually are activated by them? Last edited by rjnagle; 06-13-2020 at 08:17 AM. |
06-13-2020, 10:41 AM | #2 | ||
Grand Sorcerer
Posts: 6,677
Karma: 86234809
Join Date: Nov 2011
Location: Charlottesville, VA
Device: Kindles
|
Quote:
Quote:
For the last five years Amazon has been transitioning to KFX format. (They do not mention that format by name in their documentation, but instead refer to it as Enhanced Typesetting.) KFX format does not support media queries. Any that are present in the source EPUB file are evaluated during the publishing process using generic values for the various properties and the resulting styles are baked into the KFX file. |
||
06-13-2020, 02:27 PM | #3 |
Zealot
Posts: 126
Karma: 2167
Join Date: Oct 2005
Location: Houston, Texas
Device: ipad 1, Nook Simple Touch, Kindle 3, ebookwise 1150
|
Thanks.
Jhowell, To push back a little on your point. Title page must have something more than a heading font. Also, the defaults don't especially seem well-suited for large devices 10-12 inch width. Actually, the original reason for using queries is that I wanted to substitute a heading with an illustrated graphic and then to resize according to screen width. You would expect form factors over a certain size to have these heading graphics about 50% of width, but on paperwhite and iPad minis it makes sense to make the image a little wider (maybe 75% or 80%) for legibility.... Frankly, I haven't been keeping up with KFX (although maybe I should). It would really be sad if Amazon is drifting further from supporting css in the epub3 standard. I never really saw the benefit/value of the KFX format. How is it helping readers? How is it helping publishers? I kind of got the impression that KFX is mainly for Amazon creation tools (though I see in Previewer that I could export my epub to kfx). (I for one would welcome changes to make it easier to force new pages. Even Google Play Books is pretty terrible about supporting that). Last edited by rjnagle; 06-13-2020 at 02:30 PM. |
06-13-2020, 05:03 PM | #4 | |
Guru
Posts: 737
Karma: 7025494
Join Date: Aug 2017
Location: Italy
Device: Kindle Paperwhite, Kobo Elipsa, Pocketbook Color PB633, Inkpad Color
|
Quote:
I don't know, if there is a publisher here he can answer, but may be it doesn't |
|
06-13-2020, 06:55 PM | #5 | ||
Grand Sorcerer
Posts: 6,677
Karma: 86234809
Join Date: Nov 2011
Location: Charlottesville, VA
Device: Kindles
|
Quote:
Headings on the other hand are usually text specified in ems so that they scale with the reader's preferred font size without regard to the screen size. That works out well in most cases. Quote:
The MOBI and KF8 delivery formats were both based on HTML standards that were current at the time. The content was wrapped in a proprietary container, but it turned out to be fairly easy to extract the original HTML. With the newer KFX format they created a much more proprietary format with only loose connections to HTML. That, combined with the aggressive maintenance of DRM for KFX format, shows a commitment to keeping the customer side of Kindle e-books totally under their own control. Last edited by jhowell; 06-13-2020 at 06:59 PM. |
||
06-14-2020, 10:18 AM | #6 |
Zealot
Posts: 126
Karma: 2167
Join Date: Oct 2005
Location: Houston, Texas
Device: ipad 1, Nook Simple Touch, Kindle 3, ebookwise 1150
|
I remember all the Kindle-only kludges I had to devise in 2011 and 2012 (not that Adobe's own support for epub2 was much better). But after KF8, I held out hope that the epub standard and proprietary standard would move closer. Indeed for a few years that seemed to be the case, and I even was able to use a common stylesheet for both kindle systems and epub-based systems. I fear that is no longer becoming possible anymore. If the css media queries supported by Kindle are mostly proprietary and undocumented, then the two systems will continue to diverge.
I have used media queries mainly to scale/resize/position images; on android and ios based systems, they seem to have more support. It's the reading systems on the e-ink devices (as opposed to the e-ink simulations on Kindle Previewer) that have always been the problem. I think there is a need is for a mechanism to adjust layouts depending on the size of the display. With images it is particularly hard because max-width is not supported. Sure maybe we could differentiate between kf8 and mobi using amazon's current media queries, but display size is a much bigger concern for me. |
06-14-2020, 03:11 PM | #7 | |||||
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Looking at those sizes, did you think about what would happen in the Amazon LookInside? Or on a desktop reader like K4PC or KCR? And yes, IME, you need to get the dimensions exact, or the query doesn't work. Using greater than/less than doesn't work at all, at least, not that I've seen. Quote:
As jhowell mentions in his reply, using ems for text headings, or images from your print version, will more-easily achieve what you're trying to do. Trying to create an if/then scenario--"if this device is smaller than X, then use this graphic element, otherwise do this" is probably more aggravation, and less reliable than you want and need. Quote:
Quote:
Quote:
Hitch |
|||||
06-14-2020, 05:04 PM | #8 |
Zealot
Posts: 126
Karma: 2167
Join Date: Oct 2005
Location: Houston, Texas
Device: ipad 1, Nook Simple Touch, Kindle 3, ebookwise 1150
|
Honestly it had never occurred to me to use images on the title page, so I guess I learned something interesting and important
I think the potential "missed opportunity" here is the ability to float images on larger displays. Frankly, a lot of the reading systems are software-based and found on larger nonnative operating systems (kobo and Kindle app on android, & kindle and google play books on ios, etc). It may seem easy just to say write a query for each device (Sanders Kleinfeld refers to this as the Heinz 57 method of ebook formatting), but this can increase the complexity and cruft. Also, I don't know; how many devices does Kindle produce in a year -- and how many years has it been producing devices? This seems like a lot of extra work to gather this information. I hate to start wearing my "Boo Amazon" hat again, but I think they overestimate the willingness of authors and publishers to create the same ebook on different platforms. Or the willingness of consumers to purchase devices that disallow many important reading apps on it. |
06-14-2020, 09:37 PM | #9 | ||||
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Quote:
Quote:
Quote:
People buy their Readers, by and large, from the bookstore that they use. The MR community shops for the "best" device, but this population is incredibly tiny, compared to the typical buyer of Kindles, Nooks, Kobos, etc. I mean, how many millions upon millions of people buy iPhones? And use that as their "best" Reading device, when it's far from? Meh...people use what suits them and only the teeny population of places like MR actually sit there and think "oh, no, if I buy this book on Kindle, it might not work on my Nook," or whatever. Hell, *I* have all those devices and by and large, I still read, 99%, on my Oasis. Why? Because it's the one that I like. When I'm out and around, sure, I read on my Droid phone, but if the book isn't perfect there, I don't give it a moment's thought. Hitch |
||||
06-14-2020, 11:09 PM | #10 |
Zealot
Posts: 126
Karma: 2167
Join Date: Oct 2005
Location: Houston, Texas
Device: ipad 1, Nook Simple Touch, Kindle 3, ebookwise 1150
|
Hitch, you asked, What's Kobo, et al, got to to with the price of tea in China?
Hitch, I realize that you have formatted a lot more kindle ebooks than I have, but treatment of images in a smaller display and in a bigger display is a big deal for my ebooks. On smaller e-ink devices, img can only be a block element. On larger displays, images often look much better when floating alongside text. It's discouraging to hear your report that even those hyper-specific aspectratio queries don't always work. Even doing that seemed onerous and hard to maintain. Thanks for your thoughts on this. This gives me things to chew on while revising my template. |
06-15-2020, 12:37 AM | #11 | ||
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Believe me, I am with you, wanting more-complex books to look/work perfectly and all that, but...I've had to accept that sometimes, I'm just giving into my OCD desire to control everything. That can create a book that doesn't work very well in some circumstances. (For example, I was proud of us when we figured out how to do floating sidebars. Yeah, us! But you know what? They don't work worth a DAMN on smartphones. Yes, we did it--but we shouldn't have done it, no matter what the Client wanted.) Quote:
Also, be advised, ironically, much fo the sample CSS that Amazon shows in its manual and HELP pages--typically doesn't actually work. Yep, I know. Weird, but true. I could be misremembering, but IIRC, that blue-background stuff (exemplar) doesn't work on the devices upon which it should. Again, it could be one of their other examples, but over the years, over and over, seriously--their examples don't work. Whacky, I know. I swear that they have guys in KDP Tech that put that stuff in there just to see who catches it and will complain. Hitch |
||
06-15-2020, 06:38 AM | #12 |
the rook, bossing Never.
Posts: 12,249
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
Don't use media queries.
Keep it simple. |
06-15-2020, 11:19 AM | #13 |
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
|
06-17-2020, 01:13 PM | #14 |
mostly an observer
Posts: 1,515
Karma: 987654
Join Date: Dec 2012
Device: Kindle
|
|
06-17-2020, 02:22 PM | #15 |
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Updated Kindle Publishing Guidelines | jhowell | Kindle Formats | 4 | 03-30-2019 06:40 PM |
Kindle Publishing Guidelines 2017.1 | jhowell | Kindle Formats | 11 | 04-19-2018 02:40 PM |
Amazon Kindle Publishing Guidelines 2015.4 | jhowell | Kindle Formats | 10 | 02-10-2016 02:26 AM |
Kindle Media Query | Macsurfcat | Kindle Formats | 32 | 02-06-2015 10:14 AM |
@media amzn-kf8 and @font-face | phossler | Calibre | 2 | 12-21-2013 11:25 AM |