readium-sdk icon indicating copy to clipboard operation
readium-sdk copied to clipboard

Published 20 hours ago • verified publisher icon readium

SVG-rendering

Open 127 opened this issue 11 years ago • 17 comments

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?

127 avatar Apr 23 '13 13:04 127

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 avatar Apr 23 '13 15:04 rkwright

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.

rkwright avatar Apr 24 '13 17:04 rkwright

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

AlanQuatermain avatar Apr 24 '13 17:04 AlanQuatermain

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 [email protected] 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 [email protected] Cc: Ric Wright [email protected] 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 .

rkwright avatar Apr 24 '13 17:04 rkwright

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.

127 avatar Apr 25 '13 06:04 127

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

AnFengDe avatar Apr 25 '13 12:04 AnFengDe

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.

127 avatar Apr 25 '13 12:04 127

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 [email protected] 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.

AlanQuatermain avatar Apr 25 '13 12:04 AlanQuatermain

@AlanQuatermain ok, thx! I'll check!

127 avatar Apr 25 '13 13:04 127

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 [email protected] 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 [email protected] 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 [email protected] Cc: Ric Wright [email protected] 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 .

whmccoy avatar Apr 25 '13 13:04 whmccoy

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 avatar May 23 '13 11:05 127

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

127 avatar May 23 '13 13:05 127

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 [email protected] 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 [email protected] Cc: Ric Wright [email protected] 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 .

rkwright avatar May 23 '13 13:05 rkwright

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

127 avatar May 24 '13 13:05 127

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 <[email protected]mailto:[email protected]> Reply-To: readium/readium-sdk <[email protected]mailto:[email protected]> Date: Friday, May 24, 2013 6:45 AM To: readium/readium-sdk <[email protected]mailto:[email protected]> 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.

bluefirepatrick avatar May 24 '13 13:05 bluefirepatrick

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

127 avatar May 29 '13 14:05 127

Thank you. I look forward to testing them out.

Patrick

Sent from my iPhone

On May 29, 2013, at 10:05 AM, "Marat" <[email protected]mailto:[email protected]> 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.

bluefirepatrick avatar May 29 '13 14:05 bluefirepatrick