![]() |
#1 |
Age improves with wine.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 571
Karma: 95229
Join Date: Nov 2014
Device: Kindle Oasis, Kobo Libra II
|
Kobo: images in epubs are tiny!
For some reason images that look perfectly fine on other devices are about half the expected size on my Kobo. I have an image which is 800px wide, the CSS says "height: auto; max-width: 100%" and it takes up about 1/3 of the screen width. Even with a 1200-ish pixel screen width it should be about 2/3 of the width, not 1/3.
Changing the CSS to "width: 150%" instead of "max-width: 100%" gives me an image which is still only about 70% of the screen width. Why should specifying 150% of the available width (~1800px) result in something which is far less than the available width? What on earth is going on, and is there any way to fix this short of editing all my books which contain images (several hundred at least, maybe thousands) and adding media-specific CSS to each one? |
![]() |
![]() |
![]() |
#2 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,452
Karma: 134254362
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
If this is ePub, try KePub. If this is KePub, try ePub.
|
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Bibliophagist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 38,440
Karma: 152905840
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Are the images wrapped in <div>s with CSS that may be setting the width as well? Say, the div sets the width to 50%, the image's 100% will be limited to that 50% viewbox from the div.
|
![]() |
![]() |
![]() |
#4 | |
Age improves with wine.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 571
Karma: 95229
Join Date: Nov 2014
Device: Kindle Oasis, Kobo Libra II
|
Quote:
Also, this happens with all books -- in most cases it makes little difference but this is a book where I need to be able to read the text in the images (a book on bridge where the deals are shown as images). If the title page is an image with CSS "max-height: 100%; max-width: 100%; height: auto; width: auto;" then changing the width (or sometimes height) to 100% fixes the problem. Last edited by Phssthpok; 07-16-2024 at 07:05 AM. |
|
![]() |
![]() |
![]() |
#5 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 10,865
Karma: 226731100
Join Date: Jan 2014
Location: Estonia
Device: Kobo Sage & Libra 2
|
|
![]() |
![]() |
Advert | |
|
![]() |
#6 |
Age improves with wine.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 571
Karma: 95229
Join Date: Nov 2014
Device: Kindle Oasis, Kobo Libra II
|
So I installed the Kobo Touch Extended plugin, disabled the standard driver, specify "convert to kepub" on the Extended tab, restarted Calibre, uploaded the book, and it converted it before uploading... to PDF, not to kepub!
What am I doing wrong? [Edit: disabling upload of PDFs, leaving kepub as the only valid format produced "WARNING: No suitable formats: Could not upload the following books to the device, as no suitable formats were found. Convert the book(s) to a format supported by your device first." Enabling both epub and kepub results in the epub being copied without conversion to kepub.] Last edited by Phssthpok; 07-16-2024 at 07:50 AM. |
![]() |
![]() |
![]() |
#7 | |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 10,865
Karma: 226731100
Join Date: Jan 2014
Location: Estonia
Device: Kobo Sage & Libra 2
|
Quote:
Last edited by Sirtel; 07-16-2024 at 07:59 AM. |
|
![]() |
![]() |
![]() |
#8 | |
Age improves with wine.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 571
Karma: 95229
Join Date: Nov 2014
Device: Kindle Oasis, Kobo Libra II
|
Quote:
So I changing the CSS back to what it was and uploaded the book as a kepub -- the font size was then also tiny, so I adjusted that and the line spacing to approximate what I had before. The image is now a bit bigger, but now it overlaps the surrounding text. ![]() Maybe I should just use a media query. Is there a Kobo-specific media query, like @media amzn-* for Kindles? |
|
![]() |
![]() |
![]() |
#9 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,159
Karma: 89201339
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
No need for media queries. Obviously the image CSS is wrong.
|
![]() |
![]() |
![]() |
#10 |
Age improves with wine.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 571
Karma: 95229
Join Date: Nov 2014
Device: Kindle Oasis, Kobo Libra II
|
As I said already, it displays correctly on other devices.
Image HTML: Code:
<body class="calibre"> <p class="centered"><img alt="296482.png" class="frame" src="image/296482.png"/></p> Code:
.calibre { -epub-hyphens: auto; -webkit-hyphens: auto; border-width: 0; display: block; margin-bottom: 0; margin-left: 18pt; margin-right: 18pt; margin-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0 } .centered { -epub-hyphens: none; -webkit-hyphens: none; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 14px; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; text-align: center; text-indent: 0 } .frame { height: auto; max-width: 100%; } Change .frame as follows: Code:
.frame { height: auto; width: 150%; } So pray, do tell me in what way the CSS is wrong. |
![]() |
![]() |
![]() |
#11 |
Well trained by Cats
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 30,206
Karma: 57978778
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Use the Inspector feature in the editor to look at the CSS nesting
BTW I noticed there is no Code:
display: block; That means that block is possibly inheriting margins or padding Again: Inspector can help identify |
![]() |
![]() |
![]() |
#12 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,452
Karma: 134254362
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
That's because other devices are either low-res or are doing it wrong. An 800px wide image is not going to fill the width of the screen. The Kobo Libra 2 is 1264 x 1680. That is 464px less then the width of the screen. Kob is doing it correctly.
Code:
.frame { display: block; width: 100%; max-height: 100%; } Last edited by JSWolf; 07-16-2024 at 06:10 PM. |
![]() |
![]() |
![]() |
#13 | |
Age improves with wine.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 571
Karma: 95229
Join Date: Nov 2014
Device: Kindle Oasis, Kobo Libra II
|
Quote:
|
|
![]() |
![]() |
![]() |
#14 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,159
Karma: 89201339
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
You can't fill the screen width on a Kindle as there is a fixed minimum margin.
Correctly done epub css will fill the width on most epub systems at width: 100%; height: auto; if the image isn't too tall. |
![]() |
![]() |
![]() |
#15 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,452
Karma: 134254362
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
On a Kindle, you can use negative margins to be able to use more of the screen.
|
![]() |
![]() |
![]() |
Tags |
css, image aspect ratio, kobo libra 2 |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Aura H2O Font size mismatch (downloaded epubs via Calibre vs. Kobo epubs & articles) | Oolong | Kobo Reader | 36 | 01-25-2019 06:00 AM |
kepubify - A standalone tool to convert ePubs into Kobo ePubs | geek1011 | Kobo Reader | 114 | 03-04-2018 10:30 AM |
question about images in epubs | juliana000 | Kobo Reader | 6 | 09-27-2013 09:11 PM |
Help finding tiny towers and tiny zoo | mojkadona | Kindle Fire | 5 | 04-26-2012 07:02 PM |
Touch Problem with all epubs, my epubs, or my kobo? (line clipping) | plague006 | Kobo Reader | 14 | 12-02-2011 11:32 PM |