iBooks Author ePub3 Media Queries

mattmc · 10-09-2016, 10:10 PM

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;
}

However, you'll note that it's specifying margins and things in points, whereas I need it to be based on the screen size.

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:

Your XHTML has to be minified. Pretty-printed XHTML results in extraneous spacing between paragraphs and such, so I guess the engine doesn't ignore whitespace.
It completely ignores basic media queries as far as I can tell, including "screen", "max-width" and "min-width" (didn't try any others).
Using the "media" attribute on a CSS link tag fails, meaning that I suppose it is never true, evidenced by the fact that the stylesheet is ignored no matter what your media query is. CORRECTION: The attribute media="all" registered as true and pulled in my stylesheet.
Javascript in <script> tags is escaped and rendered as text. If it's in the <head> it is bumped into the top of the <body> tag.
Percent-units seems to have some effect but not what you would think at all, it doesn't seem to be a % of the container width or anything.
Units like "vw" or "vh" are ignored and cause the entire CSS rule to be disregarded.
When viewing this ePub in iBooks for OSX, there is no Inspector available, even when you do defaults write com.apple.iBooksX WebKitDeveloperExtras -bool YES so you can't see what's going on.
The CSS rule "background-color" with any hex value produces a black background, although simply "background" with a hex value produces the expected output.
It seems to ignore float settings, and doesn't like <div> and <table> and things (iBooks specifically refused to open the file when I put a <table> in it).
Adding <meta name="viewport" content="width=device-width, initial-scale=1.0"> to the <head> causes the file to not open in iBooks.

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.

dgatwood · 10-11-2016, 11:38 PM

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.

mattmc · 10-12-2016, 05:55 PM

Quote:

Originally Posted by dgatwood

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.

Thanks Dave

You've certainly wrestled with CSS enough to weigh in on this sort of thing.

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.

10-09-2016, 10:10 PM	#1
mattmc 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; } However, you'll note that it's specifying margins and things in points, whereas I need it to be based on the screen size. 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: Your XHTML has to be minified. Pretty-printed XHTML results in extraneous spacing between paragraphs and such, so I guess the engine doesn't ignore whitespace. It completely ignores basic media queries as far as I can tell, including "screen", "max-width" and "min-width" (didn't try any others). Using the "media" attribute on a CSS link tag fails, meaning that I suppose it is never true, evidenced by the fact that the stylesheet is ignored no matter what your media query is. CORRECTION: The attribute media="all" registered as true and pulled in my stylesheet. Javascript in <script> tags is escaped and rendered as text. If it's in the <head> it is bumped into the top of the <body> tag. Percent-units seems to have some effect but not what you would think at all, it doesn't seem to be a % of the container width or anything. Units like "vw" or "vh" are ignored and cause the entire CSS rule to be disregarded. When viewing this ePub in iBooks for OSX, there is no Inspector available, even when you do defaults write com.apple.iBooksX WebKitDeveloperExtras -bool YES so you can't see what's going on. The CSS rule "background-color" with any hex value produces a black background, although simply "background" with a hex value produces the expected output. It seems to ignore float settings, and doesn't like <div> and <table> and things (iBooks specifically refused to open the file when I put a <table> in it). Adding <meta name="viewport" content="width=device-width, initial-scale=1.0"> to the <head> causes the file to not open in iBooks. 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.

Similar Threads
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

10-11-2016, 11:38 PM	#2
dgatwood 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.