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:
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:
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.
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:
- 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.