After a week of stressful hyphens, we thought it was time to play with the fluffy parts of ePub for iPad. The agenda was of course to see what extras could be wrung out of iPad using extended CSS features.
Please remember, we are not saying this should be done, the exercise is to discover what can be done. However for non-fiction trade publishers this does open up interesting value propositions. Where a book can only be done in gray because of printing costs, the ePub could reflect a higher level of design including colour and design elements not available in print.This was eerily reminiscent of our earlier exercise making flashcards.
Page One
We took a standard IPG:FLIP FoundationXHTML notebox and started to decorate it. This first page shows some simple border affects applied. Notably we used webkit corner radius on the boxes with a few shadow options, and then some standard border options.
Looking good so far.
An explanation. The grey border around the edge of the page is deliberate and applied just to see the box model working in different views. All the noteboxes are 100% of galley width. This is a test!
Page Two
Ramping it up, from top to bottom.
We put in a nice coloured header. This had to have matching radius's applied with the main container.
Next a drop shadow. Yes! This was the first tricky one really as this is currently only supported by Gecko and Webkit. Very nice to see this. I like drop shadows. Looks like it needs a bit of width correction to allow the shadow to be rendered in the presentation area.
Pushing this a little harder, the Header was absolutely positioned with negative margin, and the shadow applied to the header. It worked out perfectly.
Page Three
Moving right along and still from the top.
CSS background applied with sizing control using webkit features. This can only be seen when the viewport is resized. There are a lot more tests to do with all the new background CSS properties, but this was a start.
The sunset hot box is using gradients. Because we don't rate ourselves as creative, the gradient was cut and paste from the Safari demo site. But the effect is very obvious. Used more subtly this probably has a long way to go. Interestingly this had sans-serif applied to the font that didn't survive.
The last is a CSS generated background using z-ordered gradients to look like pretty round things. Again thanks to the Safari demo site.
Page Four
Perhaps a personal favourite. CSS columns for a short compact notebox, very nice.
The last column balancing was a little interesting. Still a bit of code work to do there, but nothing that probably wouldn't be fixed with a few blank lines at the bottom.
Page Five
This was a try-on, but worked! A CSS transform was set to rotated the block 90 degrees, and it did. I am not sure exactly where this would be used, but it is interesting nonetheless.
Compare this to the text layout of the rotated shot below. The box height is the same as the viewport width (hoz size was 100%). In the rotated sample the text has reflowed. Because the transform point has not been set it moves down a bit.
Page Six
An inspirationally coloured table. This was included because the colour statements were applied to the <tr> elements, something ADE ignores. It is a lot less tedious executing artful table styling in rows rather than every cell.
Page Seven
One more try-on. CSS rotation transform of a whole table. Again, done just to see if it worked. It did, and it was exciting. The relevance in the real world... arguable I guess.
The Rest
For anyone interested in seeing the rotated results, here they are in no particular order. For the idle and curious, you can access the ePub here Download IGPN-epub-test-for-ipad.
Ha! And you call me a torturer! :)
Cool stuff... if we only had reliable page breaks (apart from document change) so that they wouldn't break across pages...
Posted by: Liz Castro | 21 May 2010 at 05:01 PM
Nice work, by you and Liz on her blog. There seem to be relatively few people pushing the iPad layout capabilities at this stage.
I'm still trying to find a work around for the page-breaks issue. Have you had any success with this?
Since there seems to be no support for the CSS page-break-before -after -inside, I'm trying to work out how to lay things out so that the iPad decides to break pages where I want them... the only thing is, I don't know its rules, so it's hard to play by them!
Posted by: Stewart Gleadow | 25 May 2010 at 09:17 AM
I have a test case in preparation with a lot of different breaks and conditions. Also in our XHTML we use a lot more block structures than most ePub XHTML, so I am interested to see if break before and after works with that.
Out of interest we have a pretty heavy "interactive" basic test framework coming up, hopefully later today - using just about everything Safari Mobile has got. It really pushes the envelope. It uses fixed dimension blocks - 540px x 786px, and these fill the full screen exactly and seem to progress well from screen to screen well. Not a page break I know, but of some interest.
Posted by: Richard Pipe | 26 May 2010 at 11:14 AM
Hi Guys.
Until Apple implements CSS page breaks the best way to force page breaks is to use separate HTML files inside an ePub.
Posted by: Lech Rzedzicki | 01 June 2010 at 05:53 PM
Hi Lech,
The problem with this is creating an ePub that is device specific. That removes the future value of the "so called" open format, and highlights the fact that sooner or later epubs will have to be created for specific delivery channels and device capabilities.
We fight with ADE in center aligned poetry - and other stuff - (it just can't do it), and now with iPad with something as basic as page breaks. That is a factor of Apple Safari Mobile features. Even though Apple say use CSS3, they do have their tongues pretty firmly in their cheeks.
Other than the silly print book chrome, it is luxurious to have a substantially CSS compliant playground for eBook presentation design... in colour, in a reasonable resolution...
Posted by: Richard Pipe | 10 June 2010 at 09:54 PM
This is very similar to what I've been wanting to try. Much Thanks for this, especially with the ePub files to demonstrate. More Homework for me to learn how to implement. 8)
Posted by: Chris Nash | 11 September 2010 at 08:17 PM