epub images are broken in Kobo - Page 2

mrmikel · 12-12-2013, 05:48 PM

Only on a square screen will this work in both mode succeed and none of the devices have a square screen. You will end up with empty space in one mode or another. Though for a particular device there might be a way to detect what mode it is in and program it for different images...what a lot of work and only work on that device, should one exist.

theducks · 12-12-2013, 09:42 PM

does Kobo honor:

max-width: <value here>

CSS property to limit the stretch?

davidfor · 12-12-2013, 11:06 PM

Liliann: Are you trying to do this in an epub or a kepub? The screen shot suggests it is a kepub, but that you have added some options to the config file on the device. If the it is a kepub, how are you producing it? And did you check what happened with the epub?

Jellby · 12-13-2013, 07:56 AM

Also note that "height: 100%" is in essence pretty much undefined. It might work for some devices, but that's a grey area of the spec, and it's bound to fail somewhere (it fails if you try to render in Prince, for example).

Liliann · 12-13-2013, 09:11 AM

davidfor it's an epub.

Since I'm used to media queries it's hard to accept that I can't have it both ways.

And it seems that I can't use a generic solution either, for all of the images.
The img { height: auto; width: 100%; } it worked for an image and it looks it adapts to the screen changes, but for the other images it doesn't. That is a mystery for me. I've also tried img { width: auto; max-height: 100%;} and img {max-width: 100%; height: auto;} and even if it changed the image's size in landscape mode, it was still broken.
It's like Kobo didn't recognise that is an image that should stay in one piece.
I'm getting tired of trying and I still didn't mention another problem that I have only in Kobo but not in iPad, and I'm not sure if I should start another topic...

RbnJrg · 12-13-2013, 11:07 AM

Quote:

Originally Posted by Liliann

davidfor it's an epub.

Since I'm used to media queries it's hard to accept that I can't have it both ways.

And it seems that I can't use a generic solution either, for all of the images.
The img { height: auto; width: 100%; } it worked for an image and it looks it adapts to the screen changes, but for the other images it doesn't. That is a mystery for me. I've also tried img { width: auto; max-height: 100%;} and img {max-width: 100%; height: auto;} and even if it changed the image's size in landscape mode, it was still broken.
It's like Kobo didn't recognise that is an image that should stay in one piece.
I'm getting tired of trying and I still didn't mention another problem that I have only in Kobo but not in iPad, and I'm not sure if I should start another topic...

Please, could you post here the image of your issue? I would like to make some experiment with it.

Liliann · 12-13-2013, 11:34 AM

Quote:

Originally Posted by RbnJrg

Please, could you post here the image of your issue? I would like to make some experiment with it.

Do you mean to attach one of the original images?

RbnJrg · 12-13-2013, 12:29 PM

Quote:

Originally Posted by Liliann

Do you mean to attach one of the original images?

Yes, I do.

Liliann · 12-13-2013, 01:03 PM

I've fixed all the images to fit in portrait mode, but they are still broken in landscape if they are too big to fit in one page or they are at the bottom...

I've attached an image that has these properties:
width: 553px;
max-width: 100%;
height: auto;

It's good in portrait mode but it's broken in landscape.

RbnJrg · 12-13-2013, 01:38 PM

Quote:

Originally Posted by Liliann

I've fixed all the images to fit in portrait mode, but they are still broken in landscape if they are too big to fit in one page or they are at the bottom...

I've attached an image that has these properties:
width: 553px;
max-width: 100%;
height: auto;

It's good in portrait mode but it's broken in landscape.

OK; I will try to fix that in order that you can see it good in both modes, portrait and landscape.

RbnJrg · 12-13-2013, 02:07 PM

Hi Liliann;

Well, I don't have Kobo so I can't say if this aproximation works but in ADE looks fine. Tell me how does it work in Kobo the ePub I attached below.

Regards
Rubén

Liliann · 12-13-2013, 03:31 PM

Quote:

Originally Posted by RbnJrg

Hi Liliann;

Well, I don't have Kobo so I can't say if this aproximation works but in ADE looks fine. Tell me how does it work in Kobo the ePub I attached below.

Regards
Rubén

Thanks Rubén but not in Kobo

neither in landscape mode...

RbnJrg · 12-13-2013, 06:35 PM

Quote:

Originally Posted by Liliann

Thanks Rubén but not in Kobo

neither in landscape mode...

Well, let's continue trying

Do the following:

Open the ePub that I uploaded in my previous post with Sigil and, in the stylesheet.css file write:

Code:

.TableCell {
  display: table-cell;
}

Now, enable the Section0001.xhtml file and in the Code View, where you see:

