Revolutionary code? Need feedback

[RbnJrg]

Originally Posted by momoha

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.

And where is the class ".portrait" in your .css file? For that reason your epub3 is not working. You need to add in your .css stylesheet the following:

.portrait {
    height: 100vh;
}

This is the key to solve the ADE bug with SVG images. Congratulations; you found it, but you are not using it

[RbnJrg]

Originally Posted by 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.

Well, well, well. All this time you were using a css template (blitz_C1C4.css) with very important definitions that were affecting the code you wrote. When that file is not included (or not linked to the .xhtml file) then the things doesn't work. And right now, with your epub, I realize about that file. What happens if you don't include blitz_C1C4.css? The code doesn't work with epub2. So, I had to do a bit of research to find all the important code included in blitz_C1C4.css that affect the svg wrapper. I attach two new epubs, one epub2 and one epub3 with the SAME CODE. And both work fine under ADE and Sigil. It's really newfangled this way of including images inside a svg wrapper found by Momoha. If a moderator is reading this thread, I think s/he should include all this info in the Wiki of the site. Only are used percentages and for all kind of images, no matter the size of them. So, for any .jpg, .png, .gif, whatever format, the new code would be:

1. In the .xhtml file:

  <figure>
    <svg style="height: 90vh; width: 100vh" xmlns="http://www.w3.org/2000/svg" height="90%" 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</figcaption>
  </figure>

and in the .css file:

body {
   margin: 0;
   padding: 0;
}

svg {
  width: auto;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0; /*important*/
  text-indent: 0;
  text-align: center;
  display: block; /*very very important*/
  line-height: 0px; /*some way important*/
}

figcaption {
  font-size: 16px;
  line-height: 20px;
  text-indent: 0;
  display: block; /*very very important*/
}

It's incredible but it's not neccesary any size, just percentages. It works with ADE epub2/epub3 and the ADE bug with epub3 and svg wrappers is overcome.

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

Yes, that is solved You can find the answer in my previous post.

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

Here there are many experts in epubs. And in the .mobi/.kf8/.kfz format. Regarding these last formats, maybe we have the major expert in that field, Hitch. You could learn a lot of things from her.

Regards
Rubén

[momoha]

Originally Posted by RbnJrg

And where is the class ".portrait" in your .css file? For that reason your epub3 is not working. You need to add in your .css stylesheet the following:

.portrait {
    height: 100vh;
}

This is the key to solve the ADE bug with SVG images. Congratulations; you found it, but you are not using it

Aaah you found it! I was actually using @supports to apply the 100vh on that div, which ADE doesn’t support on ePub3, hence the problem. Great, my mind is at peace :-)


And nice work on finding the Blitz code affecting my code! I was thinking to do it today but you saved me from some extra work.

I have to say again that Jiminy Panoz did say that using <img> inside a <svg> tag can be deadly as some resellers automatically reformat the code. And even Apple discourage that uses... So I guess it’s a "use at your own risk" kind of code.

[roger64]

Originally Posted by RbnJrg

.../...
Yes, that is solved

Hi Ruben

Thanks to both of you for working so hard for cracking this old -but strong- nut. I tried both test ePubs. The ePub3 and 2 display nicely with Calibre and Sigil as you know. But ePubcheck complains about the ePub2 version and flags some errors or warnings. Prince, which is usually quite good for displaying ePubs, seems to ignore this code.

As this is an experimental code (correct but not widely used), could it be useful to add a fall back alternative display?

[RbnJrg]

Originally Posted by momoha

I have to say again that Jiminy Panoz did say that using <img> inside a <svg> tag can be deadly as some resellers automatically reformat the code. And even Apple discourage that uses... So I guess it’s a "use at your own risk" kind of code.

It's perfectly secure to employ the tag <image> (not <img>) inside a svg wrapper. What is not secure is to employ the "vh" measure unit. I tested the epubs in my previous post and they works fine under Sigil, Calibre, ADE, Readium and Azardi. The only drawback is that the caption not always remains with the picture. I had to force a bit the things to get that. As you can see, I used px as measure unit in the caption. Of that way the text doesn't resize and always is displayed together with the image.

[RbnJrg]

Originally Posted by roger64

Hi Ruben

Thanks to both of you for working so hard for cracking this old -but strong- nut. I tried both test ePubs. The ePub3 and 2 display nicely with Calibre and Sigil as you know. But ePubcheck complains about the ePub2 version and flags some errors or warnings. Prince, which is usually quite good for displaying ePubs, seems to ignore this code.

As this is an experimental code (correct but not widely used), could it be useful to add a fall back alternative display?

Hi Roger;

Indeed, under epub2 there are some code not supported by the protocol. The tags <figure>, <figcaption> and the measure unit "vh" are not from epub2. So, under that protocol some ereaders can have issues. But in ADE things are displayed well. The main problem under epub2 is the caption; I'll do some experiments to see if I can find something to avoid any trouble (but the most important is the code to show an image; no size at all, just percentage so no matter the size of the picture, the code will be the same).

[momoha]

Originally Posted by RbnJrg

