keep together?

[Kivgaen]

I don't know if this is possible in CSS or in .epub standards, but I want to try to mimic InDesign's "Keep together" features.

I want to use tables in our .epub file, instead of converting everything to images. But the problem with doing this is the table gets split at an awkward location -- we really need all rows of the table to stay together wherever possible.

Is there any way to accomplish this in an .epub file, besides the obvious of converting to an image or forcing a line break before the table?

[charleski]

Add
page-break-inside: avoid;
to the CSS code for the table block.
http://www.w3.org/TR/CSS2/page.html#page-break-props
ADE, at least, recognises this code and handles it correctly, though FBReader might not.

[eclecticguy]

I found this thread and was hopeful this would solve my problem! I have images with a text caption and I want to make sure the caption and image are on the same page. I am targeting the iPad (but would prefer a generic solution). Here is a sample:

CSS:

  div.figure {text-align: center; margin-bottom: 1em; margin-left: 10%; margin-right: 10%; page-break-inside: avoid;} 
  img.figure_image {border: 1px solid  #808080; }
  p.figure_caption {text-align: center; font-weight: bold; font-size: .9em; margin-top: .5em; margin-bottom: 0em;}

XHTML:

  <div class="figure">
    <img class="figure_image" src="../Images/Figure%203-1.jpg" />
    <p class="figure_caption">Figure 3-1 – The Brass Frame Reel with Friction Drag</p>
  </div>

This does not appear to work on iPad and I have no other reader to test. Any help or ideas appreciated!
cheers,
Michael

[HarryT]

I'd suggest trying it with the desktop version of ADE.

[eclecticguy]

I don't know about ADE. I'll google and try it. Thanks,
Michael

[HarryT]

Adobe Digital Editions. It's a free download from Adobe's web site.

[eclecticguy]

Yes, I just installed it. It seems to be breaking the image from the caption too and it is displaying a '?' character in front of all my captions. I double checked my code and there is no oddness there.

[HarryT]

ADE is the basis for the ePub viewers on most eBook readers, so it's as well to get it looking right in ADE.

[eclecticguy]

Maybe it is just my aversion to flash, but ade really seems primitive. There are numbers in the margins, sometimes it shows 2 columns instead of 1 depending on the window width. Maybe I need to read the docs or something, it really does not seem intuitive at all. The very first version of my book conversion to ePub looked remarkably nice on the iPad.

[HarryT]

Oh, I agree with you, desktop ADE is a quite remarkably horrible book reader. Its main use is to test out ePub code, because however something behaves in ADE, it will behave the same way in almost all eBook readers, since they (almost) all licence ADE code to display ePub and PDF files.

The iBooks app on the iPad is a much, much nicer reader.

[eclecticguy]

I made things a bit better on ADE by increasing the font size 1 click. Now I get 1 column that approximates my book. I still see the little '?' before the captions though.

I can't tell if ade is breaking my img/caption though since it seems to always start a page with an image.

iBooks was my first experience with an ebook reader. Now I know how spoiled I am!

cheers,
Michael

[Jellby]

Originally Posted by eclecticguy

Yes, I just installed it. It seems to be breaking the image from the caption too and it is displaying a '?' character in front of all my captions. I double checked my code and there is no oddness there.

There seems to be a spurious character in your caption, just before "Figure". In my system this shows as a boxed "OBJ", and it's apparently character # 65532. Try removing it and, if it still does not work, try adding "page-break-after: avoid" to the img.figure_image and "page-break-before: avoid" to the p.figure_caption. Also, make sure the image fits in a page, otherwise a pagebreak is always possible.

[eclecticguy]

thanks Jellby. I see the character in the snippet above but it does not exist in my Sigil source file. I will try the other suggestions and report back. The images do fit in a page - the problem occurs when the image appears at the bottom of the page - the caption breaks to the next page.
cheers,
Michael

[eclecticguy]

Jellby, no joy with your suggestions. I have tired every combination of page break before/after/inside that I can think of and nothing works! I have a test file that shows the image on the first page and the caption breaks to the second page. If I remove 1 line of text above the image/caption, both the image and caption appear on the first page.

I had posted this over in the Apple iPad forum and someone said they got it to work but did not show how nor answer my request for help. I suspect they did not get it to work.

Here is the code for the page:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">
div.figure {text-align: center; margin-bottom: 1em; margin-left: 8%; margin-right: 8%; page-break-inside: avoid;}
img.figure_image {border: 1px solid #808080; page-break-after: avoid;}
p.figure_caption {text-align: center; font-weight: bold; font-size: .9em; margin-top: .5em; margin-bottom: 0em; page-break-before: avoid;}
</style>
</head>

<body>
<p>line 1<br /></p>

<p>line 2</p>

<p>line 3</p>

<p>line 4</p>

<p>line 5</p>

<div class="figure">
<img class="figure_image" src="../Images/Figure%206-5.jpg" />

<p class="figure_caption">This is the Caption</p>
</div>
</body>
</html>

The image is a jpg at 680x800 pixels and 72 ppi. Just resize an image to those dimensions and change the name above if you want to try it.

regards,
Michael

[charleski]

Originally Posted by eclecticguy

The image is a jpg at 680x800 pixels and 72 ppi. Just resize an image to those dimensions and change the name above if you want to try it.

regards,
Michael

If there's no space to fit both the image and caption on the same page, then the caption has to be bumped to the next.

You're trying to squeeze a quart into a pint pot and it won't fit, simple as that.