MobileRead Forums - View Single Post

momoha · 01-22-2019, 01:37 AM

The SVG code used is valid, the problem is ADE with ePub3. From what I understand, normally softwares either use height values in percentages (%) or in viewport (vh). If they support viewport, they will also support the function @supports.

But what I’m facing with ADE is that with ePub2 it uses the % value, and in ePub3 it uses the vh value, BUT it doesn’t support @supports. So to make it work you have to use "vh" only, and then all the softwares not supporting "vh" won’t display your stuff correctly.

So I found that this following code will work with ePub3 in ADE (but it won’t work in softwares not supporting viewport):
<div>
<svg style="height: 99vh; width: 99vw;" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="100%" width="100%" xlink:href="../Images/C1.jpg"/></svg>
</div>

While this code works on the softwares not supporting viewport, but won’t work on the others (Like iBooks or ePub3 on ADE):

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

So it’s really terrible. I’m trying to update my company’s procedure so that we use ePub3 only, but ADE messes up both my full page and 80% height image codes. I’m trying really hard to find a workaround but I think I might have to stick with ePub2.

01-22-2019, 01:37 AM	#13
momoha Annabelle Viau Posts: 43 Karma: 16664 Join Date: Jan 2015 Location: Rishikesh, India Device: iPad, Kobo, Windows 10 (ADE, Azardi), Android (Google Books, Bluefire)	The SVG code used is valid, the problem is ADE with ePub3. From what I understand, normally softwares either use height values in percentages (%) or in viewport (vh). If they support viewport, they will also support the function @supports. But what I’m facing with ADE is that with ePub2 it uses the % value, and in ePub3 it uses the vh value, BUT it doesn’t support @supports. So to make it work you have to use "vh" only, and then all the softwares not supporting "vh" won’t display your stuff correctly. So I found that this following code will work with ePub3 in ADE (but it won’t work in softwares not supporting viewport): <div> <svg style="height: 99vh; width: 99vw;" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="100%" width="100%" xlink:href="../Images/C1.jpg"/></svg> </div> While this code works on the softwares not supporting viewport, but won’t work on the others (Like iBooks or ePub3 on ADE): <div> <svg style="height: 99%; width: 99%;" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="100%" width="100%" xlink:href="../Images/C1.jpg"/></svg> </div> So it’s really terrible. I’m trying to update my company’s procedure so that we use ePub3 only, but ADE messes up both my full page and 80% height image codes. I’m trying really hard to find a workaround but I think I might have to stick with ePub2. Last edited by momoha; 01-22-2019 at 01:42 AM.