Code:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1153 1577" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image class="TableCell" height="1577" width="1153" xlink:href="../Images/flame.jpeg"></image>
    </svg>
</div>

write:

Code:

<div class="TableCell">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1153 1577" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image class="TableCell" height="1577" width="1153" xlink:href="../Images/flame.jpeg"></image>
    </svg>
</div>

Save all and watch how does it look in Kobo. If doesn't work, then try:

Code:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1153 1577" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image class="TableCell" height="1577" width="1153" xlink:href="../Images/flame.jpeg"></image>
    </svg>
</div>

Maybe this time we are in luck

davidfor · 12-13-2013, 11:18 PM

Quote:

Originally Posted by Liliann

Thanks Rubén but not in Kobo

neither in landscape mode...

What are you actually using to view this? I assumed a Kobo e-ink device, but, I just noticed that the photos showed colour on the screen. Are you using a Vox, an Arc or the Kobo app on an Android or iOS device?

And for the record, attached are screenshots taken on a Kobo Glo with the latest firmware. This is with RbnJrg epub. "flame_epub.png" is of the epub which uses the Adobe based reader. "flame_kepub.png" is loaded as a kepub which uses the ACCESS based reader.

Liliann · 12-15-2013, 01:00 PM

I'm testing it on Kobo Arc.

Rubén, with your first solution there is only one page and the image is missing in a mysterious way...the second one does the same.

Is there any way to disable the landscape mode only on Kobo?

12-13-2013, 01:03 PM	#24
Liliann Member Posts: 17 Karma: 10 Join Date: Dec 2013 Device: none	I've fixed all the images to fit in portrait mode, but they are still broken in landscape if they are too big to fit in one page or they are at the bottom... I've attached an image that has these properties: width: 553px; max-width: 100%; height: auto; It's good in portrait mode but it's broken in landscape. Last edited by Liliann; 01-26-2014 at 07:08 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
PNG Images in ePUB Files not rendered on Kobo	DragonflyKing	ePub	12	10-12-2013 08:28 PM
Images are broken across 2 pages after converting to ePub from RTF. iPhone.	vital2k	Conversion	2	05-31-2011 01:46 AM
No images in kobo epub books?	jayupark	Kobo Reader	8	03-29-2011 04:06 PM
Multi-level TOC broken in epub->epub conversion	siebert	Conversion	14	03-09-2011 05:38 PM

12-12-2013, 05:48 PM	#16
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	Only on a square screen will this work in both mode succeed and none of the devices have a square screen. You will end up with empty space in one mode or another. Though for a particular device there might be a way to detect what mode it is in and program it for different images...what a lot of work and only work on that device, should one exist.

12-12-2013, 09:42 PM	#17
theducks Well trained by Cats Posts: 29,790 Karma: 54830978 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	does Kobo honor: max-width: <value here> CSS property to limit the stretch?

12-12-2013, 11:06 PM	#18
davidfor Grand Sorcerer Posts: 24,907 Karma: 47303748 Join Date: Jul 2011 Location: Sydney, Australia Device: Kobo:Touch,Glo, AuraH2O, GloHD,AuraONE, ClaraHD, Libra H2O; tolinoepos	Liliann: Are you trying to do this in an epub or a kepub? The screen shot suggests it is a kepub, but that you have added some options to the config file on the device. If the it is a kepub, how are you producing it? And did you check what happened with the epub?

12-13-2013, 07:56 AM	#19
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Also note that "height: 100%" is in essence pretty much undefined. It might work for some devices, but that's a grey area of the spec, and it's bound to fail somewhere (it fails if you try to render in Prince, for example).

12-13-2013, 09:11 AM	#20
Liliann Member Posts: 17 Karma: 10 Join Date: Dec 2013 Device: none	davidfor it's an epub. Since I'm used to media queries it's hard to accept that I can't have it both ways. And it seems that I can't use a generic solution either, for all of the images. The img { height: auto; width: 100%; } it worked for an image and it looks it adapts to the screen changes, but for the other images it doesn't. That is a mystery for me. I've also tried img { width: auto; max-height: 100%;} and img {max-width: 100%; height: auto;} and even if it changed the image's size in landscape mode, it was still broken. It's like Kobo didn't recognise that is an image that should stay in one piece. I'm getting tired of trying and I still didn't mention another problem that I have only in Kobo but not in iPad, and I'm not sure if I should start another topic...

12-15-2013, 01:00 PM	#30
Liliann Member Posts: 17 Karma: 10 Join Date: Dec 2013 Device: none	I'm testing it on Kobo Arc. Rubén, with your first solution there is only one page and the image is missing in a mysterious way...the second one does the same. Is there any way to disable the landscape mode only on Kobo?