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

Echeban · 09-23-2015, 12:02 PM

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?

Doitsu · 09-24-2015, 11:47 AM

Quote:

Originally Posted by Echeban

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.

Notjohn · 09-26-2015, 06:15 AM

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

RbnJrg · 09-26-2015, 09:56 AM

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

Echeban · 09-26-2015, 01:34 PM

Quote:

Originally Posted by RbnJrg

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

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

Thanks!

RbnJrg · 09-26-2015, 04:51 PM

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:

  <p>where <span style="font-family: Symbol; font-size: 1.2em">d</span> is the ineffective length.</p>

Jellby · 09-27-2015, 03:22 AM

Quote:

Originally Posted by RbnJrg

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

Code:

  <p>where <span style="font-family: Symbol; font-size: 1.2em">d</span> is the ineffective length.</p>

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

09-23-2015, 12:02 PM	#1
Echeban Junior Member Posts: 8 Karma: 10 Join Date: Sep 2015 Location: West Virginia Device: Kindle	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?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
HTML to MOBI	kaushik	Conversion	2	04-13-2012 09:30 PM
Problem with html -> Mobi conversion - html tags visible.	khromov	Calibre	9	08-06-2011 12:25 PM
Convert HTML to MOBI (HTML recognized as ZIP file)	pdubois	Conversion	1	01-25-2011 01:55 PM
mobi -> html	mor0o0o	Calibre	13	12-05-2009 09:02 AM
HTML to mobi How to	AlexBell	Calibre	0	06-30-2009 02:17 AM

09-26-2015, 06:15 AM	#3
Notjohn mostly an observer Posts: 1,519 Karma: 996810 Join Date: Dec 2012 Device: Kindle	I use images 800 pixels wide and include a width="100%" instruction in the html.

09-26-2015, 09:56 AM	#4
RbnJrg Wizard Posts: 1,881 Karma: 8821117 Join Date: Mar 2013 Location: Rosario - Santa Fe - Argentina Device: Kindle 4 NT	Set the "width" of your images in "%" (of the screen) in your .css stylesheet and set the height to "auto".

Advert

Advert