99problems
99problems copied to clipboard
dvschultz
Nook tablets choke on advanced CSS features
I think this might actually be an ADE issue, but I can say with certainty that the Nook tablets ignore sections of CSS where media queries and advanced CSS selectors are present:
- if a media query/CSS selector is in a linked CSS file, the entire CSS file will be ignored.
- if a media query/CSS selector is in a
<style>block in an html file, that entire block is ignored.
the workaround is, of course, to remove all media queries, but that’s pretty terrible for people who try to create a one-size-fits all EPUB file.
another workaround would be to move them all into their own css file separate from the rest, so that nook can ignore that entire file, while other devices can still read them.
Updated issue title to reflect the following additional findings:
- entire block of CSS is ignored when parent or sibling selectors are used.
I've found that if you put any media queries as the VERY last stuff in your CSS, then the Nook Glowlight, Nook HD, HD+ and the iOS and Android apps don't choke. They go through the entire CSS and then stop at the media queries (hence putting them at the end).
Tzviya Siegman and I were able to establish that this worked in the Wiley EPUB 3 template that we built last year and tested across 24+ devices and apps.
Now, I haven't looked specifically at this stuff in almost 6 months now, so Nook could've done something that changed the behavior we observed in January/February 2014. Also, we didn't have a whole bunch of media queries in the CSS. Specifically, we had 1: a Kindle mobi7 media query to handle boxed features for the Kindle DX.
An interesting experiment might be to see how many media queries can be put at the end of a CSS and what Nook does in those circumstances (as in, add a 2nd, 3rd, 4th, media query to do something other than check for values that are totally unrelated to the Nook in the first place - the fact that we were testing for mobi7 may be the only reason that our solution of putting the MQ at the very end resulted in the Nook successfully ignoring the MQ and going about it's business. If, however, the MQ HAD been related to something that the Nook may have, in some way supported, it would also be interesting to know if the choking behavior happens only under those circumstances).
Just some thoughts of stuff to play with to get further information about what's really going on here.
Jean Kaplansky [email protected]
On Sat, May 17, 2014 at 6:31 PM, dvschultz [email protected] wrote:
the workaround is, of course, to remove all media queries, but that’s pretty terrible for people who try to create a one-size-fits all EPUB file.
another workaround would be to move them all into their own css file separate from the rest, so that nook can ignore that entire file, while other devices can still read them.
— Reply to this email directly or view it on GitHubhttps://github.com/dvschultz/99problems/issues/22#issuecomment-43425979 .
Some more fun and games, in ADE 1.7 if multiple CSS sheets are referenced by the same HTML page, internal hyperlinks will go to the top of that HTML page, NOT the specific anchor.
Never did extensive testing, so unsure if it was the presence of multiple CSS sheets, or the fact that the second one was for mobi.
its been reported by @elmimmo that vh units only break ADE when using the margin shorthand: http://epubsecrets.com/vertically-centered-text-in-ibooks.php#comment-25804 I haven’t tested this yet.
@makeBetterEBooks I’m moving your issue into a separate one as it sounds like something else.
I tested media queries (MQ) with Nook Simple Touch (firmware 1.2.1) and with Nook android app (3.4).
If the MQ is using amzn-mobi and amzn-kf8, putting it at the end of the stylesheet works. Nook will ignore everything from the media query onward but will not choke.
MQs on other properties (ex: min-width etc) or using 'not' in the media query (ex: @media not amzn-mobi ), makes nook ignore the whole css file.
Work around is to put the MQs in a separate file.
If you really really need everything in one file and your media queries are not that important, you may use @supports…
like
@supports (font-size: 1em) {
@media screen and (whatever) {
/* Styles */
}
}
Problem is @supports is not meant to be supported in ePub (that's very meta) and though it works quite well and the old RMSDK ignores it (and not the entire stylesheet), IE doesn't support it → http://caniuse.com/#search=%40supports
But yeah if anyone can confirm it works even in Nook so that I can drop that in the Blitz framework, it would be dope.
Note: ADE 4.5 on Windows is using IE 11 rendering engine, not Edge's but you're pretty safe with everything Webkit and forked.
I am totally unsurprised that ADE 4.5 on Windows is using IE 11 and not Edge. The version of Readium that the ADE dev team chose to embed into ADE is maybe 9-12 months older than the latest and greatest Readium repo code to my knowledge. This may have changed since I looked into it, but I don't think it very likely.
I wouldn't worry too much about what is intended and not intended to be supported in EPUB CSS going forward as 3.1 is just going to say "if the CSS 3 component works in a browser, then you should be able to do it in an RS. If you're inclined to make it happen." No more of these cut-down profiles going forward.
YMMV. My understanding may be out of date. At which point the best person to ask would be Dave Cramer.
Jean Kaplansky Content Architect/Strategist | Technical Account Manager | UI/UX | Accessibility Analyst | XML, HTML, and CSS Developer | Instructional Designer +1.518.930.1068 [email protected] @jeankaplansky [email protected]
On Fri, Jun 3, 2016 at 3:02 PM, Jiminy Panoz [email protected] wrote:
If you really really need everything in one file and your media queries are not that important, you may use @supports…
like
@supports (font-size: 1em) { @media screen and (whatever) { /* Styles */ } }
Problem is @supports is not meant to be supported in ePub (that's very meta) and though it works quite well and the old RMSDK ignores it (and not the entire stylesheet), IE doesn't support it → http://caniuse.com/#search=%40supports
Note: ADE 4.5 on Windows is using IE 11 rendering engine, not Edge's but you're pretty safe with everything Webkit and forked.
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/dvschultz/99problems/issues/22#issuecomment-223665380, or mute the thread https://github.com/notifications/unsubscribe/AD21Bw3fhMOJv77vihYFI8cjgxveTT-vks5qIHpRgaJpZM4B75oB .