Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Readers > Amazon Kindle > Kindle Developer's Corner

Notices

Reply
 
Thread Tools Search this Thread
Old 03-21-2012, 03:23 PM   #1
AIR-WIZZ
Rookie Know-It-All
AIR-WIZZ began at the beginning.
 
AIR-WIZZ's Avatar
 
Posts: 7
Karma: 10
Join Date: Mar 2012
Location: South Florida
Device: I use them all!
Media Queries on Kindle Previewer

Rookie HTML/CSS user here...
Does the Kindle Previewer support Media Queries?
I have 2 seperate style sheets in my epub targeting:
>No Media Queries
>amzn-mobi
...in that order!
Kindle previewer is not using the mobi.css style sheet when Kindle device is selected.
It continues to use the CSS with no media queries.
Here is a snippet of my code in Sigil.

I've found limited material on media queries for eBooks. Is there a link to a good resource that someone can throw at me? I'd appreciate it.

Basically, I'm currious how you pro's are using Queries?
Are you making one epub that all eBooks are made from? For example, The epub file you make contains the style sheets for Kindle and Nook (Nook ignores media querie style sheets at the moment) or do you have an epub with out media queries for Nook, etc. and another for Kindle conversion with media queries in all CSS's?
AIR-WIZZ is offline   Reply With Quote
Old 04-10-2012, 09:00 AM   #2
Oxford-eBooks
Connoisseur
Oxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of light
 
Posts: 86
Karma: 12096
Join Date: May 2010
Device: Loads!
I find that this:

@media amzn-mobi{
... insert your styles here...
}

Works if you put it in your main stylesheet.
Oxford-eBooks is offline   Reply With Quote
Old 04-10-2012, 09:17 AM   #3
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 9,254
Karma: 42123822
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
Quote:
I've found limited material on media queries for eBooks. Is there a link to a good resource that someone can throw at me? I'd appreciate it.
The Kindle Publishing Guidelines explain four different methods of using the new special media queries (amzn-mobi and amzn-kf8), as well as samples/examples of each. Section 8 is what you're looking for.

I use one main css file to import the proper specific css file(s) based on media queries, myself. It offers me a lot of flexibility that way.

The main.css file:
Code:
@import url(../Styles/epub.css);
@import url(../Styles/mobi.css) amzn-mobi;
@import url(../Styles/kf8.css) amzn-kf8;
Then I only have to link to the main.css file in each of my html files:
Code:
<link href="../Styles/main.css" rel="stylesheet" type="text/css" />
I can then easily comment out the various lines of the main.css file to view the results (and of course, I comment out the epub.css line before building the mobi with kindlegen/previewer).

Last edited by DiapDealer; 04-10-2012 at 09:27 AM.
DiapDealer is online now   Reply With Quote
Old 04-10-2012, 09:22 AM   #4
Oxford-eBooks
Connoisseur
Oxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of light
 
Posts: 86
Karma: 12096
Join Date: May 2010
Device: Loads!
Quote:
Originally Posted by Oxford-eBooks View Post
I find that this:

@media amzn-mobi{
... insert your styles here...
}

Works if you put it in your main stylesheet.
I might want to retract this... seems it doesn't REALLY work.
Oxford-eBooks is offline   Reply With Quote
Old 04-10-2012, 09:32 AM   #5
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 9,254
Karma: 42123822
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
Quote:
Originally Posted by Oxford-eBooks View Post
I might want to retract this... seems it doesn't REALLY work.
But it does work (as long as the css you used can be properly converted to the mobi format). That style will only be view-able in the mobi-only portion of the resulting mobi. You'd have to switch the Previewer to 'Kindle' emulation to see the results, though. The 'Fire' emulation mode (default) won't use the parts identified with the 'amzn-mobi' media query.
DiapDealer is online now   Reply With Quote
Old 04-10-2012, 09:38 AM   #6
Oxford-eBooks
Connoisseur
Oxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of light
 
Posts: 86
Karma: 12096
Join Date: May 2010
Device: Loads!
I'm finding that the first style in the block is being ignored!
Oxford-eBooks is offline   Reply With Quote
Old 04-10-2012, 09:50 AM   #7
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 9,254
Karma: 42123822
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
It was working properly before the recent 2.4 Previewer upgrade. That I'm sure of. Perhaps they broke something? I'd have to do some testing.
DiapDealer is online now   Reply With Quote
Old 04-10-2012, 09:52 AM   #8
Oxford-eBooks
Connoisseur
Oxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of light
 
Posts: 86
Karma: 12096
Join Date: May 2010
Device: Loads!
Using MobiGen 6.2 command line, and Previewer 2.31
Oxford-eBooks is offline   Reply With Quote
Old 04-10-2012, 10:11 AM   #9
Oxford-eBooks
Connoisseur
Oxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of light
 
Posts: 86
Karma: 12096
Join Date: May 2010
Device: Loads!
So, just for fun I installed Previewer 2.4, same results.
Anything wrong with using MobiGen, or is it wise to use KindleGen nowadays?
Oxford-eBooks is offline   Reply With Quote
Old 04-10-2012, 10:24 AM   #10
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 9,254
Karma: 42123822
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
Quote:
Anything wrong with using MobiGen, or is it wise to use KindleGen nowadays?
Nothing "wrong," except that mobigen won't honor those amzn-kf8/amzn-mobi media queries at all. It knows nothing about them or the new KF8 format.

Just drag & drop the ePub containing those media queries onto the Previewer window, and it's built-in kindlegen will build the MOBI and correctly interpret the those new media queries for you (or the kindlegen command-line will do the same thing).
DiapDealer is online now   Reply With Quote
Old 04-11-2012, 09:50 PM   #11
AIR-WIZZ
Rookie Know-It-All
AIR-WIZZ began at the beginning.
 
