Size of images in epub/kepub

[Patricius]

I've happened to read some books with some inline images (formulas, musical notations, special chars like āēīōū... etc, in jpg or bmp), and their sizes appear to be 'correct' on the calibre viewer.

However, when opened with the nickel viewer of my H2O, the images become tiny and unreadable in some cases. With the special chars I can regex it into corresponding ones, but not with formulas and musical notations. Is this a known problem? Is there a way to make it stretched like in calibre viewer? I'd be grateful if anyone comes up with some suggestions. Thanks!

p.s. I've tried the original epub and converted kepub, the image sizes look the same despite the super large font size with epub.

Here are some examples: the 'Salūte' becomes 'Salūte' ( in which the 'ū' is a bitmap), and the same book opened in calibre & nickel:

[GeoffR]

It is probably because the publisher hasn't specified the size correctly. The size of an image willl be the actual size of the bitmap unless anoher size is specified, although different readers can use other defaults. The publisher should have specified a size in units of em (e.g. 1em) if the bitmap is to be used to replace text characters.

(But really the publisher should not do this at all, as a bitmap is always going to look bad when set next to a scalable glyph. They should really use an embedded font or SVG image instead.)

Edit: If you don't mind editing the book's stylesheet it should be fairly easy to fix, you can probably just change the image size to height:1em;width:auto; for the images that replace text, and height:auto;width:100%; for images that should be scaled to the screen width. But for the bitmaps that replace text it is better to delete the bitmap image altogether and replace it with the actual glyph it is supposed to represent, and then use a font that contains that glyph.

[frostschutz]

Are you converting books with Calibre? If so you should set target device to 'tablet' to prevent it from messing with the images.

That sheet music should probably have a width 100% setting or something like it. You'll have to look at the HTML/CSS as to why they're not displayed in full size.

[DNSB]

Originally Posted by Patricius

I've happened to read some books with some inline images (formulas, musical notations, special chars like āēīōū... etc, in jpg or bmp), and their sizes appear to be 'correct' on the calibre viewer.

However, when opened with the nickel viewer of my H2O, the images become tiny and unreadable in some cases. With the special chars I can regex it into corresponding ones, but not with formulas and musical notations. Is this a known problem? Is there a way to make it stretched like in calibre viewer? I'd be grateful if anyone comes up with some suggestions. Thanks!

p.s. I've tried the original epub and converted kepub, the image sizes look the same despite the super large font size with epub.

Very often, publishers specify the size of images in terms of pixels ( width: 355px;, height: 255px; ) or don't bother to specify any size which seems to default to the pixel size. A 600x800 image would fill the screen on a Kobo Touch but on the HD/H20 would fill about 60% of the screen width/height leaving a lot of blank space.

Specifying the dimensions in relative terms or using an SVG wrapper get around these issues. Replacing the width and height for example above with width: 59%;, height: auto; would have the image occupying the same amount of screen area on any device regardless of it's screen resolution.

The example used is from one ebook I recently read where all the image sizes were specified in pixels. The example I used was for the chapter title images was orignally:

.chaptitl {
    height: 225px;
    width: 355px
    }

which I changed to:

.chaptitl {
    height: auto;
    width: 59%;
    }

I calculate the percentages based on a 600x800 screen which seems to be the common value used by most publishers so 355/600 is ~59%. This looks a lot better than 355/1080 which used about 32% of the screen width when viewed on my Aura H2O.

As for the glyphs, my personal opinion is using bitmaps for glyphs should only be done when there is no other way to supply the glyph. Even embedding a subsetted font looks better and takes little extra effort. My personal preference is using either Charis SIL or Deja Vu which have decent glyph selections and look good on an eInk screen so I don't need to concern myself with whether macrons, breves, carons, etc. will or will not display.

[Patricius]

Thanks everyone! I just replaced *bmp with corresponding glyphs and stretched the images using css style [ width: 100%; height: auto. ].

This can be done easily unless the epub is ill-formed. However, for the epubs converted by calibre, every images seem to have their own classes .calibre_%d, which makes it harder to adjust image size by group.
Is There an option which stops calibre from doing this?

[GeoffR]

Originally Posted by Patricius

However, for the epubs converted by calibre, every images seem to have their own classes .calibre_%d, which makes it harder to adjust image size by group.
Is There an option which stops calibre from doing this?

I think that is part of the CSS 'flattening' that Calibre does whenever it converts/creates an epub, it can cause other problems too such as preventing line spacing and other adjustment sliders working. Unfortunately there is no option to turn it off.

If you are going to load the books as kepubs then you might be able to make use of the !important modifier: The KEPUB and EPUB readers treat !important differently, in kepubs something like img {width:100% !important;} will override the width property of all subclasses of img, whereas in epubs it seems only to override img itself.

[codychan]

Is this can be automatically done in patch or Calibre setting/plugin, I mean, make the image 100% width or height (depending on the image) of my kobo device?

I found that a lot of my epub files contain images, and the width of the images is usually only half the width of my Kobo device (kobo aura one and kobo forma), I know I can touble-tap the image to zoom in, but it is still quite annoying.