PRS-350 CSS & Epub & PRS 350: Picture size?

[Analogus]

Having following problem:

When converting to EPUB, picture size very often don't suit to screen size of my PRS350. Pictures, even those smaller 600x800 are only partly visible on screen. The reader scales them very lage.

Epubs are converted with CALIBRE from HTML. HTML is created with Adobe PDF converter.

I tried to fix that with CSS on the reader (possible with PRS+) using something like that:

img
{
max-hight: 780px !important
max-width: 590px !important
}

That does "something": pictures are sometimes 780*590 large and partly distorted, sometimes unaltered (like without CSS intervention) and out of range (only partly visible on screen).

All I want are pictures visible totally and without distortion. With PRS+ in combination with CSS on my reader.

Any suggestions?

Thank You

A.

[charleski]

Try:

.img {
height: 100%;
max-width: 100%
}

Alternatively you can use SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 [original width] [original height]" width="100%">
<image height="[original height]" width="[original width]" xlink:href="[imagefile]"></image>
</svg>

[Analogus]

Thank you - will try that!

Question: "100%": does that statement refer to the px of the picture or the px of the reader?
If it refers on the px of the picture - what does that do with pictures >600x800px?

A.

It might be that your images are not in a 3/4 ratio in their original formats. (When you reduce 600px X 800px too the lowest whole number it equals an aspect ratio of 3 to 4.) For example, if you have an image that is 600px X 700px and you tell the reader to change it to 590px X 780px or to 100% X 100%, the result will be that the image is distorted along the long axis. I would try to maintain the original proportions (aspect ratio) of the images to prevent distortion.

Another problem occurs if an image is considerably smaller than the 600px X 800px screen and then enlarged to fit it. In this case you can get a lot of pixelization--fuzziness. For example, if you enlarge a 300px X 400px image to 600px X 800px, it might look fuzzy, especially if the image contains lines or text. Quite often publishers use the smallest sized images they can to keep the ePub file size from getting too large. If those images are too small, there isn't much you can do to make them display well at fullscreen size.

Originally Posted by Analogus

Thank you - will try that!

Question: "100%": does that statement refer to the px of the picture or the px of the reader?
If it refers on the px of the picture - what does that do with pictures >600x800px?

A.

When you set height="100%" or width="100%" in an IMG tag, it means you want the image to take up 100% of the height and 100% of the width of the display area, in this case the PRS-350's screen.

BTW, there is no such thing as "px of the picture" or the "px of the reader." Images and screens have height and width sizes. Image height and width sizes can be set two different ways--you can either set the number of pixels using px, or the percentage of display area by using %.

[Analogus]

Thanks for comments!

I made some further investigations:

Problem seems to be that the SONY Reader ignores some CSS comments in the EPUB file! It doesn't scale down images.

If a picture (JPG) in the EPUB is in its original size 1305px &
1331px CALIBRE overrides it in CSS with:
height: 520.627px;
width: 531px;

So far so good. But on the reader the picture is displayed in its original size (or at least try to do that) --> picture is too large --> picture is just partly visible.

So scaling on the PRS350 doesn't work properly.

The solution could be to scale down the pictures physically. With sometimes tons of pictures in a large book that's too much work.

A.

That might be a calibre conversion error. Can you show the CSS and/or HTML calibre creates? I never seem to have problems with images on my 350, so I think the 350 scales properly.

[Analogus]

CSS attached. Your suspicion could be right. When I delete the css from the EPUB pictures show the right way.

So maybe there's to find a quick prozedure to remove the image scaling comments from the css file. Any suggestion? Removing by hand should be the last option because I've tons of books to convert and calibre always made this kind of css.

stylesheet.txt

I assume this is one of the CSS styles calibre was using with an image:

.calibre10 {
    height: 1099px;
    width: 1332px
    }

Unfortunately this is a class style and without the corresponding HTML where the class is used I cannot tell what calibre is trying to do.

One thing you might want to check out is the freeware called Sigil. Just google it. Sigil lets you directly edit an ePub without adding a bunch of CSS gibberish to it like calibre does.

[jackie_w]

As far as I'm aware, using Calibre to create your EPUB should automatically sort out any necessary image scaling so nothing runs off the screen. You shouldn't need to edit anything manually.

If the images are inside the book (i.e. not the cover) make sure that Convert - PageSetup - Output file is set to one of the Sony options. I use 'Sony Reader' for both my 6" PRS650 and 5" PocketBook 360. I think it uses something like 590x775 as the absolute max size, but it will reduce that accordingly, depending on the PageSetup margins you've set. It's always worked for me.

If it's the cover you're having problems with check out the cover options on the Convert - EPUB Output page.

The above options are per-book. If you want to set them as standard defaults for all books you can choose the same options in Preferences - Common Options - PageSetup and Preferences - Output Options - EPUB Output

[Analogus]

Maybe that's the reason for the picture problems with CALIBRE and the ereader:

In the source HTML files every picture has a scaling like this:

<img src="picture1.jpg" alt="" style=" width:287.76pt; height:291.12pt;"/>

Calibre doesn't remove this scaling (tried a couple of options on ... EPUB Output).

Cover never made problems. Reason I guess is that the cover is added later from calibre from meta data without the scaling statement.

So there is to find a quick prozedure to remove ALL image scaling statements in CSS without doing it by hand (which works fine).

ALL images in CSS have a statement like this above mentioned:

.calibre10 {
height: 1099px;
width: 1332px
}

Simple search and replace of course doesn't work...

A.

I see a problem with using pt (points) rather than px (pixels) in HTML. Points are common size values in the print industry and are supposed to translate into 72 points per 1 inch. Pixels became popular in HTML, but the problem with pixels is that virtually every device and/or monitor uses a different number of pixels per inch, so you never know what X-number of pixels will look like when displayed on different devices. Percentage (%) or em are relative-based values and are more usable for multiple devices and HTML in general. With percentage you set the percent of the screen on which to display some object. With em you set everything in relation to 1em, so 0.5em equals half of 1em and 2em equals twice the size of 1em, etc. That is usually more appropriate for text setting than images though. Enough of that, now on to the CSS and HTML...

<img src="picture1.jpg" alt="" style=" width:287.76pt; height:291.12pt;"/>

The style=" width:287.76pt; height:291.12pt;" statement is incorrect and I think useless and therefore is probably ignored.

I see no CSS class call in the img tag, so I'm guessing it is applied to the tag that includes the img tag (surrounds it in other words). If so, then class calibre10 should cause the image sizes to be height=1099px and width=1332px. I would try changing class calibre10 to something like:

.calibre10 {
height: 550px;
width: 666px
}

This should display the whole image across most of the screen. I basically divided each value by 2.

If you wanted to set the image size by HTML alone, you could write it as:

<img src="picture1.jpg" width="550" height="666" />

But this will take a lot more editing.

In summation, it looks like the HTML code in img tags as far as height and width is being ignored because it is syntactically incorrect, so it is probably easiest to just edit the CSS to use height and width that are nearer to the screen size.

[jackie_w]

...or remove the style width and height completely from the html:

<img src="picture1.jpg" />

and let Calibre figure out the size itself from the actual .jpg

I think, strictly speaking, <img> tags are supposed to be within <p> or <div> tags and have an alt attribute like this:

<p><img src="picture1.jpg" alt="pic" /></p>