Aura HD Full screen in-book images

omnimodis78 · 05-29-2014, 01:06 PM

I'm looking at a global, permanent solution to ensure that image files are displayed in full on my Kobo Aura HD. Opening a book in Calibre Ebook Viewer displays images at full-frame, but in Kobo all image files within books (covers are fine) are always so tiny. Here are two pictures of the same book & page, top is from Calibre, bottom is on Aura HD:

Calibre Ebook Viewer:

Aura HD:

Any help would be greatly appreciated, as this is a major annoyance for me given that I read a lot of historical books and those have tons of maps and images that I simply can't view. Thanks!

DNSB · 05-30-2014, 11:37 AM

Quote:

Originally Posted by omnimodis78

I'm looking at a global, permanent solution to ensure that image files are displayed in full on my Kobo Aura HD. Opening a book in Calibre Ebook Viewer displays images at full-frame, but in Kobo all image files within books (covers are fine) are always so tiny. Here are two pictures of the same book & page, top is from Calibre, bottom is on Aura HD:

Any help would be greatly appreciated, as this is a major annoyance for me given that I read a lot of historical books and those have tons of maps and images that I simply can't view. Thanks!

Generally, what I do for full page images is to use the svg wrapper technique.

Code:

  
<style type="text/css">
@page {padding: 0pt; margin:0pt}
            body { text-align: center; padding:0pt; margin: 0pt; }
</style>
</head>

<body class="nomargin">
  <div class="svg_wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 510 680" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="680" width="510" xlink:href="../Images/cover.jpg"></image>
    </svg>
  </div>

This will scale to close to full page. The nomargin and svg_wrapper basically just set the margins to 0. At one time, I ran into some issues with margins so just ensured that all of them for images were 0.

Regards,
David

omnimodis78 · 05-30-2014, 05:30 PM

Thanks David, but truth be told I wouldn't even know where to start implementing your suggestion.

DNSB · 05-30-2014, 06:42 PM

Quote:

Originally Posted by omnimodis78

Thanks David, but truth be told I wouldn't even know where to start implementing your suggestion.

I'm using Sigil to edit the ebooks though the Calibre built-in editor also works.

Basically, you locate each image you want as full page and replace the current code displaying the image with the svg wrapper code. If the image is not a separate file within the epub, use the code from the <svg> to the </svg> tag.

Regards,
David

omnimodis78 · 05-30-2014, 09:07 PM

Oh, I understand. But, is there no way to universally ensure that these images show up full screen? I mean if Calibre's ebook reader can do it, why can't Kobo's engine handled it universally?

GeoffR · 05-30-2014, 09:32 PM

Quote:

Originally Posted by omnimodis78

Oh, I understand. But, is there no way to universally ensure that these images show up full screen? I mean if Calibre's ebook reader can do it, why can't Kobo's engine handled it universally?

The problem is that some images are not supposed to be full-screen. For example when a tall image has a title, I find the Calibre viewer will incorrectly put the title and image on seperate pages in situations where ADE, Kobo, etc. will put the title and image on the same page.

DNSB · 05-30-2014, 10:54 PM

Quote:

Originally Posted by omnimodis78

Oh, I understand. But, is there no way to universally ensure that these images show up full screen? I mean if Calibre's ebook reader can do it, why can't Kobo's engine handled it universally?

If the image is not set with a height/width/svg wrapper, it will display at it's native resolution. That is, a 600x800 image will be full screen on a Touch/Mini, take up about 78% of the screen width/height on a Glo/Aura (758x1024) and about 55% of the screen width/height on an Aura HD (1080x1440).

For small images, I use a chunk of code in multiple versions to keep images about the same size. I base the percentage on a 600x800 screen. For instance for an image that is 360 x240, I would use glyphw60 as class since the image is about 60% of the 600. For an image that was 120x480, I'd use the glyphh60 class as 480 is about 60% of the 800. The glyph items live in the stylesheet, the last <p></p> is a sample of what the code looks like in the epub.

Code:

.glyphw60  {
    margin : auto;
    text-align : center;
    height : auto;
    width : 60%;
    }

.glyphh60  {
    margin : auto;
    text-align : center;
    height : 60%;
    width : auto;
    }

<p class="imgctr"><img alt="Viper" class="glyphw66" src="../Images/00006.jpg" /></p>

This does take some work editing the epub but since I edit most non-DRMed epubs, it takes relatively little additional effort to improve the images at the same time. This also allows me to correct the ebooks where sloppy work has images and titles on separate pages -- one ebook had page-break-after: always; as part of their code to center images on a page so even a tiny image was followed by a new page.

Regards,
David

shalym · 06-02-2014, 09:44 AM

Quote:

Originally Posted by DNSB

If the image is not set with a height/width/svg wrapper, it will display at it's native resolution. That is, a 600x800 image will be full screen on a Touch/Mini, take up about 78% of the screen width/height on a Glo/Aura (758x1024) and about 55% of the screen width/height on an Aura HD (1080x1440).
_..._
This does take some work editing the epub but since I edit most non-DRMed epubs, it takes relatively little additional effort to improve the images at the same time. This also allows me to correct the ebooks where sloppy work has images and titles on separate pages -- one ebook had page-break-after: always; as part of their code to center images on a page so even a tiny image was followed by a new page.

Regards,
David

But why can Calibre's book viewer show full screen, but Kobo's can't? That's the question that omnimodis78 is asking...

Shari

PeterT · 06-02-2014, 10:53 AM

Quote:

Originally Posted by shalym

But why can Calibre's book viewer show full screen, but Kobo's can't? That's the question that omnimodis78 is asking...

Shari

Design choices; no more, no less

DNSB · 06-02-2014, 12:37 PM

Quote:

Originally Posted by shalym

But why can Calibre's book viewer show full screen, but Kobo's can't? That's the question that omnimodis78 is asking...

Shari

Kobo's viewer for epubs is Adobe RDSDK code. The viewer used by Calibre is not. Different sources, different displays. Much like the differences you will see between IE, Firefox, Chrome, Safari, etc. when viewing web pages.

Personally, I find that Calibre's viewer does not comes as close as my Kobo ereader to matching what I would expect from the epub 2.01 specification.

One horrible example of image display issues I ran into was when switching versions of Adobe's InDesign. The output was intended for use on iPads issued by the company. InDesign 5 worked fine, the image size was what was expected. InDesign 6 images came out as if no scale to page width had been applied. The only difference was that ID 5 put the scaling in-line while ID 6 put it in the CSS and then referenced it.

ID5:
<img alt="kcycle" width="23%" src="../images/figure2.jpg" />

ID6:
<div class="img_centre">
<img alt="kcycle" class="figure23" src="../images/figure2.jpg" />
</div>

The figure23 tag simply set width=23% and height=auto.

Looked the same in ADE, looked the same on my Kobo, on the iPad, the first example was about 25% of the page width, the second example took about 60% of the page width so the image was displayed at it's full size.

Regards,
David

omnimodis78 · 06-02-2014, 03:46 PM

It makes perfect sense to me that different codes will produce different outcomes, I get that - but is the simple answer to my original question then that with Kobo e-readers this is not possible? That with default behaviour, maps, pictures, illustrations all will display as tiny images on screen, generally covering about 20% of screen real-estate?

DNSB · 06-02-2014, 04:15 PM

Quote:

Originally Posted by omnimodis78

It makes perfect sense to me that different codes will produce different outcomes, I get that - but is the simple answer to my original question then that with Kobo e-readers this is not possible? That with default behaviour, maps, pictures, illustrations all will display as tiny images on screen, generally covering about 20% of screen real-estate?

The default behaviour is to display the images at their intrinsic size. That is a 300x400 pixel image will display using 300x400 pixels -- about 50% of the screen width on a Touch/Mini, 33% on a Glo/Aura and 25% on an Aura HD.