It's perfectly secure to employ the tag <image> (not <img>) inside a svg wrapper.

For anyone intending to distribute and sell their ePubs, it doesn’t seem safe:

[...] some distributors may alter SVG elements containing only an image as it’s been discouraged by some resellers. Actually I can even point to this recommendation in Apple Books’ guidelines for instance since it’s online:

To ensure proper viewing of images in content, use the HTML img tag instead of wrapping images in svg:image. (Interior Image Requirements)

[momoha]

Originally Posted by roger64

Hi Ruben

Thanks to both of you for working so hard for cracking this old -but strong- nut. I tried both test ePubs. The ePub3 and 2 display nicely with Calibre and Sigil as you know. But ePubcheck complains about the ePub2 version and flags some errors or warnings. Prince, which is usually quite good for displaying ePubs, seems to ignore this code.

As this is an experimental code (correct but not widely used), could it be useful to add a fall back alternative display?

Can you tell me more about Prince? I have never heard of it nor am I finding any information online.

[roger64]

Originally Posted by momoha

Can you tell me more about Prince? I have never heard of it nor am I finding any information online.

https://www.mobileread.com/forums/sh...d.php?t=230027

https://www.princexml.com/

Free for personal use. Usually excellent for converting ePub2 or 3 to PDF using Calibre (see above) or Sigil plugin.

Edit: using Ruben's code, Prince 12.4 displays only the caption. (in good place)

[jhowell]

I tried the EPUBs in post #17 in Amazon's Kindle Previewer to see how they would look. Both performed the same.

The image was displayed (large within the page margins) on one page and the caption by itself at the bottom of the next page. Conversion for Enhanced Typesetting failed due to code that does not meet the Amazon Kindle Publishing Guidelines, meaning that a book published with that code would be missing many of the newer Kindle reading features.

[RbnJrg]

Originally Posted by jhowell

I tried the EPUBs in post #17 in Amazon's Kindle Previewer to see how they would look. Both performed the same.

The image was displayed (large within the page margins) on one page and the caption by itself at the bottom of the next page. Conversion for Enhanced Typesetting failed due to code that does not meet the Amazon Kindle Publishing Guidelines, meaning that a book published with that code would be missing many of the newer Kindle reading features.

First at all, Amazon doesn't support css3 and html5. So some tags (figure, figcaption) are not recognized. For that way the caption is not well displayed (if you read one of my previous posts I say that). But the valuable here is the way used to display the image inside a svg wrapper. So far it was necessary to include in the ViewBox the width and height of the image in px; the same inside the tag <image>. Now are used only percentages and the image.is showed fine. The issue with the caption is a minor one for me; I can handle that to get the caption always together with the image. And right know the image is well displayed in ADE, Readium, Azardi, Google Books, Kobo, Kindle, Sigil and Calibre. What you say about kfx is already known; if in your ebook you include any svg image or wrapper then you can't have enhanced typesetting. But Amazon does support svg images and svg wrappers.

[RbnJrg]

Originally Posted by momoha

For anyone intending to distribute and sell their ePubs, it doesn’t seem safe:

What resellers Momoha? Any name? Because svg and svg wrappers have been being used for years, is not something new. The only issue with your code is the caption that not always will be together with the picture. I can handle that. But the image is well displayed and that is the important.

[jhowell]

Originally Posted by RbnJrg

What you say about kfx is already known; if in your ebook you include any svg image or wrapper then you can't have enhanced typesetting. But Amazon does support svg images and svg wrappers.

That is not completely true. It is true that some SVG features are supported in KF8, but not KFX. But KFX (Enhanced Typesetting) does support a subset of SVG, including the commonly used SVG image wrapper code.

[RbnJrg]

Originally Posted by jhowell

But KFX (Enhanced Typesetting) does support a subset of SVG, including the commonly used SVG image wrapper code.

Do you thing so? Well, please, tell me why the epub I attach where I employ a "standart" svg wrapper with a image and simple text inside is not supported by KFX? The text inside the svg wrapper is a way to have a perfect caption, so no matter the font-size choosen by the reader, the caption will remain with the picture. A very very common svg wrapper. If KFX can't support this (svg text), then practically can't support anything about svg.

[jhowell]

Originally Posted by RbnJrg

Do you thing so? Well, please, tell me why the epub I attach where I employ a "standart" svg wrapper with a image and simple text inside is not supported by KFX? The text inside the svg wrapper is a way to have a perfect caption, so no matter the font-size choosen by the reader, the caption will remain with the picture. A very very common svg wrapper. If KFX can't support this (svg text), then practically can't support anything about svg.

KFX does support a simple image wrapper of the sort described in this post. I have seen code like that used in several professionally published ebooks. Your example book will convert to KFX if you remove the caption from the SVG.

It is true, KFX does not support SVG text. I don't know of a surefire way to have captions that will display with the user's selected font and always be displayed on the same page as an image.

My point is that there is no single best option. There is a tradeoff that a Kindle ebook publisher will need to make between using the full capabilities of SVG and having the features of KFX available to the reader.