Revolutionary code? Need feedback

[momoha]

Edit: I submitted this code to Jiminy Panoz and got an extensive reply from him. The use of an image inside a <svg> tag is discouraged by many resellers AND the Apple guidelines. For the full reply: https://github.com/FriendsOfEpub/Blitz/issues/25


Edit: This code is for EPUB3 ONLY!

I came up with what seem to be a revolutionary code that solves all of the problems for full page images AND images with caption. Before making a formal announcement with my company I’d love if some of you guys could double check my code and see if it is as good as I think it is. I tested it with an ePub3 on ADE on Windows 10, iBooks on iPad, and on Android, Bluefire, Google Books and Gitden Reader.

Full page images (the height="98%" is for Bluefire, else it creates a blank page before the image):

  <div>
    <svg style="height: 100vh; width: 100vh" xmlns="http://www.w3.org/2000/svg" height="98%" preserveAspectRatio="xMidYMid meet" version="1.1" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="100%" width="100%" xlink:href="../Images/C1.jpg"/></svg>
  </div>

Image with caption:

   <figure>
    <svg style="height: 60vh; width: 100vh" xmlns="http://www.w3.org/2000/svg" height="60%" preserveAspectRatio="xMidYMid meet" version="1.1" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="100%" width="100%" xlink:href="../Images/C1.jpg"/></svg>
<figcaption>Insert your caption here, and don’t put it in a <p></figcaption>
  </figure>

CSS for the image with caption:

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

figcaption {
	font-size: 0.7em;
	line-height: 1.2;
	text-indent: 0;
}

[roger64]

Hi

Thank you for sharing.

In the second example, how or where do I insert the caption?

[momoha]

Originally Posted by roger64

Hi

Thank you for sharing.

In the second example, how or where do I insert the caption?

I edited my post with the correct semantic for the insertion with the caption.

[roger64]

Thanks.

I tried your caption code to W3schools site and it does display fine.
I'll try it on next book.

[RbnJrg]

Hi Momoha;

Sometime ago I wrote a couple of posts to deal with that issue; it works even with epub2. Maybe also they can help you a bit, especially with epub2:

https://www.mobileread.com/forums/sh...04&postcount=7

https://www.mobileread.com/forums/sh...9&postcount=11

[momoha]

Originally Posted by RbnJrg

Hi Momoha;

Sometime ago I wrote a couple of posts to deal with that issue; it works even with epub2. Maybe also they can help you a bit, especially with epub2:

https://www.mobileread.com/forums/sh...04&postcount=7

https://www.mobileread.com/forums/sh...9&postcount=11

I think that the code that I suggested is much more convenient as no calculation has to be made, and no size has to be written in the ePub. If you have to process a book with hundred of images, this is a big thing, as my code can be implemented using regex, versus yours where you have to enter the pixel size every time. And, the proper semantic can be used, with figcaption. For me it works perfectly on all my devices, but I would really appreciate if you can test my code on your side too!

BUT, as I wrote in my edit, it seems that many resellers and even Apple highly discourage the use of an image in a <svg> tag, and some even change the code automatically and hence mess it up. Personally, I’ve been using that method since a few years and we didn’t get any problems with our resellers, but I guess it’s a risky thing to go with that code.

[RbnJrg]

Originally Posted by momoha

I think that the code that I suggested is much more convenient as no calculation has to be made, and no size has to be written in the ePub.

Your code doesn't work well with css2 and epub2 You need to employ css3 and there is not many ereaders that support that protocol right now. The issue is because you are using "vh" (instead of "%") and that measure unit is not well supported by ADE under epub2. Try your code in ADE with an epub2 and see what happens. Even the <figcaption> tag is not supported (under epub2). Indeed, with my code you need to do some calcs and write a bit more, but works, even with epub2

And, regrettably, the handle of svg images under ADE with epub3 is buggy. I don't know why they didn't fix that thing because is an older issue. Moreover, epub3 under ADE is based on the Readium engine (while epub2 is based on RMSDK), but Readium FIXED that problem. I can't understand the Adobe behaviour. I had to work a lot to find a partial workaround to manage svg under epub3 with ADE.

[momoha]

Originally Posted by RbnJrg

Your code doesn't work well with css2 and epub2 You need to employ css3 and there is not many ereaders that support that protocol right now. The issue is because you are using "vh" (instead of "%") and that measure unit is not well supported by ADE under epub2. Try your code in ADE with an epub2 and see what happens. Even the <figcaption> tag is not supported (under epub2). Indeed, with my code you need to do some calcs and write a bit more, but works, even with epub2

I tested with ePub 2 and it is displayed properly in ADE, but not in Sigil. Actually I made the code with both vh and width="100%" height="98%" in the <svg> to work as fallback, and it seems to be working, as the code is displayed properly in Kobo without the kepub extension, where the vh values aren’t supported.

Have you tested on your side with bad results? If you could please provide me with more information about your tests results I could check if a workaround is possible. I must say that after learning that this code is discouraged by Apple, I am much less keen into putting more work into that! Actually the object-fit property would solve all the problems but, of course, it isn’t supported by the archaic app/devices of this world Again, hitting a wall, with no global solution for all devices.

[RbnJrg]

Originally Posted by momoha

I tested with ePub 2 and it is displayed properly in ADE, but not in Sigil.

In ADE (version 4.5x), with epub2, <figure> and <figcaption> are not supported, that is, text is showed, but not styled (i.e. text is not centered) and the image is not displayed (I attach the respective epub).

