epub formatting - full page images

[murg]

What I want to do is to embed a full page image on the Kobo, on an internal page that has a header. This page would be the first page of a chapter file.

For the cover, the html is:

 
<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 450 684" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image height="684" width="450" xlink:href="../Images/Cover.jpg"></image>
    </svg>
</div>

For the page (using the cover image as an example):

 
<h3>Header</h3>
<div>
   <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 450 684" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="684" width="450" xlink:href="../Images/Cover.jpg"></image>
   </svg>
</div>

This always pus the image on a page by itself, after the page with the header.

Other experimentation has shown that with the Header, there is about 710 vertical pixels on the Glo for the image.

[davidfor]

Have you accounted for the top and bottom margins? Or tried a slightly smaller image to see if you can get them on the same screen.

From the CSS side there is a keep with next or previous property that might help, though I don't know if the reader respect them. And a little search suggests moving the heading inside the div and adding "display: inline-block" to the div. That is supposed to try and keep all the elements in the div together.

You might also ask in the epub section. The experts on doing this are there. To me this isn't really a Kobo question other than getting the sizes right for the different screen sizes.

[murg]

It really isn't a size issue, it's about how the Kobo renderer deals with svg windows, or about how to define the external size of the svg window.

[DNSB]

Originally Posted by murg

It really isn't a size issue, it's about how the Kobo renderer deals with svg windows, or about how to define the external size of the svg window.

Not sure if this would help since I haven't played with keeping a near full page image together with a header or caption but have you tried grouping them inside a div? Using group as the class name and removing extraneous odds and sods:


.group {
page-break-inside: avoid;
}

<div class="group">
header
image
</div>

This seems to work for me but the images I was using were smaller and I wanted to keep the image and caption together.

Regards,
David

[murg]

I'll try this today.

What I'm trying to do it set it up so that the SVG window automatically takes up the rest of the space on the page, and then resizes its internals to fit inside that.

I just realised that asking this question is going to lead to the: connect usb, edit epub, load epub, disconnect usb, wait for processing, open epub, go to test page, look at test page, go to home page, go to first library page, go to library page with epub on it, delete epub cycle. And I did far too much of that yesterday.

[PeterT]

Maybe you could save some time by having more than one testing book; make several, ensure they are totally distinct internally, and move them all over at the same time; test 5 or 10 versions, each subtly different in the SVG code, and then, based on what you see, change and repeat?

[murg]

Originally Posted by PeterT

Maybe you could save some time by having more than one testing book; make several, ensure they are totally distinct internally, and move them all over at the same time; test 5 or 10 versions, each subtly different in the SVG code, and then, based on what you see, change and repeat?

Or one book with many test chapters...

I usually get efficient with things just before I find the solution and don't have to go through it anymore.

[davidfor]

Originally Posted by murg

I just realised that asking this question is going to lead to the: connect usb, edit epub, load epub, disconnect usb, wait for processing, open epub, go to test page, look at test page, go to home page, go to first library page, go to library page with epub on it, delete epub cycle. And I did far too much of that yesterday.

You mean, people don't connect their readers 10 or 20 or more times a day?

And, you missed the "there isn't a change, did I forget to copy the new copy over?". But that isn't as bad as the "Oh no, I forgot to eject before disconnecting".

[murg]

Originally Posted by davidfor

You mean, people don't connect their readers 10 or 20 or more times a day?

Yeah, this does seem strange. The really annoying bit is watching the 'processing' screen on the Glo shift up a few pixels when it starts putting the percentages out. Time after time after bloody time.

Originally Posted by davidfor

And, you missed the "there isn't a change, did I forget to copy the new copy over?".

Or 'did I save the change?'. Usually asked after you copy the file to the device.

Originally Posted by davidfor

But that isn't as bad as the "Oh no, I forgot to eject before disconnecting".

I've found that as long as the drive is marked for quick removal, and you don't have the device drive open in File Explorer, it doesn't seem to mind.

[PeterT]

And how about the "Oh Crap... I didn't delete the book before readding it" moment!

[davidfor]

Originally Posted by murg

Yeah, this does seem strange. The really annoying bit is watching the 'processing' screen on the Glo shift up a few pixels when it starts putting the percentages out. Time after time after bloody time.

YES!!!! And it's made worse because the shadow of the previous one is still there.

Or 'did I save the change?'. Usually asked after you copy the file to the device.

Been there a lot.

I've found that as long as the drive is marked for quick removal, and you don't have the device drive open in File Explorer, it doesn't seem to mind.

That would be fairly safe. My problem is that most of the testing I have done involved calibre and it does open the database. Or I have the database open in a viewer. 99% of the time it is OK. It's that 1% that bites you in the bum.

[murg]

Originally Posted by davidfor

YES!!!! And it's made worse because the shadow of the previous one is still there.

There's also a pixel shift in one of the translated words on the Updating Firmware page. At least in one of the 2.3 versions.

[PeterT]

Lets hope the efforts go into fixing OTHER issues and not the off by one pixel!

[davidfor]

Originally Posted by PeterT

Lets hope the efforts go into fixing OTHER issues and not the off by one pixel!

If it was me, I would have fixed this. It drives me nuts as it is. Or should I say "quite batty". If I was testing the code, I would be seeing it far to many times to not look at it.


@murg: Are you still testing this? If so, could you try something.

I have been bugged by the fact that replacing an epub with a new version usually means it gets deleted from the device. This has changed with different firmware. After a bit of playing today, it appears that the delete is based on the file size. If the file size of the book is different to the database, the book gets deleted. When I update the database record for the book with the new file size, it doesn't get deleted. Any chance you could try this? It will be a pain, but if it works for someone else, then I can roll it into the calibre driver (well, release the change I've already made). Of course, anyone else who wants to try it, I'll be happy to hear the results.

The table is "content". The column is "___FileSize". The row ContentType = 6 and the Title is the book title. The following would find the row for the book "The Help":

SELECT * FROM content
where title like '%The Help%'
and ContentType = 6

The "like" is because I am usually to lazy to type the full title in and just use a unique word.