From what I read into the epub 2.01 specification, displaying an image at it's intrinsic size if no modifying code exists is the expected behaviour -- any other behaviour is not following the standard. Adobe tries to follow the standard especially for the RMSDK which is expected to be used on lower resolution mobile devices. Calibre is expected to be used with higher resolution displays and does not follow the standard which is why I use ADE and not Calibre when I want to get a idea of what a work in progress will look like on an ereader.

From the Pigs, Gourds and Wikis page:

An image has an intrinsic size, that is, its actual size in pixels. If you don't apply width or height information to the image, either in the HTML or the CSS, the image will appear at its original size. CSS allows you to set the height and the width of an image explicitly in pixels, or as a percentage of a parent element. This means that if you set the width of an image to 50%, the image should be displayed at 50% of the width of the element in which the image is contained, not 50% of the image's original width.

This behaviour is why using width/height percentages is recommended for images so they will use approximately the same amount of page space regardless of device resolution. For images intended to be displayed full screen, using an SVG wrapper is the best choice for a good looking scalable image.

Regards,
David

jandrew · 06-02-2014, 04:18 PM

Quote:

Originally Posted by omnimodis78

but is the simple answer to my original question then that with Kobo e-readers this is not possible? That with default behaviour, maps, pictures, illustrations all will display as tiny images on screen, generally covering about 20% of screen real-estate?

I only read kepubs on my AuraHD (either direct transfers from Kobo, or converted via Calibre), in which images can be double-tapped to get a dismissable full screen image view with zoom, pan, fit-to-(width|height), and rotate. (I also prefer the more consistent page-layout and pop-up footnotes of kepubs).

05-29-2014, 01:06 PM	#1
omnimodis78 Enthusiast Posts: 31 Karma: 6916 Join Date: Jun 2013 Location: Ontario, Canada Device: Kobo Aura H20	Full screen in-book images I'm looking at a global, permanent solution to ensure that image files are displayed in full on my Kobo Aura HD. Opening a book in Calibre Ebook Viewer displays images at full-frame, but in Kobo all image files within books (covers are fine) are always so tiny. Here are two pictures of the same book & page, top is from Calibre, bottom is on Aura HD: Calibre Ebook Viewer: Aura HD: Any help would be greatly appreciated, as this is a major annoyance for me given that I read a lot of historical books and those have tons of maps and images that I simply can't view. Thanks! Last edited by omnimodis78; 05-29-2014 at 02:35 PM. Reason: Spelling

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Possible solution for full screen images	erez213	Kindle Developer's Corner	242	06-20-2012 11:15 AM
Double tap doesn't zoom images full screen	nonsequito	Apple Devices	0	01-15-2011 05:03 PM
Display images full-screen?	jttraverse	ePub	3	01-09-2011 04:59 AM
Full-Screen images on the K2?	Thorkin	Amazon Kindle	1	03-12-2009 07:48 PM

05-30-2014, 05:30 PM	#3
omnimodis78 Enthusiast Posts: 31 Karma: 6916 Join Date: Jun 2013 Location: Ontario, Canada Device: Kobo Aura H20	Thanks David, but truth be told I wouldn't even know where to start implementing your suggestion.

05-30-2014, 09:07 PM	#5
omnimodis78 Enthusiast Posts: 31 Karma: 6916 Join Date: Jun 2013 Location: Ontario, Canada Device: Kobo Aura H20	Oh, I understand. But, is there no way to universally ensure that these images show up full screen? I mean if Calibre's ebook reader can do it, why can't Kobo's engine handled it universally?

06-02-2014, 03:46 PM	#11
omnimodis78 Enthusiast Posts: 31 Karma: 6916 Join Date: Jun 2013 Location: Ontario, Canada Device: Kobo Aura H20	It makes perfect sense to me that different codes will produce different outcomes, I get that - but is the simple answer to my original question then that with Kobo e-readers this is not possible? That with default behaviour, maps, pictures, illustrations all will display as tiny images on screen, generally covering about 20% of screen real-estate?

Advert

Advert