AIR-WIZZ's Avatar
 
Posts: 7
Karma: 10
Join Date: Mar 2012
Location: South Florida
Device: I use them all!
I almost forgot about this post. Got some great info out of these posts so let me update my issue with queries.
In the OP, you can see I assigned a Media string in the <style> section for amzn-mobi.
Everything is fine when I finish and preview in Kindle Previewer EXCEPT:
  • EPUB doesnt validate
  • EPUB doesnt work as an EPUB any longer
In other words, Most of the CSS is broken on the Nook or Aldiko or ADE, etc.

UPDATE: What I did at first was remove all @media jargon for epub version but it really bothered me that this wasnt working as everyone says it should.
Now I havent tried using @import (mainly cuz I dont fully understand it YET! Im a rookie, remember!?) but what I did do that worked was I simply removed the media="amzn-mobi" from the <style> tags in every sheet and simply put (example CSS) on a seperate style sheet:
Code:
@media amzn-mobi{
p {
	text-align:left;
	margin-top: 5px;
	margin-bottom:5px;
}
}
Basically, I've set my EPUB to display properly with no Media Queries on most epub readers, then I copy and paiste all the CSS to be modified to the other style sheet and reset the variables to old mobi.
Everything validates and works on all my machines as both epub and mobi. My end result is a validated EPUB that can be converted to mobi easily.
AIR-WIZZ is offline   Reply With Quote
Old 05-29-2012, 12:03 PM   #12
luckyparrot
Junior Member
luckyparrot began at the beginning.
 
luckyparrot's Avatar
 
Posts: 2
Karma: 10
Join Date: May 2012
Device: all
@AIR-WIZZ
I'm where you were at the start of this thread. I understand what you're saying about putting the mobi css on a separate style sheet, but where in the html do you point the reader to the second style sheet?

I've found if I use no media queries, the epub looks and works great on Nook, Sony, iPad, Kobo, and Kindle Fire. With media queries (at the top of my css) it looks and works great on both Kindle formats and the iPad, but obviously breaks on the others. What am I missing?
luckyparrot is offline   Reply With Quote
Old 05-30-2012, 12:58 AM   #13
agomm
Junior Member
agomm began at the beginning.
 
Posts: 2
Karma: 10
Join Date: Jul 2011
Device: Kindle, iPad, Nook
Adding the media query to html

Hey luckyparrot,

You point your html to all the stylesheets in the head of your html. If you've got more than one stylesheet, you'll need to create more than one link.

So let's say you've got your handy mobi stylesheet and one for everything else. You'll do one, then the other:

<head>
<style type="text/css" media="amzn-mobi" href="css/mobi.css" />
<style type="text/css" media="not amzn-mobi" href="css/standard.css" />
</head>

(where you replace the css/mobi.css and css/standard.css for the filepath to whatever and wherever you've named your files)

You can keep listing and listing and listing different queries and associated stylesheets if you wanted. Just make sure you test at every step along the way. Some devices (ahem nook) get jealous if you list someone else's stylesheet before theirs.

If you use @import or @media in your css, you shouldn't need a separate rule for everything not mobi, but if you really want to have everything in separate pretty categories, you can use not amzn-mobi to do that the same way you used amzn-mobi to target mobis.
agomm is offline   Reply With Quote
Old 09-04-2012, 01:35 PM   #14
SusanM
Bemused by possibilities
SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.
 
SusanM's Avatar
 
Posts: 58
Karma: 480244
Join Date: Jul 2012
Device: iPad3, Kobo
Quote:
Originally Posted by DiapDealer View Post
But it does work (as long as the css you used can be properly converted to the mobi format). That style will only be view-able in the mobi-only portion of the resulting mobi. You'd have to switch the Previewer to 'Kindle' emulation to see the results, though. The 'Fire' emulation mode (default) won't use the parts identified with the 'amzn-mobi' media query.
Both nested and external media queries work for me. I was wondering about whether commenting out for epub works well or whether best to use a separate file to convert through KindleGen. You haven't had a problems with Amazon with the epub.css?
SusanM is offline   Reply With Quote
Old 09-04-2012, 01:55 PM   #15
SusanM
Bemused by possibilities
SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.SusanM ought to be getting tired of karma fortunes by now.
 
SusanM's Avatar
 
Posts: 58
Karma: 480244
Join Date: Jul 2012
Device: iPad3, Kobo
DiapDealder

Question: when I preview queries on Kindle Previewer or sideload on to Kindle for Mac and Kindle for iPad, results are that Kindle for Mac previews KF8 and Kindle for iPad and Kindle for iPhone preview/use mobi query both on devices and on Kindle Previewer. So conclusion: Kindle for iPhone and Kindle for iPad (not Kindle for Mac) use mobi query. However, someone said that they thought that when published, not previewed or sideloaded, that Kindle for iPhone and Kindle for iPad then use KF8. No idea why publishing would do this and Kindle Previewer wouldn't. Your experience? Anyone else?
SusanM is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Kindle Previewer issues DanBenton Kindle Formats 4 01-27-2012 05:40 AM
Queries re Kindle mitch13 Amazon Kindle 7 07-01-2011 01:08 AM
Kindle Previewer: Differences between Kindle and iPhone/iPad modes Jackwritesbooks Kindle Formats 5 06-22-2011 12:25 PM
Bugs in new Kindle Previewer v.1.6? rglk Amazon Kindle 14 05-30-2011 02:42 PM
The Kindle Previewer expected soon Sheikspeare Amazon Kindle 2 07-04-2010 12:34 PM


All times are GMT -4. The time now is 09:34 AM.


MobileRead.com is a privately owned, operated and funded community.