And in Sigil, image is displayed but is not resized. As you know, when we use a svg wrapper with the property "preserveAspectRatio="xMidYMid meet"", the image is always resized to showed it according the size of the windows. Well, that is not happenig in Sigil. The same is in Calibre and Azardi.

[momoha]

Aaah you are right! I didn’t test the code with the caption.

Actually I came out with this new code especially for ePub 3, because my previous codes were getting messed up in ADE with the switch from ePub 2 to ePub 3. I should have specified it in my post... Oops

Here’s the explanation I found:
I found out a problem in ADE with the code for portrait image styling when using ePub3 instead of ePub2. From what I understood, softwares either use vh or %. ADE with ePub2 uses % but vh with ePub3, but it doesn’t support @supports....! So this results in images not being displayed correctly in ADE when using ePub3. The solution is to use vh straight away, without apply it through @supports, but then it won’t be displayed correctly in the softwares not supporting vh.


This is the code I was previously using for images with captions:

<div style="page-break-inside: avoid;"><p class="portrait-70"><img class="portrait" alt="" src="../Images/portrait.jpg"/></p>

<p class="caption">Insert caption here</p></div>

img.portrait {
	height: 100%;
}

p.portrait-70 {
	padding: 0;
	margin: 0;
	text-align: center;
	height: 70%;
}

@supports (height: 100vh) {
  img.portrait {
    height: 100vh;
  }
  p.portrait-70 {
    height: 70vh;
  }
}

This is the code I was using for full page images (that always annoyed me as I often have to process hundreds of these images, so I’m very happy with the new one if it works fine in ePub 3!!)

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

[RbnJrg]

Originally Posted by momoha

...This is the code I was using for full page images (that always annoyed me as I often have to process hundreds of these images, so I’m very happy with the new one if it works fine in ePub 3!!)

Momoha, as I told you before, ADE is buggy regarding svg images at full page under epub3. Your code is ok, is perfect, but ADE is not So you need to use a workaround for full page images with epub3 under ADE. Some time ago I posted a solution(?) that mimics the svg wrapper and is well displayed in ADE. Maybe the following posts can give you some useful info:

https://www.mobileread.com/forums/sh...54&postcount=3

https://www.mobileread.com/forums/sh...2&postcount=12

https://www.mobileread.com/forums/sh...3&postcount=29

[momoha]

Originally Posted by RbnJrg

Momoha, as I told you before, ADE is buggy regarding svg images at full page under epub3. Your code is ok, is perfect, but ADE is not So you need to use a workaround for full page images with epub3 under ADE. Some time ago I posted a solution(?) that mimics the svg wrapper and is well displayed in ADE. Maybe the following posts can give you some useful info:

https://www.mobileread.com/forums/sh...54&postcount=3

https://www.mobileread.com/forums/sh...2&postcount=12

https://www.mobileread.com/forums/sh...3&postcount=29

But the code in my original post using vh seems to be working perfectly under ePub3, well according to my tests at least! I’m not having any problems actually, everything is fine, I was just sharing the code thinking it might help other people who also want to switch to ePub3. And the more people test it, the better it is! I just forgot to specify it was for ePub3...

[RbnJrg]

Originally Posted by momoha

But the code in my original post using vh seems to be working perfectly under ePub3, well according to my tests at least! I’m not having any problems actually, everything is fine, I was just sharing the code thinking it might help other people who also want to switch to ePub3. And the more people test it, the better it is! I just forgot to specify it was for ePub3...

I built an epub3 with your three methods:

a) The first one, works in ADE but not in Sigil.
b) The second one, it doesn't work in ADE nor Sigil.
c) The third, WORKS!! In both, Sigil and ADE.

So, you found a solution for images inside svg wrappers under ADE/epub3. The code to employ is:

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

and

.portrait {
    height: 100vh;
}

Of course, the ViewBox and the width and height inside the <image> tag will change according to the particular image, but the important is that the code WORKS!

I attach the tested epub in case of you want to check things.

By the way, "page-break-inside: avoid" or "page-break-after: avoid" with ADE/epub3 DOESN'T WORK. It works with ADE/epub2 but not in epub3. I have been seeking a solution for that for much time (without success). So, if you find a workaround for those properties under epub3, please, post it.

[momoha]

Originally Posted by RbnJrg

I built an epub3 with your three methods:

a) The first one, works in ADE but not in Sigil.
b) The second one, it doesn't work in ADE nor Sigil.
c) The third, WORKS!! In both, Sigil and ADE.

a) ok so I figured that this one works properly only if a reset CSS is there (I use the Blitz framework in all my ePubs, that’s what )
b) yep, confirms my thought that it’s an ePub2 code
c) this is WEIRD, in your ePub it works, but in all of my ePub3 it is NOT working at all, and I got no idea why it reacts differently in mine and yours!!!! I joined my file in case you are curious to check it out. But as option a) is working with the Blitz framework, I’m still OK on my side with that.

[momoha]

Hey, a) seems to also be working with ePub2! It’s really just that the reset is compulsory. I attached a working ePub2 on this post.

Ok time for bed for me! I’m very curious about why our ePub3 are behaving differently with the same code... I’ll investigate that further tomorrow (or maybe you’ll find an answer before me? ). I have been working in the ePub field for so many years, yet I’ve never been active on this forum, out of... laziness I guess, but now I realise it’s good to exchange with others. I’ll try to be more active, let’s see if I hold up to it or if the laziness comes back