Kobo: images in epubs are tiny!

Phssthpok · 07-15-2024, 05:13 PM

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?

JSWolf · 07-15-2024, 07:28 PM

If this is ePub, try KePub. If this is KePub, try ePub.

DNSB · 07-15-2024, 07:51 PM

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.

Phssthpok · 07-16-2024, 07:38 AM

Quote:

Originally Posted by DNSB

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.

No: it's in a para with zero margins and padding, which is inside <body>.

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.

Sirtel · 07-16-2024, 07:47 AM

Quote:

Originally Posted by Phssthpok

No: it's in a para with zero margins and padding, which is inside <body>.

You'll need to use kepub, if you want images to be large.

Phssthpok · 07-16-2024, 08:09 AM

Quote:

Originally Posted by Sirtel

You'll need to use kepub, if you want images to be large.

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.]

Sirtel · 07-16-2024, 08:57 AM

Quote:

Originally Posted by Phssthpok

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.]

Enable only epub (NOT kepub) in the file formats tab, and check "Send books as kepubs" in the Extended tab. The file sent to your Kobo will have .kepub.epub extension and the format "Kobo epub" on the device.

Phssthpok · 07-16-2024, 09:57 AM

Quote:

Originally Posted by Sirtel

Enable only epub (NOT kepub) in the file formats tab, and check "Send books as kepubs" in the Extended tab. The file sent to your Kobo will have .kepub.epub extension and the format "Kobo epub" on the device.

OK, that was obvious (not).

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?

Quoth · 07-16-2024, 10:52 AM

No need for media queries. Obviously the image CSS is wrong.

Phssthpok · 07-16-2024, 12:44 PM

Quote:

Originally Posted by Quoth

No need for media queries. Obviously the image CSS is wrong.

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>

CSS:

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%;
}

Result: an 800px-wiide image fills about a third of the screen width (as I already said above).

Change .frame as follows:

Code:

.frame {
    height: auto;
    width: 150%;
}

The image now occupies about 70% of the screen width (as I already said above).

So pray, do tell me in what way the CSS is wrong.

theducks · 07-16-2024, 12:56 PM

Use the Inspector feature in the editor to look at the CSS nesting

BTW I noticed there is no

Code:

 display: block;

on Centered

That means that block is possibly inheriting margins or padding
Again: Inspector can help identify

JSWolf · 07-16-2024, 02:04 PM

Quote:

Originally Posted by Phssthpok

As I said already, it displays correctly on other devices.

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%;
}

Phssthpok · 07-25-2024, 01:16 PM

Quote:

Originally Posted by JSWolf

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%;
}

So if width:100% doesn't make it expand to fill the width of the screen, what does?

Quoth · 07-25-2024, 01:53 PM

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.

JSWolf · 07-25-2024, 02:54 PM

Quote:

Originally Posted by Quoth

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.

On a Kindle, you can use negative margins to be able to use more of the screen.

07-15-2024, 05:13 PM	#1
Phssthpok 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?

07-16-2024, 12:56 PM	#11
theducks Well trained by Cats Posts: 30,506 Karma: 58055868 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; on Centered That means that block is possibly inheriting margins or padding Again: Inspector can help identify

Similar Threads
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 07:00 AM
kepubify - A standalone tool to convert ePubs into Kobo ePubs	geek1011	Kobo Reader	114	03-04-2018 11:30 AM
question about images in epubs	juliana000	Kobo Reader	6	09-27-2013 10:11 PM
Help finding tiny towers and tiny zoo	mojkadona	Kindle Fire	5	04-26-2012 08:02 PM
Touch Problem with all epubs, my epubs, or my kobo? (line clipping)	plague006	Kobo Reader	14	12-03-2011 12:32 AM

07-15-2024, 07:28 PM	#2
JSWolf Resident Curmudgeon Posts: 76,944 Karma: 138256890 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.

07-15-2024, 07:51 PM	#3
DNSB Bibliophagist Posts: 41,262 Karma: 158182188 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.

07-16-2024, 10:52 AM	#9
Quoth Reading till the spring Posts: 12,518 Karma: 94058919 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper	No need for media queries. Obviously the image CSS is wrong.

07-25-2024, 01:53 PM	#14
Quoth Reading till the spring Posts: 12,518 Karma: 94058919 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper	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.

Advert

Advert