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

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 10-09-2016, 10:10 PM   #1
mattmc
Connoisseur
mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.
 
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.
mattmc is offline   Reply With Quote
Old 10-11-2016, 11:38 PM   #2
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
dgatwood's Avatar
 
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.
dgatwood is offline   Reply With Quote
Advert
Old 10-12-2016, 05:55 PM   #3
mattmc
Connoisseur
mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.
 
Posts: 89
Karma: 185923
Join Date: May 2015
Device: iPad 1/2/Air, K3/PW2/Fire1, Kobo Touch, Samsung Tab, Nook Color/Touch
Quote:
Originally Posted by dgatwood View Post
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.
mattmc is offline   Reply With Quote
Reply

Tags
epub, epub3, ibooks, ibooks author

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 05:12 AM.


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