EPUB3: resize SVG in javascript - Page 2

RbnJrg · 11-06-2016, 09:02 AM

Quote:

Originally Posted by fbrzvnrnd

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.

Well, good news and bad news. The good news are I found the cause of your issue and I also found the perfect solution (?); the bad news are you won't be able to apply a solution based on svg

I will explain the things.

First, the svg solution.

You need to apply the "border" property (border: 10px solid black or whatever) to the tag <body>. Something like:

Code:

<body style="border: 10px solid black; margin: 0; padding: 0">

or

Code:

<body class="bordered">

and in your .css file to define the class "bordered" as:

Code:

.bordered {
     border: 10px solid black; /* of course you change the border style here */
     margin: 0; 
     padding: 0
}

After that, you need to use a svg image with a height and a width of 100% with no border; you can put whatever inside this svg, no problem with this. By using a svg image with a heigh and width of 100%, the body will be forced to expand with that size and you'll have what you want. Please, open the SVGepub2.epub book I attach in ADE 4.5 (or any ADE). It'll will show the borders as you want.

The cause of your issues.

Your problems are due to a bug in ADE 4.5 for svg images in epub3! There is no way you can have what you want, even by using javascript meanwhile ADE won't fix the svg bug. Please, open the SVGepub3.epub ebook I attach in ADE 4.5. That ebook is the same epub2 you opened previously but compiled/saved as epub3 with the Sigil plugin ePub3-itizer. As you will be able to see, the width is ok but the height isn't. If you open this same epub3 with Readium, the look will be perfect. For this reason, the ADE bug, you can't use a solution based on svg images.

The perfect solution (?)

I tried this only in ADE and with epub3. It won't work with epub2, only with epub3. But as you are working with epub3, this aproximation could work for you.

Instead of using svg images, you will use tables! First, you need to define the height of the <html> and <body> tags in your .css file. The height of them is linked with the thickness of the border you want to use. With a thickness of 10px, I found a height of 95% works fine. The css style I used were:

Code:

html {
	height: 95%;
    margin: 0;
    padding: 0;
}

body {
	height: 95%;
    margin: 0;
    padding: 0;
    border: 10px solid black;
}

#content {
    display: table;
	font-family: serif;
	height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    text-indent: 0;
    text-align: center;
}

.row {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    font-size: 2em;
    font-family: sans-serif;
    font-weight: bold;
    color: purple;
}

and in the .xhtml file, I wrote the following:

Code:

<body>
   <div id="content">
     <div class="row">#uno</div>
   </div>
</body>

Please, check the SVGepub3Bis.epub I attach. With it, you'll understand better what I want to say and what I made.

Regards
Rubén

fbrzvnrnd · 11-06-2016, 10:10 AM

