Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 09-25-2020, 01:30 AM   #1
il_mix
Enthusiast
il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.
 
Posts: 36
Karma: 20178
Join Date: Jun 2013
Device: Kobo Touch
XHTML img shrinked in tables only on ereader

I have this basic XHTML file, with a table that displays images in the first column (images size is roughly 64x64 pix) and some text in the second column.

Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <link href="../Styles/style.css" rel="stylesheet"/>
</head>
<body>
  <table>
    <tbody>
      <tr>
        <td><img src="../Images/A.png"/></td>
        <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sapien tortor, malesuada convallis mi quis, mattis porta eros. Integer sed massa et felis aliquam interdum eget sed massa. Vestibulum luctus, lacus in posuere consectetur, neque orci maximus lectus, tristique aliquam tortor nulla id lacus. Sed tempor auctor felis at vulputate.</p></td>
      </tr>
      <tr>
        <td><img src="../Images/D.png"/></td>
        <td><p>Donec pretium dapibus felis at vestibulum. Morbi posuere mauris ac facilisis sollicitudin. Praesent iaculis mauris molestie ante cursus, sit amet ornare velit viverra. Cras dictum sollicitudin erat, mollis tempus orci hendrerit sit amet.</p></td>
      </tr>
    </tbody>
  </table>
</body>
</html>
Opening the file in a browser, images in the first column are displayed full size. If I shrink the window, or force tablet/smartphone view in the browser, images are still displayed full size.

I added the file to an epub. Opening it with an ebook reader (Calibre default one) I see everything like in the browser (i.e. full size images).

I've uploaded the epub on my erader device (an old Kobo Touch). Here images are shrinked to a very small size.

Why is this happening?

Could it be an ereader problem? Likely. Any HTML/css trick to force full size?

I've tried to add this to the css file

Code:
table img {
  height: 100%! important;
}
Still no luck, the images are shrinked.
il_mix is offline   Reply With Quote
Old 09-26-2020, 09:48 AM   #2
Quoth
the rook, bossing Never.
Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.
 
Quoth's Avatar
 
Posts: 2,312
Karma: 10800000
Join Date: Jun 2017
Location: Ireland
Device: Both Kinds: epub based makes and Kindle
Use width?
Quoth is offline   Reply With Quote
Advert
Old 09-27-2020, 08:13 AM   #3
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 2,171
Karma: 13380000
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2 & Air/Surface Pro/Kindle PW
Quote:
Originally Posted by Quoth View Post
Use width?



Yes...using height isn't particularly reliable. I'd use width.
Turtle91 is offline   Reply With Quote
Old 09-27-2020, 09:30 AM   #4
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,177
Karma: 4062049
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Give to the table a "width", for example by adding in your .css file something like:

Code:
table.mytable {
    width: 100%; /*(or whatever the width you wish)*/
}
After that, give to the first column (cell) also a "width":

Code:
td.first {
     width: 33%; /*(or whatever the width you wish)*/
}
Finally, give to the image a width of 100%:

Code:
td.first img {
      width: 100%;
}
All that should fix your issue with your image. Of course, you must add the class "first" in your first cell of your table.mytable:

Code:
  <table class="mytable">
    <tbody>
      <tr>
        <td><img src="../Images/A.png"/></td>
        <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sapien tortor, malesuada convallis mi quis, mattis porta eros. Integer sed massa et felis aliquam interdum eget sed massa. Vestibulum luctus, lacus in posuere consectetur, neque orci maximus lectus, tristique aliquam tortor nulla id lacus. Sed tempor auctor felis at vulputate.</p></td>
      </tr>
      <tr>
        <td class="first"><img src="../Images/D.png"/></td>
        <td><p>Donec pretium dapibus felis at vestibulum. Morbi posuere mauris ac facilisis sollicitudin. Praesent iaculis mauris molestie ante cursus, sit amet ornare velit viverra. Cras dictum sollicitudin erat, mollis tempus orci hendrerit sit amet.</p></td>
      </tr>
    </tbody>
  </table>
RbnJrg is offline   Reply With Quote
Old 09-28-2020, 10:37 AM   #5
il_mix
Enthusiast
il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.
 
Posts: 36
Karma: 20178
Join Date: Jun 2013
Device: Kobo Touch
Ok, maybe I should have clarified beforehand why I used "height" instead of "width"...
When I set
Code:
width: 100%;
(with or without !important)
I get small images even in browser.
Setting
Code:
height: 100%;
I see original sized images in browser. That's why I opted for height in the EPUB, too.

