![]() |
#1 |
Connoisseur
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 89
Karma: 185923
Join Date: May 2015
Device: iPad 1/2/Air, K3/PW2/Fire1, Kobo Touch, Samsung Tab, Nook Color/Touch
|
iBooks Author ePub3 Media Queries
Okay, so here's a fun one that is laughingly frustrating.
So I use iBooks Author to produce an ePub3, which it is now capable of as of last year. It exports XHTML and CSS, and the CSS looks pretty similar to what InDesign produces. Here's a sample: Code:
.s4{ -ibooks-list-text-indent: 0.00pt; -ibooks-strikethru-width: 1.00px; -ibooks-underline-width: 1.00px; border-bottom-style: none; border-bottom-width: 0; border-left-style: none; border-left-width: 0; border-right-style: none; border-right-width: 0; border-top-style: none; border-top-width: 0; color: #000000; font-family: "JansonTextLTStd-Roman"; font-size: 1.67em; font-style: normal; font-variant: normal; font-weight: normal; hyphens: none; letter-spacing: 0; line-height: 1.20em; margin-bottom: 0; margin-left: 50.00pt; margin-right: 48.00pt; margin-top: 0; page-break-before: auto; tab-interval: 36.00pt; tab-stops: none; text-align: justify; text-indent: 0; text-shadow: none; text-transform: none; vertical-align: 0; } Since my primary target here is iBooks, and not some other ePub3 reader, that's what I'm using to test. It seems like, though, when iBooks renders the ePub is uses its "textbook mode" or somesuch, not the normal ePub renderer. This mode of iBooks has a number of oddities:
So...I'm quite frustrated by this. How am I supposed to do a responsive design with no media queries, and percent values in CSS don't behave properly? For example, giving an image width: 50%; height: auto; results in the image displaying at full size. Make width and height 50% and it seems to be 50%...of something? Not the container width, because the image displays at the same size on an iPad and an iPhone. Mayhaps there are iBooks-specific settings that can accomplish these sorts of things. Per this gist: https://gist.github.com/JayPanoz/05c5f495273225209b9d ...it looks like this isn't just an ePub3, especially with those random -ibooks prefixed style rules, so maybe there's secret voodoo I can use to get a media query to work. Anyone know how to get a hold of the Apple engineer responsible for this? I know this post is super random and a little on the ranting side, but there is no data on this anywhere on the internet that I can find, so I wanted to at least put my findings thus far in some form, and request any ideas or assistance. Last edited by mattmc; 10-10-2016 at 01:44 AM. |
![]() |
![]() |
![]() |
#2 |
Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
What you're describing is really bizarre to me, though, as it doesn't sound at all like the iBooks I know, which AFAIK supports vh, vw, and pretty much everything else that WebKit does.
Two things: The reason your meta tag doesn't work is that it isn't valid XHTML by itself. You need a closing </meta> tag. Unless, of course, you did that and it still failed, in which case... no idea. The spacing issues might be caused by a white-space or white-space-collapsing CSS property somewhere. Try overriding that and setting it to the normal value using a universal selector rule (* { white-space-collapsing: collapse; white-space: normal; }). Beyond that, Apple has folks responsible for responding to iBooks-related bug reports from publishers and content creators. You can generally reach them by filing a bug report at bugreporter.apple.com. You'll need an Apple Connect account, but you'll need one to submit content via the store anyway, so you might as well set one up. ![]() |
![]() |
![]() |
![]() |
#3 | |
Connoisseur
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 89
Karma: 185923
Join Date: May 2015
Device: iPad 1/2/Air, K3/PW2/Fire1, Kobo Touch, Samsung Tab, Nook Color/Touch
|
Quote:
![]() I do actually have an Apple Developer account from the several iPad apps I've made, so I went and started filing bugs pell-mell over the last few days. No Media Queries, no Javascript, justified text increases kerning between letters as well as spacing between words, percent margins screw up the pagination algorithm, etc. I got a response today, which was basically that iBooks is not using WebKit when it's in this mode, they're using their own "native" rendering engine. That's why it doesn't support MQs or JS. So...got it. I'm suggesting that they add support for that kind of thing, but at least the mystery is somewhat cleared up. And they were pretty prompt about it, which I appreciate. |
|
![]() |
![]() |
![]() |
Tags |
epub, epub3, ibooks, ibooks author |
Thread Tools | Search this Thread |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Media Queries for images as dropcaps in Kindle DX | verydeepwater | Kindle Formats | 3 | 03-22-2014 05:35 PM |
Media Queries | eggheadbooks1 | Kindle Formats | 4 | 12-16-2013 02:32 AM |
Epub to mobi not recognizing media queries | srascal | Conversion | 2 | 03-25-2013 05:19 PM |
Calibre and Media Queries | chrlsdrwn12 | Calibre | 0 | 12-05-2012 11:16 AM |
Media Queries on Kindle Previewer | AIR-WIZZ | Kindle Developer's Corner | 26 | 10-15-2012 10:10 AM |