Aura HD Images ok on PC, too small on reader

[Nick Payne]

I recently purchased an ebook "e - the story of a number". It contains numerous equations set within the text, most of which are png images. These equations display at an appropriate size when I view the book in Adobe Digital Editions or with the Calibre ebook viewer on the PC, but on my Aura HD the equations are (relative to the surrounding text) considerably smaller. This makes them quite difficult to read, especially when they involve things such as fractional exponents. Is there anything I can do to increase their relative size on the Aura HD. There is also the secondary problem that the equations are centred (as they should be) when viewed in either ADE or Calibre, but appear left-justified on the Aura HD.

I've attached a couple of screenshots - ade.png from the ADE reader on the PC, and aura.png from the ereader - showing the same section of text. The ereader is running current firmware.

[GeoffR]

As to the equation size: does the size of the equation change when you change the font size? If not then it is most likely a common publishing mistake where the equations are set at a fixed (pixel) size, and so will always look too small on high-dpi screens or when a larger font size is selected..

If that is the problem then the only solution is to edit the book to fix the mistakes. There are two approaches: one is to use image tools such as imagemagick to increase the size of the bitmap images to suit the device and selected font size; another (better but more time-consuming) approach is to edit the stylesheet and set the height and width of each image so that they resize automatically in proportion to the font size.

Edit: If you have the ImageMagick tools, then resizing the images might (depending on how the publisher has set the image sizes in the stylesheet) be as simple as using Calibre to unpack the ePub, running the following command in the directory containing the images, and then rebuilding the ePub:

mogrify -resize 150% *.png

Edit: If you want to make the equations scale proportional to the font size, the basic idea is to set the image size (in the html or css stylesheet, depending on how the publiaher has arranged the ePub) to { height:auto; width:Xem; max-width:100%; } where X = N*W/H, N = number of text lines in the equation, W = pixel width of image, H = pixel height of image. A slightly simpler way is to set { height:Nem; width:auto; } but this has the problem that the image will either be clipped or squashed when increasing the font size results in the equation to becoming too wide to fit on the screen, whereas the first method will cause the equation to simply stop increasing in size once it reaches maximum width.

As to the alignment. Do the equations become centred again when you set the justification button (Aa menu) to "Off"? (I guess this is a KePub book?)

[Nick Payne]

No, the size of the equations does not change when the font size is changed.

Yes, setting justification to off gets the equations centred on the reader screen (it is a kepub).

I had a fiddle with the style used for the images to see what improvement I could get for their display on the reader. It doesn't work too well, as even just the single line equations vary considerably in their native height and width, and setting a specific value in the style for the width or height (as opposed to auto) gives quite a different scale depending on what is in the image. For example, both the attached images are single line equations, but have different heights and scale quite differently unless height and width are left at auto.

I'll have to try your other suggestion, of using Imagemagick to enlarge all the images by the same amount.

Edit: I used Sigil and Imagemagick to enlarge all the png images to 150%. That makes them much easier to read on the Aura HD.

[GeoffR]

Originally Posted by Nick Payne

Yes, setting justification to off gets the equations centred on the reader screen (it is a kepub).

The problem here is that the KePub reader overides the alignment for <div> and <p> objects (and all subclasses of div and p), so the only objects that will retain their alignment in a KePub when the button is not set to "Off" are those using a heading tag like <h1>, <h2>, ... or <blockquote>, etc.

The ePub reader works differently and only overrides <body> (but not subclasses of body) and so often works better, but it depends on the publisher not overriding the default alignment of the main text.

There are firmware patches that can change the way the alignment is set in KePubs, to make it more like the ePub reader, but it is not really possible to get something that works well for all books without also editing the books to regularise their stylesheets, as there are so many different ways the publisher can structure the stylesheet.

I had a fiddle with the style used for the images to see what improvement I could get for their display on the reader. It doesn't work too well, as even just the single line equations vary considerably in their native height and width, and setting a specific value in the style for the width or height (as opposed to auto) gives quite a different scale depending on what is in the image. For example, both the attached images are single line equations, but have different heights and scale quite differently unless height and width are left at auto.

For the method of making the equation size proportional to the currently selected font size you would need to set the sizes for each individual image style seperately, not just one size for all images, as the calculated size in em depends on the size of the individual image. E.g. if the images are identified as id="eq1", id="eq2", etc. then set the width/height seperately for img#eq1, img#eq2, etc. not just for the main img class. It can be a lot more work than simply resizing the images themselves.

(Edit: Another way would be to create an SVG wrapper for each image, as SVG gives a lot more options for dealing with image sizes than is possible just by styling the img class in CSS, but I think that would take at least as much effort.)

The size of diagrams like the graph in your screenshot are probably better set as a percentage of the screen size (%) rather than proportional to font size (em).

I'll have to try your other suggestion, of using Imagemagick to enlarge all the images by the same amount.

That is the easiest way to go in most cases, it still leaves you with a book where the images are of a fixed pixel size, but at least it is a size that suits your device's screen and font selection.

Whichever method you use though, the results will depend a bit on the quality of the original images. If they are poor quality to start with then making them larger might not make them that much more readable.