Kindle Media Query

[pdurrant]

Originally Posted by Macsurfcat

Not missing that at all, I completely understand that . . .

Yes, the KF8 bit contains a CSS, and an epub that is NOT the original ingested by Kindlegen, and that CSS includes a "@media all" tag. And that, my friend, is the issue.

Returning to the first post, if you include a media tag of the form "amzn-mobi" in your CSS, in your original epub, and you ingest that into Kindle Previewer/Kindlegen, that media query neither effects the old mobi bit, nor the new KF8 bit. So, if I open that mobi on a Kindle Fire, or a "paperwhite", none of the styling enclosed within the media query will appear. If that is true, and it appears to be so, how do I target the older device/format?

Please comment

How do you know that the amzn-mobi tags do not affect the old Mobi bit of the file? Have you compared the old mobi HTML extracted by KindleUnpack on some books with and without amzn-mobi tags?

Unless you strip out the KF8 bit from the kindlegen output, you won't see the old mobi bit on Paperwhite or Fire devices. The only Kindles that will display the old Mobi and the Original Kindle, the Kindle 2, some Kindle 3s with old firmware, and some old versions of Kindle for iOS. All other Kindle devices and software will display the KF8 section instead.

[Macsurfcat]

Okay, thanks for being patient . . .

The pseudo-epub, and its CSS, reflects what has happened in kindlegen. I'm assuming the "@media all" tag is the consequence of this "recreation" of the epub within the mobi8 section.

So, remembering the patience part, following the above posts, this pseudo-epub, that is, its CSS, WILL NOT include any element selector, nor media tag, based upon a media query of the form "amzn-mobi".

However, the expectation is that the dual-purpose mobi will incorporate what is enclosed by the "amzn-mobi" tag within its code describing the referenced elements.

Why is this not happening?

[Macsurfcat]

yes, yes, I've done it every possible way.

What I do is add various media tags with element definitions you cannot miss, to see what happens. I've also tried using two different sets, one "mobi" and one "kf8".

The results, simplified:

amzn-mobi has no effect on the file

amzn-kf8 has the desired effect, and will produce that effect displayed on a Kindle "eink" and a Kindle Fire

if both are used, the "mobi" is ignored, and the "kf8" styling is displayed

if I "remove" the media query, and use its values in the main CSS, the desired effect is produced, on any Kindle (as expected)

I use Kindle Previewer version 2.94.

[Macsurfcat]

By the way, sorry Kovidgoyal for "jumping" this forum.

Is there a way to move a thread to a different location?

[DiapDealer]

The amazon media queries (including amzn-mobi) most certainly affect the mobi-only portion of the dual-format file that kindlegen/kindlepreviewer produces. If used correctly, they allow the ebook creator to provide separate css to be used when creating the two formats (mobi/KF8). I do it all the time. I use them in conjunction with "display: none" to make sure the correctly formatted html is displayed/hidden based on the format being generated.

I would guess that if your amzn-mobi supplied css appears to be having no affect on the mobi-only portion produced, then you must be supplying css that is unsupported for the purposes of creating the older mobi format.

[BetterRed]

Originally Posted by Macsurfcat

By the way, sorry Kovidgoyal for "jumping" this forum.

Is there a way to move a thread to a different location?

Moderator Notice
Moved to Kindle Formats

BR

[Macsurfcat]

Yes, that seems logical, and we and our vendors subscribe to that view. However, this is what we are seeing when we use kindlegen (within Previewer) locally to output a "mobi" file

This is what our CSS looks like (a truncated view):

Main CSS: epub selector:

.num00
{
font-size:small;
margin-top:1.3em;
margin-bottom:0em;
text-indent:-1.8em;
margin-left:3.5em;
margin-right:1.5em;
text-align:justify;
font-weight:normal;
}

Media Query

@media amzn-mobi {
.num00
{
font-size:small;
margin-top:1.3em;
margin-bottom:0em;
text-indent:-3.8em;
margin-left:0em;
margin-right:1.5em;
text-align:justify;
font-weight:normal;
}
}

