![]() |
#1 |
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:
![]() ![]() ![]() ![]() 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 |
![]() |
![]() |
![]() |
#2 | |
Bibliophagist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 45,500
Karma: 168929301
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
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> Regards, David Last edited by DNSB; 05-30-2014 at 11:41 AM. |
|
![]() |
![]() |
Advert | |
|
![]() |
#3 |
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.
![]() |
![]() |
![]() |
![]() |
#4 | |
Bibliophagist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 45,500
Karma: 168929301
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
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 |
|
![]() |
![]() |
![]() |
#5 |
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?
|
![]() |
![]() |
Advert | |
|
![]() |
#6 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
|
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.
|
![]() |
![]() |
![]() |
#7 | |
Bibliophagist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 45,500
Karma: 168929301
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
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> Regards, David Last edited by DNSB; 05-30-2014 at 10:57 PM. |
|
![]() |
![]() |
![]() |
#8 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,056
Karma: 54671821
Join Date: Feb 2012
Location: New England
Device: PW 1, 2, 3, Voyage, Oasis 2 & 3, Fires, Aura HD, iPad
|
Quote:
Shari |
|
![]() |
![]() |
![]() |
#9 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 13,384
Karma: 78877538
Join Date: Nov 2007
Location: Toronto
Device: Libra H2O, Libra Colour
|
|
![]() |
![]() |
![]() |
#10 | |
Bibliophagist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 45,500
Karma: 168929301
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
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 |
|
![]() |
![]() |
![]() |
#11 |
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?
|
![]() |
![]() |
![]() |
#12 | |
Bibliophagist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 45,500
Karma: 168929301
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
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 Last edited by DNSB; 06-02-2014 at 04:18 PM. Reason: Fat fingers cause typos... |
|
![]() |
![]() |
![]() |
#13 |
Zealot
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 129
Karma: 2934438
Join Date: Jan 2014
Location: Winnipeg MB Canada
Device: aura hd
|
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).
|
![]() |
![]() |
![]() |
|
![]() |
||||
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 |