Image display problems

[roger64]

Hi

First a big thanks for Koreader which is my main reading tool.

Image display in percentage

For small images (say a publisher logo) that have to be inserted in the text, I did not succeed to make Koreader display correctly the values of attributes like the following one put into the image tag,

style="width:50%";

So the image display seems ugly and does not change, whatever the value of width I choose. I may probably be missing something but what? Shall we use only pixel values?

What would be the best way to use.

Plain svg images

Is there a problem to display plain svg images (svg wrappers are OK)?

For both, could somebody point to an example EPUB with small images that display fine in Koreader?

[Ken Maltby]

I have a few that use "Drop Caps". This article includes some test .epub and sample CSS. This is done with text manipulation. (The "EPUB-DropCap-Test-FINAL.epub" works fine in Koreader - with Embedded Style - on, of course)

Some use image files, in the same way.
Often as Floating Elements

Luck;
Ken

[roger64]

Originally Posted by Ken Maltby

I have a few that use "Drop Caps". This article includes some test .epub and sample CSS. This is done with text manipulation. (The "EPUB-DropCap-Test-FINAL.epub" works fine in Koreader - with Embedded Style - on, of course)

Some use image files, in the same way.
Often as Floating Elements

Luck;
Ken

The A only displayed on my Koreader (Kindle) as a raised cap. so, the floating: property does not seem to be working either.

I have been shown recently a fine illustrated book in Spanish language where these two problems appears:

- the cover is a svg image with some very short text fields on top and bottom of it. The image is displayed full screen one page 2 and the text fields are on page 1 and page 3.
- within the text, you can find some small floating images(expected to take about 1/4 of the screen) which are displayed on Koreader as full screen ones.

Koreader preferably displays images full screen or, if they are really small, it inflates them even beyond their full size (for example a 110 px wide image can take 40% of the screen on a six inch reader).
Worrying

[Ken Maltby]

Originally Posted by roger64

The A only displayed on my Koreader (Kindle) as a raised cap. so, the floating: property does not seem to be working either.

I have been shown recently a fine illustrated book in Spanish language where these two problems appears:

- the cover is a svg image with some very short text fields on top and bottom of it. The image is displayed full screen one page 2 and the text fields are on page 1 and page 3.
- within the text, you can find some small floating images(expected to take about 1/4 of the screen) which are displayed on Koreader as full screen ones.

Koreader preferably displays images full screen or, if they are really small, it inflates them even beyond their full size (for example a 110 px wide image can take 40% of the screen on a six inch reader).
I had not been aware of such defects but there seem some reason to make an emergency call.

The test .epub isn't using the "Floating Elements" approach described in the reference linked to in the second paragraph.

The covers are a separate case and they are intended to display Full Screen. There is a "Screensaver" setting in KOReader to "Display proportional cover image in screensaver".

Luck;
Ken

I tried the "illustrated book" and see what you are talking about (although the illustrations look great full screen on my Aura HD). The links didn't seem to be working right either.

[roger64]

@Ken

Thanks for your last comment. So we see the same thing. Since we are at it, in this same book, you can look at a small decoration image named adorno -a small train- which you can find at the end of each chapter. It's intended to be displayed as a very small image.

With Koreader we get it on 60% of the screen, maybe more. This is the illustration of what I said about publisher logo being "inflated" way out of reason.

Of course, I do not expect all these display problems to be addressed at once.

A first step, regarding small images would seem to be able to display then precisely as they are: I mean a 100px wide image should be displayed on 1/6 of my six inch screen. We should get this without any additional mark-up.

A second one would be to be able to read correctly the size of a svg wrapper and display it accordingly.

Later we can speak about plain svg images...

[roger64]

Hi

I had a quick look on Coo!Reader3 both on Windows and Linux. I failed to display anything on Windows but I remarked on Linux (v. 3.0.56.7) a special setting (Page) for Image scaling options regarding inline images or block images. The option choice is between: disabled, integer (0,1,2,3), arbitrary scale (0,1,2,3).

see screenshot

These settings have not been kept for Koreader. Koreader has no image scaling options. I think the current and unique setting Koreader uses for all images is arbitrary scale, maximum size. That's why the svg image is full height on page 2; why each other image is, according to its shape, either fullscreen or only full width or height.*

