MobileRead Forums - how to use device independent (dp) in HTML to MOBI

MobileRead Forums (https://www.mobileread.com/forums/index.php)

- Kindle Formats (https://www.mobileread.com/forums/forumdisplay.php?f=168)

- - how to use device independent (dp) in HTML to MOBI (https://www.mobileread.com/forums/showthread.php?t=265580)

how to use device independent (dp) in HTML to MOBI

I need help making images look the same across devices.
I am developing an ebook to publish on Fire HD, HDX, HDX 8.9 and the new HD 10.
I create the content in HTML format, which includes includes images that are tagged in px units. I assemble the ePub using Sigil.
I view the ebook using Amazon Fire HD Previewer, that lets me see the book in HD (which I assume means HD7), HDX (which I assume is HDX8), and HDX 8.9. The previewer cannot not simulate HD 10 yet.
The images look big in HD, fine in HDX, and tiny in HDX 8.9.
I changed the HTML to tag the figures in dp units instead of px but nothing changed.
I read that dp units means the dp=px at 160 dpi device but the image should scale for devices with higher dpi. It does not happen in the Previewer.
What am I doing wrong?

Quote:

Originally Posted by Echeban (Post 3175814)

What am I doing wrong?

Hard to tell without seeing the HTML/CSS that you're using. Please post a sample file that illustrates your problem.

I use images 800 pixels wide and include a width="100%" instruction in the html.

Set the "width" of your images in "%" (of the screen) in your .css stylesheet and set the height to "auto".

% works sometimes, sometimes not

Quote:

Originally Posted by RbnJrg (Post 3177457)

Set the "width" of your images in "%" (of the screen) in your .css stylesheet and set the height to "auto".

Note in the code below that img-0004.png is used twice. Once inside the table cell, then inline after the table. Percentage % works inline but not inside the table cell. Why? How can I fix it?

Code:

<tr id="a0000000013">

    <td style="width:40%">&nbsp;</td>

        <td style="vertical-align:middle; text-align:right">

        <img src="images/img-0004.png" alt="$\displaystyle \delta  $" style="vertical-align:0px; width:10px; height:" class="math gen" /></td>

        <td style="vertical-align:middle; text-align:left">

        <img src="images/img-0005.png" alt="$\displaystyle  = a + x_{x_ y} + a + x_{x_ y} + a + x_{x_ y} + a + x_{x_ y}  $" style="vertical-align:-10px; width:411px; height:" class="math gen" /></td>

    <td style="width:40%">&nbsp;</td>

    <td style="width:20%" class="eqnnum"><span>(<span>1.1</span>)</span></td>

</tr>

</table>

<p> where <img src="images/img-0004.png" alt="$\delta $" style="vertical-align:0px; width:0.52%; height:" class="math gen" /> is the ineffective length.

img-0004.png http://barbero.cadec-online.com/pape...e/img-0004.png
http://barbero.cadec-online.com/pape...e/img-0004.png
is 10px wide, 18px tall. I calculated the % as %=100*px/WR, where WR is the device resolution along the with. I try this in my 1920x1080 monitor (landscape) and a fire HD (800 px.) It works when I put the % value inline, but it does not work at all when I put the same value (0.52%) in place of the 10px for the same figure inside the table cell. ???

img-0004.png http://barbero.cadec-online.com/pape...e/img-0005.png
http://barbero.cadec-online.com/pape...e/img-0005.png

Thanks!

Well, now I understand better what you want. Since I don't have your classes "mat gen" and "eqnnum" your results could be different from mine but try this code:

Code:

<body>

  <table>

    <tr id="a0000000013">

      <td style="width:40%">&nbsp;</td>



      <td style="vertical-align:middle; text-align:right"><img alt="$\displaystyle \delta $" class="math gen" src="../Images/img-0004.png" style="vertical-align: middle; width: auto; height: 1.2em" /></td>



      <td style="vertical-align:middle; text-align:left"><img alt="$\displaystyle = a + x_{x_ y} + a + x_{x_ y} + a + x_{x_ y} + a + x_{x_ y} $" class="math gen" src="../Images/img-0005.png" style="vertical-align: middle; width: auto; height: 1.2em" /></td>



      <td style="width:40%">&nbsp;</td>



      <td class="eqnnum" style="width:20%"><span>(<span>1.1</span>)</span></td>

    </tr>

  </table>



  <p>where <img alt="$\delta $" class="math gen" src="../Images/img-0004.png" style="width:auto; height: 1em" /> is the ineffective length.</p>

</body>

As you can see, I'm using a "height: 1.2em" and a "widht: auto" for the images in cells and a "height: 1em" and a "width: auto" for the inline image. Without your classes, the .mobi looks fine for all models of Kindle Fire (at least, in Kindle Previewer). I attach the respective epub and mobi files so you can check the results.

Regards

EDIT: By the way, you don't need to employ an inline image for the delta symbol. Instead you could use:

Code:

where d is the ineffective length.

Quote:

Originally Posted by RbnJrg (Post 3177657)

EDIT: By the way, you don't need to employ an inline image for the delta symbol. Instead you could use:

Code:

where d is the ineffective length.

Note that then the delta will be found as "d" when searching, and it will look different from the image.