04-10-2012, 08:58 AM | #1 |
Zealot
Posts: 127
Karma: 12096
Join Date: May 2010
Device: Loads!
|
Kindle Fire woes... indent and media Queries
I thought that since I'm having an easy day nursing a nasty cold that I'd have a play with my poetry CSS.
But I'm noticing some REAL wierd stuff on the Kindle Fire in the Amazon previewer. Here's some CSS for a simple three level indent from my stylesheet. I'll get to hanging indents later... Code:
p.poetry1 {text-align:left !important; text-indent: 0em !important; margin-left: 3em !important;} p.poetry2 {text-align:left !important; text-indent: 0em !important; margin-left: 4em !important;} p.poetry3 {text-align:left !important; text-indent: 0em !important; margin-left: 5em !important;} @media amzn-kf8{ p.nothing{text-align:left;} p.poetry1 {text-align:left; margin-left: 3em; color:#f00;} p.poetry2 {text-align:left; margin-left: 4em; color:#0f0;} p.poetry3 {text-align:left; margin-left: 5em; color:#00f;} } @media amzn-mobi{ p.poetry1 {text-align:left !important; text-indent:-20px;} p.poetry2 {text-align:left !important; text-indent:-40px;} p.poetry3 {text-align:left !important; text-indent:-60px;} } Two WIERD problems: 1. My KF8 poetry1 style (well, the colour) is IGNORED unless I have a sacrificial style "nothing" at the start of the block - that CAN'T be right, I must be doing something badly wrong here. 2. I really can't get indents on the Kindle previewer for Kindle Fire to work. All three paragraphs come out with the same indent. Any clues for my flu-addled brain? Andy |
04-10-2012, 09:20 AM | #2 |
Zealot
Posts: 127
Karma: 12096
Join Date: May 2010
Device: Loads!
|
ah... okay, looks like the
@media amzn-kf8{ line was throwing things and breaking the subsequent line... (pass the lemsip) |
Advert | |
|
04-10-2012, 09:41 AM | #3 |
Grand Sorcerer
Posts: 27,549
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
So it's working fine, now? I'm not sure I follow what was going wrong and/or what fixed it. Was there a space needed immediately following amzn-kf8 before the '{' or something?
|
04-10-2012, 09:47 AM | #4 |
Zealot
Posts: 127
Karma: 12096
Join Date: May 2010
Device: Loads!
|
No, not working. SOMETHING wierd is happening, the first style in the block is still getting ignored. Even if I put the '{' on the next line.
Driving me crazy, because I can't see what I'm doing wrong here... |
04-10-2012, 10:10 AM | #5 |
Grand Sorcerer
Posts: 27,549
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Your exact code works fine for me. Even when removing the "p.nothing{text-align:left;}" line, the colors and indents appear as expected when viewing with the Kindle Previewer in Fire mode.
The amzn-mobi part doesn't appear to be working correctly for me... or rather I should say the higher-priority default settings (text-indent and margin-left) seem to be conspiring with the less prioritized negative text-indents in the amzn-mobi section to make the three lines all indented equally as much... at what appears to be three ems. |
Advert | |
|
04-10-2012, 10:27 AM | #6 |
Zealot
Posts: 127
Karma: 12096
Join Date: May 2010
Device: Loads!
|
I've just tried swapping MobiGen for KindleGen in my toolchain and I'm now getting more promising results!
Not quite there yet, but at least thinge seem a little more under control. |
04-10-2012, 12:16 PM | #7 |
Zealot
Posts: 127
Karma: 12096
Join Date: May 2010
Device: Loads!
|
Interesting...
It seems that if you do: @media not amzn-mobi { .poetry1 {text-align:left !important; text-indent: 0em !important; margin:0 0 0 3em; color: #ff0;} .poetry2 {text-align:left !important; text-indent: 0em !important; margin:0 0 0 4em; color: #0ff;} .poetry3 {text-align:left !important; text-indent: 0em !important; margin:0 0 0 5em; color: #f0f;} } On ADE, the first style is ignored, but on Calibre and iBooks all three styles work just fine... sigh. |
04-10-2012, 01:15 PM | #8 |
Zealot
Posts: 127
Karma: 12096
Join Date: May 2010
Device: Loads!
|
... a good day for getting to the bottom of some old legacy problems. There was I thinking that -ve text-indents weren't supported in the new KindleGen, when I found a
Code:
text-indent:1em !important; A hangover from when I put those in to get Stanza to stop over-riding nearly all the formatting. ... ahh, the world makes more sense now. |
04-10-2012, 01:20 PM | #9 |
Grand Sorcerer
Posts: 27,549
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
ADE has no idea what those amzn media queries are. So I doubt it knows how to even interpret not amzn-mobi. But I can't say for sure.
That's why I use the @import method and use three completely separate CSS files: one for ePub, and one each for MOBI and KF8. That way, I just comment out or delete the amzn-* lines to publish the ePub or vice-versa for building the MOBI. |
04-10-2012, 01:25 PM | #10 |
Zealot
Posts: 127
Karma: 12096
Join Date: May 2010
Device: Loads!
|
I'd have thought that a SENSIBLE strategy would have been to ignore any media queries that aren't understood. So @media amzn-mobi or @media some-brand-new-device would just be ignored on ADE as they probably just wouldn't apply. Otherwise, how could it be future-proof?
|
04-10-2012, 01:34 PM | #11 | |
Grand Sorcerer
Posts: 27,549
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Quote:
Last edited by DiapDealer; 04-10-2012 at 02:44 PM. |
|
04-10-2012, 10:08 PM | #12 | |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
Quote:
Dale |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Media Queries on Kindle Previewer | AIR-WIZZ | Kindle Developer's Corner | 26 | 10-15-2012 10:10 AM |
TWO OPF files or something like Media Queries in the OPF file for KF8 and MOBI? | DHahn | Kindle Formats | 3 | 04-17-2012 04:06 AM |
Kindle Fire:Both Wireless Mirroring And Native Streaming Media | frahse | News | 24 | 10-01-2011 07:14 PM |
Queries re Kindle | mitch13 | Amazon Kindle | 7 | 07-01-2011 01:08 AM |