The missing scaling options would not be important if Koreader took into account the CSS settings for images. Unhappily it does nothing of this kind; either the width (absolute or relative) as I said in the opening post, or the float property are totally ignored. About everything is centered. This can fit some books. Only some of them...

So, with Koreader, as far as the text is concerned, you'll enjoy a lot of custom settings. However, if your book has images, you'll have only one maximum size to fit them all.

* only if it can do it by multiplying its size by 2 or 3. So the small publisher logo will go for example from 100px to 200 or 300px.

[Ken Maltby]

Perhaps the settings in "/.adds/koreader/data/cr3.ini" would address this, or maybe some could be added that do. (I haven't got around to messing with those yet.)

These look related:

crengine.image.scaling.zoomin.block.mode=2
crengine.image.scaling.zoomin.block.scale=2
crengine.image.scaling.zoomin.inline.mode=2
crengine.image.scaling.zoomin.inline.scale=0
crengine.image.scaling.zoomout.block.mode=2
crengine.image.scaling.zoomout.block.scale=2
crengine.image.scaling.zoomout.inline.mode=2
crengine.image.scaling.zoomout.inline.scale=0

Luck;
Ken

[roger64]

@Ken

Thanks. You are right, one probbaly could change something. But it seems to be all or nothing?

I'll make a report to GitHub too.

Edit: At least we have two different settings available (inline and block). I'll try them.

[Ken Maltby]

Perhaps, you could identify what the "mode" numbers equate to, for instance what number = Arbitrary scale. Maybe the "scale" numbers equate to size, like the "maximum size" you mention. (Since they show "0" and "2", it would seem likely it at least has 0, 1, or 2, as settings.)

Luck;
Ken

[roger64]

Hi

To interested Koreader users

I asked for a better image display support for Koreader and gave some examples of what is missing. I opened this subject on GitHub (https://github.com/koreader/koreader/issues/1813)

The developer acknowledges the problem and asks if there is some interest for improving Koreader for image display. If you feel that Koreader deserves a better image display support, please let him know your support for this proposal.

@Ken

Yes, the scale number is related to size: so, for the inline mode
- 0 means don't process inline
- 1 means normal size (or less?)
- 2 means double
- 3 ?

In the cr3.ini settings, I changed "inline" from zero to one and got a faulty float display. By this I mean the size of the image was not changed (good for scale size 1), the image was on the side of the screen (good for the inline part), but the float itself was not done and the image presented itself like a huge raised cap.

If you try to look at "classical" drop caps (with a float property), Koreader presents them one line above the paragraph... Not so nice indeed

[pkbo]

Originally Posted by Ken Maltby

Perhaps, you could identify what the "mode" numbers equate to, for instance what number = Arbitrary scale.

0 - no scaling, 1 - integer scale, 2 - arbitrary scale

float is not supported.

[roger64]

Hi

After fiddling with some values here and there, knowing that a perfect display will not be obtained, things got worse. I do not manage anymore to get a full page display even for svg cover wrappers...

Could someone write which Koreader settings seem to provide the - generally best - results?

[roger64]

This is the only setting I've found in data, cr3.ini (it had been signalled before)

crengine.image.scaling.zoomin.block.mode=2
crengine.image.scaling.zoomin.block.scale=2
crengine.image.scaling.zoomin.inline.mode=2
crengine.image.scaling.zoomin.inline.scale=2
crengine.image.scaling.zoomout.block.mode=2
crengine.image.scaling.zoomout.block.scale=2
crengine.image.scaling.zoomout.inline.mode=2
crengine.image.scaling.zoomout.inline.scale=2

without any clear understanding of what this "arbitrary scale" provides since some images are displayed full screen, some others take only one third of the screen though they too should be displayed full screen.

[roger64]

Sorry to come back on this - for me - unresolved problem. I do not intend to display finely images, just to obtain a full size image display instead on the small images (about 1.5 inch) I get now.

Any idea somebody about a setting I could try?

[JSWolf]

Originally Posted by roger64

Sorry to come back on this - for me - unresolved problem. I do not intend to display finely images, just to obtain a full size image display instead on the small images (about 1.5 inch) I get now.

Any idea somebody about a setting I could try?

It depends on the resolution of the images and the code used to display the images.