EPUB3: resize SVG in javascript

fbrzvnrnd · 11-04-2016, 05:55 AM

I'm working on a EPUB3 with a SVG inline image with animation and interactivity.
I'd like to change the SVG size, according to pixel width and height of the ebook page, because ADE desktop often opens ebook in landscape mode instead portrait ad "cut" the SVG in half.
I try window.innerWidth, window.innerHeight, it worked in iBooks, but I got wrong values in ADE. I try outerWidth / outerHeight, it worked in ADE, but I got wrong values in iBooks...

Suggestion?

Thank you

Fabrizio

Doitsu · 11-04-2016, 07:01 AM

Since you're working on epub3 books you could "cheat" and query the value of navigator.epubReadingSystem.name (RMSDK vs. ibooks) and use different calcualation methods for ADE and iBooks.

JSWolf · 11-04-2016, 07:01 AM

Make two versions. One that works and one for iBooks.

fbrzvnrnd · 11-04-2016, 08:16 AM

Thank you for the answers. I find a way to have value from ADE and iBooks too... but I discover the values ADE gives to me are wrong with window.outerHeight too. Damn.

fbrzvnrnd · 11-04-2016, 09:28 AM

UPDATE: outerWidth gives me dimension of ALL the ADE window, TOC space included. I hate Adobe.

fbrzvnrnd · 11-04-2016, 11:42 AM

No, actually I can not find a way to know the size of a ebook page with Adobe.

Doitsu · 11-04-2016, 01:06 PM

Quote:

Originally Posted by fbrzvnrnd

No, actually I can not find a way to know the size of a ebook page with Adobe.

If you posted a sample epub that demonstrates this problem, you might get code suggestions that actually work for iBooks and ADE.

(I suck at JavaScript and CSS, but many MR users are much more knowledgeable than me and might have an idea how to solve this problem.)

dgatwood · 11-05-2016, 12:36 AM

Quote:

Originally Posted by fbrzvnrnd

Thank you for the answers. I find a way to have value from ADE and iBooks too... but I discover the values ADE gives to me are wrong with window.outerHeight too. Damn.

Have you tried document.documentElement.clientWidth or document.body.innerWidth?

Hitch · 11-05-2016, 03:28 AM

Quote:

Originally Posted by dgatwood

Have you tried document.documentElement.clientWidth or document.body.innerWidth?

Ooooooooooooh, Dag, you know I love it when you talk dirty to me.

Hitch

fbrzvnrnd · 11-05-2016, 06:51 AM

I attach a simple EPUB3: when you open the page it looks for width and height and draw a svg with a border big as the page. It works in iBooks, it do not work in adobe that gives ever 300 width and 150 height (you can read 120 because I leave 30px in height for avoid overflow in iBooks). I do not find a way to have REAL values of page in ADE.

fbrzvnrnd · 11-05-2016, 07:25 AM

Quote:

Originally Posted by dgatwood

Have you tried document.documentElement.clientWidth or document.body.innerWidth?

Yes, sigh.

RbnJrg · 11-05-2016, 11:04 AM

Quote:

Originally Posted by fbrzvnrnd

I attach a simple EPUB3: when you open the page it looks for width and height and draw a svg with a border big as the page. It works in iBooks, it do not work in adobe that gives ever 300 width and 150 height (you can read 120 because I leave 30px in height for avoid overflow in iBooks). I do not find a way to have REAL values of page in ADE.

I think you wouldn't need javascript to do what you want. You are using (under "preserveAspectRatio" property the value ""xMidYMid slice". You should change it for "xMidYMid meet". After that, erase the code for <rect> and instead, use the property "border". For example, try with this:

Code:

<body style="margin:0; padding:0">
    <div style="text-align: center; padding: 0pt; margin: 0pt;">
         <svg xmlns="http://www.w3.org/2000/svg" height="95%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 900" width="100%" style="border: 10px solid black" xmlns:xlink="http://www.w3.org/1999/xlink">
         </svg>
    </div>
</body>

Regards
Rubén

fbrzvnrnd · 11-05-2016, 07:32 PM

Quote:

Originally Posted by RbnJrg