We have used various values to highlight the effect, but the result is always the same:

If we take the values in the media query and apply it to the CSS proper, the display will change to reflect new values

If we use "amzn-mobi", nothing happens

If we use "amzn-kf8", the display will change to reflect new values



that's all I have, and no reasonable explanation . . .

[eschwartz]

Where do you see this? Because everyone else who tries those books on a Kindle Original/2/3/4 without the 3/4 updates to provide KF8 capabilities, gets a different result... furthermore, Amazon specifically designated those media queries for this exact purpose, so I am disinclined to believe they sneakily changed kindlegen to ignore them (for no good reason).

There is something wrong with your code, or there is something wrong with your method of checking, or there is something wrong with kindlegen itself.

You have said #1 is not the case.
#3 is dubious at best.

#2 is the obvious choice.

[pdurrant]

Originally Posted by Macsurfcat

Okay, thanks for being patient . . .

The pseudo-epub, and its CSS, reflects what has happened in kindlegen. I'm assuming the "@media all" tag is the consequence of this "recreation" of the epub within the mobi8 section.

So, remembering the patience part, following the above posts, this pseudo-epub, that is, its CSS, WILL NOT include any element selector, nor media tag, based upon a media query of the form "amzn-mobi".

However, the expectation is that the dual-purpose mobi will incorporate what is enclosed by the "amzn-mobi" tag within its code describing the referenced elements.

Why is this not happening?

I think that the thing you are missing is that the amzn-mobi tag only affects the HTML 3.2 generated for the old mobi-7 portion of the combined file produced by Kindlegen.

That all the amzn-mobi tags are stripped from the CSS in the Mobi-8/azw3/KF8 portion of the joint file is the expected result.

As I've said previously, you will only see the mobi-7 rendering when viewing on a limited number of very old Kindles and Kindle software.

Unless you've viewed the separated mobi-7 produced by KindleUnpack, you've probably never seen the mobi-7 portion at all.

[Doitsu]

@Macsurfcat: AFAIK, Kindle media queries usually need to be used in pairs (amzn-mobi and amzn-kf8) to work as designed.

For example, the following works fine:

@media amzn-mobi {
    span.firstletter {
        font-size: 3em;
        font-weight: bold;
        color: teal;
    }
}

@media amzn-kf8 {
    span.firstletter {
        font-family: sans-serif;
        float: left;
        font-size: 4em;
        font-weight: bold;
        margin-top: -0.2em;
        margin-bottom: -0.2em;
        margin-right: 5px;
        color: red;
    }
}

<h3>Media query test</h3>

<p><span class="firstletter">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit.</p>

[DaleDe]

Originally Posted by Macsurfcat

Yes, that seems logical, and we and our vendors subscribe to that view. However, this is what we are seeing when we use kindlegen (within Previewer) locally to output a "mobi" file

This is what our CSS looks like (a truncated view):

Main CSS: epub selector:

.num00
{
font-size:small;
margin-top:1.3em;
margin-bottom:0em;
text-indent:-1.8em;
margin-left:3.5em;
margin-right:1.5em;
text-align:justify;
font-weight:normal;
}

Media Query

@media amzn-mobi {
.num00
{
font-size:small;
margin-top:1.3em;
margin-bottom:0em;
text-indent:-3.8em;
margin-left:0em;
margin-right:1.5em;
text-align:justify;
font-weight:normal;
}
}

We have used various values to highlight the effect, but the result is always the same:

If we take the values in the media query and apply it to the CSS proper, the display will change to reflect new values

If we use "amzn-mobi", nothing happens

If we use "amzn-kf8", the display will change to reflect new values



that's all I have, and no reasonable explanation . . .

Try using both in the book. Perhaps the main entry is overriding the selection entry. It should a selection entry also. But, some of the mobi entries are not supported in mobi so how can they work? Look at http://www.mobipocket.com/dev/articl...TagRef_OEB.htm for what is supported.

