readium / readium-sdk

A C++ ePub renderer SDK
BSD 3-Clause "New" or "Revised" License
389 stars 164 forks source link

SVG-rendering #3

Open 127 opened 11 years ago

127 commented 11 years ago

There's a difference between svg rendering for OS X and iOS. The book https://dl.dropboxusercontent.com/u/7303914/ship.epub contains custom svg animation (works in every modern browser). OS X SDK launcher works fine but iOS SDK launcher fails to render it. What's the difference?

rkwright commented 11 years ago

They are different binaries. In theory, this is unlikely to have anything to do with the SDK, but I'll look into it.

Thanks for passing this along.

rkwright commented 11 years ago

I have been able to reproduce this. It still appears to be a bug/missing feature in iOS' WebKit. I will try to look at it some more soon.

AlanQuatermain commented 11 years ago

That's strange— I'm sure I've seen SVG working in the Kobo iOS app, and therefore in UIWebView.

rkwright commented 11 years ago

It's a pretty unusual use of SVG. For quite a while iOS' SVG support only worked via an object tag ­ no direct embedding (I think that is fixed). But this file uses a script and some third party JQuery cartography code to build an animated SVG in the DOM. I didn't have time to dig into it, but I suspect UIWebView has some bug/missing feature there.

Ric

From: Jim Dovey notifications@github.com Reply-To: readium/readium-sdk <reply+i-13535119-92729320d354bab85b93e7ac39ba498ffedae7aa-3025864@reply.git hub.com> Date: Wednesday, April 24, 2013 12:16 PM To: readium/readium-sdk readium-sdk@noreply.github.com Cc: Ric Wright rkwright@geofx.com Subject: Re: [readium-sdk] SVG-rendering (#3)

That's strange‹ I'm sure I've seen SVG working in the Kobo iOS app, and therefore in UIWebView.

‹ Reply to this email directly or view it on GitHub https://github.com/readium/readium-sdk/issues/3#issuecomment-16949554 .

127 commented 11 years ago

By the way is there any debugging tool (firebug alike) for interactive components inside epub? I just cannot catch the bug to fix it inside UIWebView.

AnFengDe commented 11 years ago

You can use chrome and developer tools extension for debug js,css and html. If you debug native code, use xcode.

127 commented 11 years ago

I do it this way for front-end dev while writing epub app. But I cannot trace what happens in UIWebView Webkit instance while runnig my JS.

AlanQuatermain commented 11 years ago

The only option for UIWebView is to use the iOS 6 SDK and run the app in the simulator. You can then attach to each UIWebView instance from the Develop menu of Safari on the same Mac to debug your JS and observe the DOM. You may need to go into the Settings app in the iOS Simulator and toggle something in the Safari settings there, though\ I don't recall.

On 2013-04-25, at 8:12 AM, Marat notifications@github.com wrote:

I do it this way for front-end dev while writing epub app. But I cannot trace what happens in UIWebView Webkit instance while runnig my JS.

\ Reply to this email directly or view it on GitHub.

127 commented 11 years ago

@AlanQuatermain ok, thx! I'll check!

whmccoy commented 11 years ago

For this type of thing (subtly different flavors of usage of web technologies in EPUB) I urge that the in-progress EPUB 3 Reading System Conformance Test Suite ( https://github.com/mgylling/epub-testsuite ) be consulted and if it doesn't have a test for the particular flavor that it be added. Ideally development of Readium SDK and the conf test suite should be mutually reinforcing (which implies running the conf test should be integrated into SDK dev automated testing).

--Bill

On Wed, Apr 24, 2013 at 9:23 PM, rkwright notifications@github.com wrote:

It's a pretty unusual use of SVG. For quite a while iOS' SVG support only worked via an object tag ­ no direct embedding (I think that is fixed). But this file uses a script and some third party JQuery cartography code to build an animated SVG in the DOM. I didn't have time to dig into it, but I suspect UIWebView has some bug/missing feature there.

Ric

From: Jim Dovey notifications@github.com Reply-To: readium/readium-sdk

<reply+i-13535119-92729320d354bab85b93e7ac39ba498ffedae7aa-3025864@reply.git hub.com> Date: Wednesday, April 24, 2013 12:16 PM To: readium/readium-sdk readium-sdk@noreply.github.com Cc: Ric Wright rkwright@geofx.com Subject: Re: [readium-sdk] SVG-rendering (#3)

That's strange‹ I'm sure I've seen SVG working in the Kobo iOS app, and therefore in UIWebView.

‹ Reply to this email directly or view it on GitHub https://github.com/readium/readium-sdk/issues/3#issuecomment-16949554 .

— Reply to this email directly or view it on GitHubhttps://github.com/readium/readium-sdk/issues/3#issuecomment-16949980 .

127 commented 11 years ago

I'm experiencing quiete a headache with SVG. Almost every example fails to work. By the way It's better to move this topic to SDKLauncher-iOs. The last theme was super simple http://pepelsbey.net/pres/web-in-curves/examples/hypnotoad/toad.svg Every example fails with something similar to 2013-05-23 15:42:57.291 SDKLauncher-iOS[23559:c07] The socket disconnected with an error! Error Domain=NSPOSIXErrorDomain Code=32 "The operation couldn’t be completed. Broken pipe"

127 commented 11 years ago

It looks like broken pipe bug is produced by multiple src in "video" tag. Example from features matrix https://github.com/readium/readium/wiki/EPUB3-Feature-Matrix fails to work either http://code.google.com/p/epub-samples/downloads/detail?name=sous-le-vent_svg-in-spine-20121022.epub

rkwright commented 11 years ago

Marat,

I just tried the toad on my iPhone and it fails there as well ­ in Safari. Do any of these SVG files you have tried work in Safari? I am seeing a lot of reports of bugs in Safari on iOS, which suggests that the WebKit implementation of SVG on iOS may be the root. Readium SDK doesn't really do anything with embedded SVG ­ we just pass the whole thing to WebKit.

Ric

From: Marat notifications@github.com Reply-To: readium/readium-sdk <reply+i-13535119-92729320d354bab85b93e7ac39ba498ffedae7aa-3025864@reply.git hub.com> Date: Thursday, May 23, 2013 8:01 AM To: readium/readium-sdk readium-sdk@noreply.github.com Cc: Ric Wright rkwright@geofx.com Subject: Re: [readium-sdk] SVG-rendering (#3)

It looks like broken pipe bug is produced by multiple src in tag. Example from features matrix https://github.com/readium/readium/wiki/EPUB3-Feature-Matrix fails to work either http://code.google.com/p/epub-samples/downloads/detail?name=sous-le-vent_svg -in-spine-20121022.epub

‹ Reply to this email directly or view it on GitHub https://github.com/readium/readium-sdk/issues/3#issuecomment-18341560 .

127 commented 11 years ago

Yes toad works fine in safari for me. I found another way — canvas is much better fits interactivity needs.

bluefirepatrick commented 11 years ago

Hello, Marat.

I would be interested in seeing the document you are discussing. Is it possible to send me a copy?

Thanks, Patrick

From: Marat notifications@github.com<mailto:notifications@github.com> Reply-To: readium/readium-sdk reply@reply.github.com<mailto:reply@reply.github.com> Date: Friday, May 24, 2013 6:45 AM To: readium/readium-sdk readium-sdk@noreply.github.com<mailto:readium-sdk@noreply.github.com> Subject: Re: [readium-sdk] SVG-rendering (#3)

Yes toad works fine in safari for me. I found another way - canvas is much better fits interactivity needs.

Reply to this email directly or view it on GitHubhttps://github.com/readium/readium-sdk/issues/3#issuecomment-18405613.

127 commented 11 years ago

Hi, Patrick, here are two files with my experiments 1) https://dl.dropboxusercontent.com/u/7303914/2svg.epub — example with valid interactive svg (head.svg) and extended svg (ship.svg). Works in any browser. 2) https://dl.dropboxusercontent.com/u/7303914/gaming.epub canvas example — everything works fine except javascript snes ROM-emulator (it loses $ jQuery Object) which I've tried to use for canvas test ))) 8-bit games rule. Works in any browser but fails in sdk or uiwebview. It has some working canvas animation examples: primitive animation (page 6) and touch drawing (page 7).

bluefirepatrick commented 11 years ago

Thank you. I look forward to testing them out.

Patrick

Sent from my iPhone

On May 29, 2013, at 10:05 AM, "Marat" notifications@github.com<mailto:notifications@github.com> wrote:

Hi, Patrick, here are two files with my experiments 1) https://dl.dropboxusercontent.com/u/7303914/2svg.epub — example with valid interactive svg (head.svg) and extended svg (ship.svg). Works in any browser. 2) https://dl.dropboxusercontent.com/u/7303914/gaming.epub canvas example — everything works fine except javascript snes ROM-emulator (it loses $ jQuery Object) which I've tried to use for canvas test ))) 8-bit games rule. Works in any browser but fails in sdk or uiwebview. It has some working canvas animation examples: primitive animation (page 6) and touch drawing (page 7).

— Reply to this email directly or view it on GitHubhttps://github.com/readium/readium-sdk/issues/3#issuecomment-18618396.