I think you wouldn't need javascript to do what you want. You are using (under "preserveAspectRatio" property the value ""xMidYMid slice". You should change it for "xMidYMid meet". After that, erase the code for <rect> and instead, use the property "border". For example, try with this:

Code:

<body style="margin:0; padding:0">
    <div style="text-align: center; padding: 0pt; margin: 0pt;">
         <svg xmlns="http://www.w3.org/2000/svg" height="95%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 900" width="100%" style="border: 10px solid black" xmlns:xlink="http://www.w3.org/1999/xlink">
         </svg>
    </div>
</body>

Regards
Rubén

Thank you for the suggestion, but it is not working: the svg image goes outside the page...

RbnJrg · 11-05-2016, 08:29 PM

Quote:

Originally Posted by fbrzvnrnd

Thank you for the suggestion, but it is not working: the svg image goes outside the page...

Hmmm, maybe you could be doing something wrong. Watch the following screenshot of my ADE:

Click image for larger version

Name: Image1.png
Views: 373
Size: 34.8 KB
ID: 152822

Of course, that svg is empty but you can full it with whatever. Perhaps your troubles are due to the image you are using with the svg wrapper or the way that you are using to put stuff inside; what is the size of that image (in pixels)? And, what things do you want to put inside?

fbrzvnrnd · 11-06-2016, 05:04 AM

Quote:

Originally Posted by RbnJrg

Hmmm, maybe you could be doing something wrong. Watch the following screenshot of my ADE:

Attachment 152822

Of course, that svg is empty but you can full it with whatever. Perhaps your troubles are due to the image you are using with the svg wrapper or the way that you are using to put stuff inside; what is the size of that image (in pixels)? And, what things do you want to put inside?

Uh. This is strange: I cut and paste your suggested code in my EPUB3, and I got the result I told... I attach the EPUB3.

11-04-2016, 05:55 AM	#1
fbrzvnrnd Fanatic Posts: 559 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	EPUB3: resize SVG in javascript I'm working on a EPUB3 with a SVG inline image with animation and interactivity. I'd like to change the SVG size, according to pixel width and height of the ebook page, because ADE desktop often opens ebook in landscape mode instead portrait ad "cut" the SVG in half. I try window.innerWidth, window.innerHeight, it worked in iBooks, but I got wrong values in ADE. I try outerWidth / outerHeight, it worked in ADE, but I got wrong values in iBooks... Suggestion? Thank you Fabrizio

11-04-2016, 08:16 AM	#4
fbrzvnrnd Fanatic Posts: 559 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	Thank you for the answers. I find a way to have value from ADE and iBooks too... but I discover the values ADE gives to me are wrong with window.outerHeight too. Damn. Last edited by fbrzvnrnd; 11-04-2016 at 08:45 AM.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
EPUB3 and svg files	roger64	ePub	20	07-12-2022 02:19 PM
ePub3: localStorage/JavaScript/RTL support	Doitsu	ePub	7	06-02-2015 07:55 AM
Is there any android epub reader supporting epub3 with audio/video/javascript?	happycoding	Android Developer's Corner	10	07-29-2014 12:16 PM
Create a javascript quizz for Epub3 in Sigil	BertrandThibaut	Sigil	3	01-26-2014 10:04 AM
JAVASCRIPT support in ePub2/ePub3	Raja1205	ePub	7	09-03-2012 07:48 AM

11-04-2016, 07:01 AM	#2
Doitsu Grand Sorcerer Posts: 5,763 Karma: 24088559 Join Date: Dec 2010 Device: Kindle PW2	Since you're working on epub3 books you could "cheat" and query the value of navigator.epubReadingSystem.name (RMSDK vs. ibooks) and use different calcualation methods for ADE and iBooks.

11-04-2016, 07:01 AM	#3
JSWolf Resident Curmudgeon Posts: 80,784 Karma: 150249619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Make two versions. One that works and one for iBooks.

11-04-2016, 09:28 AM	#5
fbrzvnrnd Fanatic Posts: 559 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	UPDATE: outerWidth gives me dimension of ALL the ADE window, TOC space included. I hate Adobe.

11-04-2016, 11:42 AM	#6
fbrzvnrnd Fanatic Posts: 559 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	No, actually I can not find a way to know the size of a ebook page with Adobe.