Dale

Dale

[Hitch]

Originally Posted by Macsurfcat

Yes, that seems logical, and we and our vendors subscribe to that view. However, this is what we are seeing when we use kindlegen (within Previewer) locally to output a "mobi" file

This is what our CSS looks like (a truncated view):

Spoiler:

Main CSS: epub selector:

.num00
{
font-size:small;
margin-top:1.3em;
margin-bottom:0em;
text-indent:-1.8em;
margin-left:3.5em;
margin-right:1.5em;
text-align:justify;
font-weight:normal;
}

Media Query

@media amzn-mobi {
.num00
{
font-size:small;
margin-top:1.3em;
margin-bottom:0em;
text-indent:-3.8em;
margin-left:0em;
margin-right:1.5em;
text-align:justify;
font-weight:normal;
}
}

We have used various values to highlight the effect, but the result is always the same:

If we take the values in the media query and apply it to the CSS proper, the display will change to reflect new values

If we use "amzn-mobi", nothing happens

If we use "amzn-kf8", the display will change to reflect new values



that's all I have, and no reasonable explanation . . .

I KNOW I am going to be sorry to jump into this, but, gents, can we all start at the beginning? (Sorry, guys, I'm deliberately carrying the coding along, in the quoted, for reference).

@Macsurfcat:

Before we all go ONE step further, precisely and exactly what devices--list them--are you using to test your theories and the output, please? When you say, as you've said repeatedly, that you are seeing "nothing" or that "nothing happens," WHERE is it that you are seeing nothing, and for what change, EXACTLY?

And when you say you're "in a dispute" and talk about you and your vendor, with whom is the dispute (a bookmaker, a retailer, whom?), and who do you mean, in terms of "vendor?" Are you making these books commercially, for someone?

Let's start there.

Spoiler:

Some of you may recall the rather infamous 30- or 50-post long thread about missing fonts--from someone using Kindle Cloud Reader???? If someone had asked this question at the beginning of the thread, MANY hours of my time could have been saved--that, and the bookmaker's.

Hitch

[Macsurfcat]

Ok all, and thanks for the flurry of responses. I think I'm going to look very carefully at the list of supported features, as Dale has suggested, and discuss this further with staff. I'm fairly certain from these responses this is result of something I'm doing, or not doing, in my research.

Just for the record, however, this is what I think I'm doing:

I have a valid epub, that contains in its CSS a media query of the form amzn-mobi that will change a font style (small to large, or to bold, or to italic) and margins of an element in the text files ( as noted above in my example).

I take that epub and generate Kindle output using Previewer 2.94.

When I look at the output in Kindle Previewer, I don't see the change in style, even when I select "e-ink"

If I take that file, load it into a Kindle "e-ink" (4th generation), or a "paperwhite", the expected changes via the media query, are NOT VISIBLE.


We choose, at this time, to make every effort to support the older devices, and we normally upload all our epubs to Amazon for conversion.

So there it is . . . I will return to this when I have a clearer view

[pdurrant]

Originally Posted by Macsurfcat

When I look at the output in Kindle Previewer, I don't see the change in style, even when I select "e-ink"

If I take that file, load it into a Kindle "e-ink" (4th generation), or a "paperwhite", the expected changes via the media query, are NOT VISIBLE.

The older mobi version will only display on (as I've said before) Kindle 1, Kindle 2, Kindle 3 with original firmware, and some older Kindle for iOS applications.

On a 4th Gen Kindle and on a Paperwhite you'll be seeing the KF8 portion.

[Doitsu]

@Macsurfcat: You won't see any changes because Kindle Previewer can't simulate older (non-azw3/KF8) Kindles.

To test your media queries, you'll need to:

1. Generate a .mobi file with Kindle Previewer/KindleGen.
2. Split it into mobi7 and azw3 components using Kindle Unpack or the Kindle Unpack Calibre plugin.
3. Test the mobi7 component with an eInk Kindle or a Kindle app.