SVG and Google Books

[RbnJrg]

Originally Posted by momoha

Yeah in Google Books it was fine!

Well, then the issue with Google Books is solved! You only will use one value, the width (in %) and nothing more. And that by using only a class (I used class="svg" but of course, you can use any of your wish). So, you only work here is to think about how width will be your svg images (in percentage of the screen). Suppose you want three, four "width"; well that is easy because with only three/four clasees you'll have covered the universe.

But I don’t see how making multiple files could be viable for us as it would be complicated for our clients and also from what I know, the main platform where most of our clients send the ePubs takes only one single file, independently of whatever the readers use.

I'm afraid of that "one for all" will be very difficult in this case. The "calc" property is not well supported in all ereaders. Maybe with media-queries could be possible to build one epub but... I think your best chance (that is, with your current restriction, not to use a width and height for each svg image) is with two epubs, one for Google Books and one for all others ereaders. And for all other ereaders you only need to use the following code to manage the svg images:

<p class="center"><img class="svg" alt="Temp" src="../Images/Temp.svg"/></p>

and

.center {
   text-indent: 0;
   text-align: center;
}

.svg {
   font-size: 1em;
   width: 33%; /*or the percentage of your wish*/
   height: auto;
   padding: 1em 0;
}

and that for all svg images. Right now you have made practically all the work; you only need to add 'class="svg"' in your <img> tags and suppressing style="width: xxx; height: xxx;" (a piece of cake with regex).

[RbnJrg]

Originally Posted by momoha

I’m sorry my replies are getting a bit rude...

Don't worry

...I am reaching such a state of frustration with this

I can understand that.

I spent the whole day on this again, and I found two codes that really aren’t that great but eases the work a little bit, and they seem to be working fine (tested with ePub3).

Link to SVG image with "calc" to ease the process:

<p class="texte"><img style="width: height: 1em; calc(1em*width/height);" alt="Logo Canada" src="../Images/canada.svg"/></p>

SVG code embedded, can be processed with regex so useful for books with lots of SVG. But properties="svg" has to be added in the content.opf. So SVG markup is pasted in the ePub, and this is added in the <svg>:

preserveAspectRatio="xMidYMin slice" style="width: 1em; padding-bottom: calc(1em*height/width); height: 1px; overflow: visible"

Ok. But now we have another issue; if you want only one epub, the property "calc" under epub2 is not well supported You need to work only with css2 so ereaders based on epub2/epub3 will be able to open the epub without problems.

[momoha]

Originally Posted by RbnJrg

Ok. But now we have another issue; if you want only one epub, the property "calc" under epub2 is not well supported You need to work only with css2 so ereaders based on epub2/epub3 will be able to open the epub without problems.

I tested the calc codes on my dinosaur Kobo, without the kepub extension, where literally any innovative code won’t work, and they are both working fine, but it is a strange behaviour.

In <svg> of the embedded SVG, it seems to be fully supported. If I remove it, the image is not displayed correctly, and when I insert it back, the image is fine.

But inside the <img> of the linked SVG, it creates problems only if it is placed first, and it is fine when placed last (it is probably just ignored).

Like, this isn’t displayed properly:

<p class="credits"><img style="width: calc(20pt*73.275/17.408); height: 20pt;" src="../Images/canada.svg" alt=""/></p>

This is fine:
Like, this isn’t displayed properly:

<p class="credits"><img style="height: 20pt; width: calc(20pt*73.275/17.408); " src="../Images/canada.svg" alt=""/></p>

I will ask other people to test it also, let’s see. Sadly I don’t have access to other ereader... But the vast majority of our market uses Kobo only.

[RbnJrg]

Originally Posted by momoha

I tested the calc codes on my dinosaur Kobo, without the kepub extension, where literally any innovative code won’t work, and they are both working fine, but it is a strange behaviour.

In <svg> of the embedded SVG, it seems to be fully supported. If I remove it, the image is not displayed correctly, and when I insert it back, the image is fine.