First of all, thank you for you answer. I'm reading it.
Unfortunately the solution you show is not good for me: the svg in example was only an example. The real svg+javascript is a more complex interactive animation, so I can not use a table instead (you can see the real svg in the second half of this video: https://www.facebook.com/fabrizio.ve...1500225007241/).

Thanks again for the message.

f.

RbnJrg · 11-06-2016, 10:58 AM

Quote:

Originally Posted by fbrzvnrnd

First of all, thank you for you answer. I'm reading it.
Unfortunately the solution you show is not good for me: the svg in example was only an example. The real svg+javascript is a more complex interactive animation, so I can not use a table instead (you can see the real svg in the second half of this video: https://www.facebook.com/fabrizio.ve...1500225007241/).

Thanks again for the message.

f.

But you drown in a glass of water

You can put that svg (with the animation and javascript) inside the table! Look, I put a svg image with text and a yellow background inside the table:

Click image for larger version

Name: Image1.png
Views: 330
Size: 30.1 KB
ID: 152835

It looks fine. I attach a new epub (SVGepub3Ter.epub) so you can see better the things.

Regards
Rubén

fbrzvnrnd · 11-06-2016, 11:50 AM

Quote:

Originally Posted by RbnJrg

But you drown in a glass of water

You can put that svg (with the animation and javascript) inside the table! Look, I put a svg image with text and a yellow background inside the table:

Attachment 152835

It looks fine. I attach a new epub (SVGepub3Ter.epub) so you can see better the things.

Regards
Rubén

Really interesting, thank you... it seems to work fine in ADE. But now it does not work in Ibooks: the table and SVG takes only 1/3 of the page...

f.

RbnJrg · 11-06-2016, 12:38 PM

Quote:

Originally Posted by fbrzvnrnd

Really interesting, thank you... it seems to work fine in ADE. But now it does not work in Ibooks: the table and SVG takes only 1/3 of the page...

f.

Build two epubs: one for ADE and another one for iBooks. For ADE use the combination of tables and svg inside tables (of that way you avoid the ADE bug for svg under epub3) and for iPad use directly SVG images as in my SVGepub3.epub example. Of that way you'll have what you want

Regards

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

Quote:

Originally Posted by RbnJrg

Build two epubs: one for ADE and another one for iBooks.

As I've already suggested, there's no need to build two epubs, because the rendering engine can be easily detected by checking the navigator.epubReadingSystem.name value with JavaScript. (It returns RMSDK for ADE and ibooks for iBoooks.)
Once you know this value you could easily manipulate HTML and/or CSS to hide whatever code is not supported.

RbnJrg · 11-06-2016, 06:06 PM

Quote:

Originally Posted by Doitsu

As I've already suggested, there's no need to build two epubs, because the rendering engine can be easily detected by checking the navigator.epubReadingSystem.name value with JavaScript. (It returns RMSDK for ADE and ibooks for iBoooks.)
Once you know this value you could easily manipulate HTML and/or CSS to hide whatever code is not supported.

Perfect! So the OP alredy has the solution he was looking for.

fbrzvnrnd · 11-07-2016, 10:02 AM

Thank you for your answers. Tonight I was thinking to put together the RbnJrg and the Doitsu suggestions to try to have a unique EPUB3 working in ADE and Ibooks. navigator.epubReadingSystem.name seems to have some problem with Azardi, but I'm looking for a solution.

fbrzvnrnd · 11-10-2016, 02:49 AM

I'm stil testing but the patch RbnJrg and the Doitsu suggested seems to work. Btw ADE have got two different bug for SVG: in Macintosh version, if I have a landscape page, the SVG use only the width 100% and not the height one. In Windows version, in landscape or portrait page, the svg have a wrong scale, the image is very very little.
Anyway I'd like to add a "thank you" for RbnJrg and the Doitsu in my ebook (italian language). Could I use "RbnJrg and the Doitsu" or you have another name in real world?

f.

Turtle91 · 11-10-2016, 09:42 AM

It sounds like you haven't updated the width and height properly on your svg files. You need to do that in two places for each svg:

Code:

<div class="fullimg">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" 
     version="1.1" viewBox="0 0 width height" width="100%"
     xmlns:xlink="http://www.w3.org/1999/xlink">
      <image width="0" height="0" xlink:href="../Images/image.gif"></image>
    </svg>
  </div>

fbrzvnrnd · 11-10-2016, 10:41 AM

Quote:

Originally Posted by Turtle91

It sounds like you haven't updated the width and height properly on your svg files. You need to do that in two places for each svg:

Code:

<div class="fullimg">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" 
     version="1.1" viewBox="0 0 width height" width="100%"
     xmlns:xlink="http://www.w3.org/1999/xlink">
      <image width="0" height="0" xlink:href="../Images/image.gif"></image>
    </svg>
  </div>

I do not understand. I have no gif inside my SVG...

RbnJrg · 11-10-2016, 01:05 PM

Quote:

Originally Posted by fbrzvnrnd

I'm stil testing but the patch RbnJrg and the Doitsu suggested seems to work. Btw ADE have got two different bug for SVG: in Macintosh version, if I have a landscape page, the SVG use only the width 100% and not the height one. In Windows version, in landscape or portrait page, the svg have a wrong scale, the image is very very little.
Anyway I'd like to add a "thank you" for RbnJrg and the Doitsu in my ebook (italian language). Could I use "RbnJrg and the Doitsu" or you have another name in real world?

f.

Glad that you have been able to solve your issue. I wasn't aware about the SVG bug in Mac. I also don't know why ADE doesn't fix that bug since is very noticeable; maybe because is a bug that only appears in epub3 and ADE for that kind of ebooks uses the Readium engine to display them. But Readium shows svg images very fine so the bug is caused by ADE.

As far as I'm concerned, I really appreciate your will to write my name in your ebook as a acknowledgement; it's not neccesary but if you insist

, my true name is Rubén Jorge (the nick "RbnJrg" is my name without vowels).

Regards
Rubén

RbnJrg · 11-10-2016, 01:12 PM

Quote:

Originally Posted by Turtle91

It sounds like you haven't updated the width and height properly on your svg files. You need to do that in two places for each svg:

Code:

<div class="fullimg">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" 
     version="1.1" viewBox="0 0 width height" width="100%"
     xmlns:xlink="http://www.w3.org/1999/xlink">
      <image width="0" height="0" xlink:href="../Images/image.gif"></image>
    </svg>
  </div>

ADE has a bug for svg wrappers in epub3. Your code can be perfect but images are going to be showed very tiny

SVG wrappers that work under epub2, they don't under epub3. As a workaround, you should include SVG images inside a css table (read the post #18 of this thread.

Regards

fbrzvnrnd · 11-10-2016, 04:39 PM

Quote:

Originally Posted by RbnJrg

name is Rubén Jorge (the nick "RbnJrg" is my name without vowels).

Regards
Rubén

Thank you. Btw, fbrzvnrnd is my name without vowels

f.

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

Memo: the working code to catch "my" ADE problem is this:

Code:

 try { //I check if the browser is the bleah ADE
        var lettore=navigator.epubReadingSystem.name;
        var adobeChiavicaMaledetta="RMSDK";
        if (lettore==adobeChiavicaMaledetta) {

                       
                        document.getElementsByTagName("div")[0].className="content";
                        document.getElementsByTagName("div")[1].className="row";
                            } ///stop check
                            
        } // stop trying to check                  
                        catch(e) {// if the browser is bad and does not know epubReadingSystem method...
                                    } //please rest

This because some ebook readers (Lekt on Android and Azardi) give error when meet navigator.epubReadingSystem.name and stop the jevascript code.

11-10-2016, 09:42 AM	#25
Turtle91 A Hairy Wizard Posts: 3,347 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	It sounds like you haven't updated the width and height properly on your svg files. You need to do that in two places for each svg: Code: <div class="fullimg"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 width height" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="0" height="0" xlink:href="../Images/image.gif"></image> </svg> </div>

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

11-06-2016, 10:10 AM	#17
fbrzvnrnd Fanatic Posts: 557 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	First of all, thank you for you answer. I'm reading it. Unfortunately the solution you show is not good for me: the svg in example was only an example. The real svg+javascript is a more complex interactive animation, so I can not use a table instead (you can see the real svg in the second half of this video: https://www.facebook.com/fabrizio.ve...1500225007241/). Thanks again for the message. f.

11-07-2016, 10:02 AM	#23
fbrzvnrnd Fanatic Posts: 557 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	Thank you for your answers. Tonight I was thinking to put together the RbnJrg and the Doitsu suggestions to try to have a unique EPUB3 working in ADE and Ibooks. navigator.epubReadingSystem.name seems to have some problem with Azardi, but I'm looking for a solution.

11-10-2016, 02:49 AM	#24
fbrzvnrnd Fanatic Posts: 557 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	I'm stil testing but the patch RbnJrg and the Doitsu suggested seems to work. Btw ADE have got two different bug for SVG: in Macintosh version, if I have a landscape page, the SVG use only the width 100% and not the height one. In Windows version, in landscape or portrait page, the svg have a wrong scale, the image is very very little. Anyway I'd like to add a "thank you" for RbnJrg and the Doitsu in my ebook (italian language). Could I use "RbnJrg and the Doitsu" or you have another name in real world? f.

Advert

Advert