View Single Post
Old 05-28-2023, 12:17 PM   #14
Doitsu
Grand Sorcerer
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 5,739
Karma: 24031403
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by KevinH View Post
If anyone has Adobe Digital Editions versions on their machines could they please test the use of "100%" for width and height in an svg cover versus "100vw" for width and "100vh" for height (or 98 or 95 or ...). And report back.
Both ADE 2.0.1.78765 and ADE 4.5.11.187303 for Windows render covers in EPUB2 books with the default SVG cover code fine.
(I used this MR book for the test.)
Cover code:
Spoiler:
Code:
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 563 751" preserveAspectRatio="none">
                <image width="563" height="751" xlink:href="cover.jpeg"/>
            </svg>
        </div>


However, the cover of this epub3 MR book was not correctly rendered in ADE 4.5.11. (It was rendered fine in ADE 2.0.1.)
Cover code:
Spoiler:
Code:
  <div style="text-align: center; padding: 0pt; margin: 0pt;">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" version="1.1" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1080 1430"><image width="1080" xlink:href="../Images/cover.jpg" height="1430"/></svg>
  </div>


After implementing the change recommended by elibrarian, the cover was correctly rendered.
(I used height:100vh; instead of height:98vh;)
Spoiler:
Code:
  <div style="height:100vh; text-align: center; padding: 0pt; margin: 0pt;">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" version="1.1" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1080 1430"><image width="1080" xlink:href="../Images/cover.jpg" height="1430"/></svg>
  </div>
Attached Thumbnails
Click image for larger version

Name:	cover_ade_4_orig.png
Views:	201
Size:	66.8 KB
ID:	201735   Click image for larger version

Name:	cover_ade_4_modfied.png
Views:	193
Size:	152.4 KB
ID:	201736  
Doitsu is offline   Reply With Quote