[dr_Fell]

Hello, I have tried to solve this for few hours and I am stuck.

I am trying to convert my book from amazon (Java: The Complete Reference) to epub so I can read it on my Cybook Odyssey. After conversion it seems that the images are cropped (at least from left/right) by few pixels. Since code examples are in image (jpg) form it makes the book unusable, because important elements, like semicolons, parentheses etc. are often located near the borders.

I tried to limit max width with

div span img
{
 max-width: 90% !important;
}

or

div span img
{
 max-width: 530px;
}

Effect was visible, the image was smaller, but the problem remains (few pixels cropped on the sides). Problem is visible only on my Cybook Odyssey, Calibre Viewer displays those images without problem.

I think that I can eventually use some workaround by processing those images and adding few more pixels on each border - but I don't know how to access them.


Solution:
I downloaded images using book editor, edited them, then put it back to the book. It didn't work well with epub (don't know why - maybe I did something wrong), but it works with original AZW3 file.

I added 5px white border to images using ImageMagick tools (workaround so my reader just cuts those white border and not the actual image). Additionally I adjusted size and sharpened all images, so my reader won't have to change resolution on the fly (for quality and readability). I also set a bit of negative left margins during conversion, so that the images could be a bit wider.
The code is now much more readable than in the original files provided by Amazon .

If this can be helpful for anyone, here are command line examples on how to batch change size and sharpeness:

 magick mogrify -format bmp *.jpeg    //convert every jpeg image to bmp for further loseless processing

magick mogrify -filter Mitchell -resize 550x730^> -format bmp *.bmp  //downscale images that are wider than 550px or higher than 730px, leaving smaller images untouched

magick mogrify -bordercolor white -border 5x3 -unsharp 0x1.1+2+0 -format jpeg *.bmp     //add white border and sharpeness to every bmp image and save back as jpeg

and the margins:

div span img {
 margin-left:-15px;
}