Anyway, I've tested these options, with various results (none is ok);

Code:
width: 100%;
Images are shrinked. Same adding !important

Code:
height: 100%;
Images have original height, but are shrinked in width. Same adding !important

Code:
height: 100%;
width: 100%;
Images have original height, but are shrinked in width. Same adding !important

Regarding @RbnJrg hint, I prefer a more generic approach. I can have tables, with the same format as mytable, but have just text in the first column. So, I don't want to set a specific width for the first column. I want it to stretch given the image width (if any). This way I can avoid class-ification of the tds that contain images.


NOTE: in my former example I stated that the images are shrinked (in both width and height) when setting "height" attribute in CSS. I've noticed a typo in my CSS
Code:
height: 100%! important;
instead of
Code:
height: 100% !important;
That's probably why I had a different result with respect to this message recap; the CSS was probably ignored due to the error.
il_mix is offline   Reply With Quote
Advert
Old 09-28-2020, 12:44 PM   #6
jhowell
Wizard
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 3,988
Karma: 39888231
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Oasis 2, Fire, iPad Air 2, Nexus 7
What you are doing seems like a wrong approach. Specifying an image width or height in percent says to make it a percentage of the enclosing block, the table cell in this case. The image will end up being sized based on the other content in the table, not based on the image itself.

You should instead do something like set the table cells to each be a certain percentage of the screen width and then have the image take up 100% of the enclosing cell width.

Last edited by jhowell; 09-28-2020 at 12:46 PM.
jhowell is offline   Reply With Quote
Old 09-28-2020, 03:39 PM   #7
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,177
Karma: 4062049
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by jhowell View Post
You should instead do something like set the table cells to each be a certain percentage of the screen width and then have the image take up 100% of the enclosing cell width.
That's correct and was the central point of my aproximation, but it seems that the OP doesn't understand how images are displayed.
RbnJrg is offline   Reply With Quote
Old 09-28-2020, 03:49 PM   #8
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,177
Karma: 4062049
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by il_mix View Post
Regarding @RbnJrg hint, I prefer a more generic approach. I can have tables, with the same format as mytable, but have just text in the first column. So, I don't want to set a specific width for the first column. I want it to stretch given the image width (if any). This way I can avoid class-ification of the tds that contain images.
More generic approach? You won't be able to get the proper with of an image if previously you don't set the width of the image container. Once you have done that (to set the width of the container), then by setting the image widh to 100% the image will be displayed with the width of your wish. You could try to enclose your image between <p> tags (and setting the width of them), neccesary to resolve a bug with some Kindles but your issue is with Kobo so I don't think that thing works. And don't use the properties "width: 100%" and "height: 100%" at the same time, otherwise your images will end distorted. By using height: 100% your image will displayed NOT WITH THE 100% of the image height, but the 100% of the container height. And what is the height of your cells? If you didn't set anything then must be 1em.

And how many tables with the same format as "mytable" you have? Give those tables another class name and your troubles are ended. Regex is your friend to do changes.

Last edited by RbnJrg; 09-28-2020 at 03:56 PM.
RbnJrg is offline   Reply With Quote
Old 09-29-2020, 01:32 AM   #9
il_mix
Enthusiast
il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.il_mix can self-interpret dreams as they happen.
 
Posts: 36
Karma: 20178
Join Date: Jun 2013
Device: Kobo Touch
I admit I'm not very expert in HTML/CSS. I hoped for some "don't rescale" attribute. Looks like there's none.
I'm writing a (python) script that converts several fancy HTML pages in more minimal XHTML for ereaders. Since the tables are kinda random with their content, I preferred a "generic" approach. Looks like I have to add an extra check that class-ify a table if it has images in the first column.
Will experiment with that.

Thanks
il_mix is offline   Reply With Quote
Reply

Tags
css, epub, xhtml

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
4.11.1 right click img in editor to edit img rjwse@aol.com Calibre 1 02-21-2020 09:29 PM
Some files.html & toc.xhtml (also Cover.xhtml) chaot Workshop 23 02-13-2017 12:20 PM
New Kindle Ereader 5.8.2 firmware improve tables experience Julius Caesar Amazon Kindle 19 08-24-2016 05:56 AM
<img longdesc= traskilajussi EPUBReader 3 02-23-2011 08:15 AM
vfat.img pewterbot9 enTourage Archive 11 12-29-2010 06:41 PM


All times are GMT -4. The time now is 03:33 AM.


MobileRead.com is a privately owned, operated and funded community.