0 Replies Latest reply on Dec 9, 2009 11:08 PM by Vikas Jadhav

    Images should grow or shrink when the user chooses a larger or smaller font size in ADE.

    Vikas Jadhav

      Hi All,

       

      I use percentage values (in "width" attribute within "img" element) for image that should grow or shrink when the user

      chooses a larger or smaller font size. The adjustment affects not only the size of the text but also images but the images

      are getting distorted or blurred when user chooses larger font size in Adobe Digital Editions.

       

      Can anyone, please guide me; how to get non-distorted and non-blur images in epub package?

       

      If I directly use images, without svg format i.e. png or jpg files, then images get overlapped on body-text in two column display in ADE.

       

      OR

       

      if I directly use jpg or png with width attribute varying in percentage value then image shrinks and grows as user chooses smaller and larger font size but the problem of distorted image remains as it is

      <div class="media-group"><img src="images/pa0000016g26001.png or jpg" alt="Image" width="60 or 70%" /></div>

       

       

      Attached is the package (Book.epub) which has test cases.

       

      ========================================================

      Please find below sample coding used in attached epub package;
      In XHTML:
      <div class="media-group"><img src="images/pa0000016g26001.svg" alt="Image" width="100%" /></div>

       

      In SVG:
      <?xml version="1.0" encoding="utf-8"?>
      <!-- Generator: Adobe Illustrator 12.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 51448)  -->
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
      <!ENTITY ns_svg "http://www.w3.org/2000/svg">
      <!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
      ]>
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

      width="386px" height="554px" viewBox="0 0 386 554" enable-background="new 0 0 386 554" xml:space="preserve">
      <image overflow="visible" width="772" height="1108" xlink:href="pa0000016g26001.png"  transform="matrix(0.50 0 0 0.50 0 0)">
      </image>
      </svg>

      ========================================================

       

      Cheers

      Vikas