But inside the <img> of the linked SVG, it creates problems only if it is placed first, and it is fine when placed last (it is probably just ignored).

Like, this isn’t displayed properly:

<p class="credits"><img style="width: calc(20pt*73.275/17.408); height: 20pt;" src="../Images/canada.svg" alt=""/></p>

This is fine:
Like, this isn’t displayed properly:

<p class="credits"><img style="height: 20pt; width: calc(20pt*73.275/17.408); " src="../Images/canada.svg" alt=""/></p>

I will ask other people to test it also, let’s see. Sadly I don’t have access to other ereader... But the vast majority of our market uses Kobo only.

But of this way you'll need to write the width and height for each image and that is what you wanted to avoid (style="height: 20pt; width: calc(20pt*73.275/17.408)) Or am I wrong?

But try the following code:

1. In the .xhtml file:

<p class="credits"><img class="measures" src="../Images/canada.svg" alt=""/></p>

2. In the .css file:

.measures {
   height: 2em;
   width: calc(2em*73.275/17.408);
}

But even so, easier would be to employ (and should work in Kobo but not in Google Books):

.measures {
   font-size: 1em;
   height: auto;
   width: 15em; /*or whatever*/
}

[momoha]

Originally Posted by RbnJrg

But of this way you'll need to write the width and height for each image and that is what you wanted to avoid (style="height: 20pt; width: calc(20pt*73.275/17.408)) Or am I wrong?

Yes indeed... that way I just avoid making the calculation myself Well the embedded SVG markup isn’t that bad as I can process it with regex, but yeah still... using calc seems risky.

I guess there’s simply no good solution here, as I really need a single ePub that works on both Kobo and Google Books. I’ll test the code with calc more extensively, else I’ll just make the calculations all the time

[RbnJrg]

Originally Posted by momoha

Yes indeed... that way I just avoid making the calculation myself

Yes, but if are going to write the heigh and width with the property "calc" (dangerous under epub2) is better your first aproximation with <img with="xxx" height="xxx" ... />. The ereader will make the calculations and it will work everywhere. But again, the issue to write for each image its size I still continue thinking that your best bet is to build two epubs. For Kobo you only need to set a measure (i.e. width: 30% or whatever) and just with a class. And for Google Books, to include the images with my second way of doing it. And so also to employ only one measure, the width, and also with a class.

[momoha]

Originally Posted by RbnJrg

Yes, but if are going to write the heigh and width with the property "calc" (dangerous under epub2) is better your first aproximation with <img with="xxx" height="xxx" ... />. The ereader will make the calculations and it will work everywhere. But again, the issue to write for each image its size I still continue thinking that your best bet is to build two epubs. For Kobo you only need to set a measure (i.e. width: 30% or whatever) and just with a class. And for Google Books, to include the images with my second way of doing it. And so also to employ only one measure, the width, and also with a class.

But then how to distribute two different files?? I check on the platform that 99% of our clients use, and you can specify different files according to the reseller, like a file for Apple, a file for Barns & Nobles, a file for Kobo, a file for online libraries, but then it’s still up to the reader to choose whatever apps he wants to view the ePub. So I really don’t see how we could make a file specifically for Google Books.

[RbnJrg]

Originally Posted by momoha

... So I really don’t see how we could make a file specifically for Google Books.

Hmmm, I see.

[JSWolf]

There is a problem making a separate file for Google Books. The problem is that some people do buy eBooks from Google to use outside of Google Books. I know I've bought some eBooks from Google and used them on my Kobo. So can you be sure that the Google Books specific version would only be used with the Google Books app and not another program where it won't work properly?

[Tex2002ans]

Originally Posted by JSWolf

There is a problem making a separate file for Google Books. The problem is that some people do buy eBooks from Google to use outside of Google Books.

I agree with this. It's not like Apple where they lock it down to use only within iBooks. Google Books can be purchased and read on any device/app, just like your normal EPUB.