Completely frustrated by iBooks Author and iBooks

Question

Level 2

285 points

Completely frustrated by iBooks Author and iBooks

I have been writing in iBooks Author for a while to produce a book. I loved what was shown by Apple as possibilities. My book contains a lot of diagrams, the source material are vector images (SVG or PDF). These images are sometimes large and are unreadable, unless the user can zoom in and pan/scroll around.

Given that iOS is PDF-based and that HTML5 has SVG I assumed (mistakenly) that iBooks and iBooks Author would support resolution-independence vector images. Indeed, it will accept PDF often, but on creation of the .ibook, it produces low resolution bitmaps. There is no decent way to create image viewing that enables a user to look at a diagram that cannot be read on page size of an iPad2. Interactive Image will allow larger images (up to 4096pixels wide in landscape mode), but to let the user zoom you need fake viewpoints that point somewhere and in all, creating something where the user can pan/scroll/zoom is ugly and a pain.

I have been looking at HTML5 widgets to see if one can get around this. But here too, iBooks Author seems not to allow SVG in those (just displays empty, so does iBooks Author kills the SVG on export from .iba to .ibooks?). SO, I hoped the standards of iOS (PDF and HTML5) woul dsolve any problem, but iBooks Author seems to make sure it does not work.

I am so frustrated that I am close to giving up. iBooks Author and Ibooks need (for me):

- handling vector-images (SVG and PDF) (come on, Apple, how can you be so slow with supporting resolution independence, especially given Retina iPads?)

- the ability to let the user pan/scroll over large images that can be zoomed in/out

And I am not talking about stupid things like not being able to replace an image inside a picture element with a new image without losing the picture element and having to manually redo all the links to it.

It has been more than a half year since Apple released iBooks Author. Unless I find a way to let the reader investigate larger diagrams, preferably interactive ones, e.g. created as a HTML5 widget with SVG objects in it, or unless Apple delivers a product with less problems bugs and such, my project needs to move away from iBooks.

Posted on Aug 8, 2012 3:42 PM

Reply

Answer 1

Nyberg

Level 1

8 points

Oct 6, 2012 1:34 PM in response to jawsnap

Hi Johnatan.

Actually I have used Zoomify in a virtual tour which uses both KRpano and Zoomify

So the initial index.html was the KRpano and the Zoomifye was linked from it.

I did a test yesterday with Zoomify alone and it worked also perfect.

Here is a link to a tutorial how to crerate the widget for a pano2VR viewer, It is the same for KRpano or for Zoomify.

http://www.panophoto.org/forums/viewtopic.php?f=64&t=10417&p=158423&hilit=ibook# p158423

Hans

Reply

Answer 2

Gerben Wierda Author

Level 2

285 points

Oct 7, 2012 1:07 AM in response to Mango4444

@Mango4444, my book is now almost done in PDF created in InDesign (Pages couldn't do it practically). No interaction, limits on the size of diagrams I can show in a readable way (it is A4), but at least it is done. Since I'm not able to sell it through the iBookStore and print distribution would make it too expensive, it's going to be offered as 'begware'.

I still have to move away from iWeb (I was burned by that one too). I know it is off topic, but what did you end up using instead?

Reply

Answer 3

TechJ86

Level 1

0 points

Nov 29, 2012 8:25 AM in response to Gerben Wierda

I got the same issue right now...

Just wondering if anyone figure this out on iBooks.

thanks.

Reply

Answer 4

Dec 3, 2012 1:50 AM in response to Gerben Wierda

Have you tried the interactive image widget? Can be used to display an image larger than the iPad screen and supports zoom.

Apple's support page about optimizing assets suggests images should be in jpg or png form though.

Jenny

Reply

Answer 5

Jan 6, 2013 10:05 AM in response to Gerben Wierda

svg images are only visible in widgets in iBook if they are displayed using an <embed> tag, svg images displayed via the <img> tag will not work.

If you want to animate svg, I've been able to get animated svg widgets to work in iBook with Sencha Animator, but you must to hack the generated index.html to have the svg images included with an <embed> tag vs. the <img> tag that Sencha generates.

If you look toward the bottom of the Sencha generated html, you will find <div> tags for each asset. For example, svg image tags like this:

<div id="an-obj-9"><div><img height="80" width="68" src="assets/fish.svg"></div></div>

Need to be modified like so:

<div id="an-obj-9"><div><embed height="80" width="68" src="assets/fish.svg"></div></div>

I haven't investigated the implications of changing <img> tags to <embed> tags this way, so your mileage my vary.

There are a number of permutations for displaying and scaling svg images on a web page. I found a post on edutechwiki.unige.ch helpful in this regard, see http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial

Reply

Answer 6

AGYmbert

Level 1

0 points

Sep 9, 2013 3:59 AM in response to Gerben Wierda

I was looking for the same pan-and-zoom feature and I've found that widget from Bookry:

http://www.bookry.com/author/widget/library/imageexplorer/

I've tried the demo version in my iPad and it works fine, but it costs 150€ per book to use it without their logo. I've tried to recreate the widget using Edge Animate but it doesn't work anyway....

Reply