View Full Version : keep together?


Kivgaen
05-25-2010, 04:00 PM
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
05-25-2010, 07:51 PM
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
06-04-2010, 01:46 PM
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
06-04-2010, 01:57 PM
I'd suggest trying it with the desktop version of ADE.

eclecticguy
06-04-2010, 01:58 PM
I don't know about ADE. I'll google and try it. Thanks,
Michael

HarryT
06-04-2010, 02:03 PM
Adobe Digital Editions. It's a free download from Adobe's web site.

eclecticguy
06-04-2010, 02:07 PM
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
06-04-2010, 02:10 PM
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
06-04-2010, 02:14 PM
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
06-04-2010, 02:18 PM
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
06-04-2010, 02:21 PM
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
06-04-2010, 03:59 PM
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
06-08-2010, 12:51 PM
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
06-10-2010, 12:21 PM
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
06-10-2010, 12:33 PM
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.

eclecticguy
06-10-2010, 12:38 PM
No I am not. There is plenty of space for both to fit. Simply remove "<p>line 5</p>" from the above file and both fit on the page. Adding it back causes the image to show on the first page and the caption to appear on the second. The desired behavior would be for both the image and caption to appear on the second page. Does that make sense now?

cheers,
Michael

eclecticguy
06-10-2010, 12:52 PM
Ok, just to make this even simpler - I have removed the img and now use only text. The idea is that the "caption" should not break from the paragraph above it. Here is the code:

<?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">
p {padding-bottom: 25px;}
p.figure {page-break-after: avoid;}
p.figure_caption {text-align: center; font-weight: bold; font-size: .9em; page-break-before: avoid;}}
</style>
</head>

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

<p>line 2</p>

<p>line 3</p>

<p>line 4</p>

<p>line 5</p>

<p>line 6</p>

<p>line 7</p>

<p>line 8</p>

<p>line 9</p>

<p>line 10</p>

<p class="figure">This should be a block of text that is all contained within a paragraph and wraps across several lines. The following paragraph should not break to a separate page but should stay on the same page as this paragraph. This paragraph mimics the image that I am trying to test.</p>

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

On the iPad's display in portrait orientation, the caption appears on the second page and the paragraph above it, on the first page. Simply removing <p>line 10</p> results in everything rendering on a single page. With the page-break markup specified on the <p> elements, I would have expected the large paragraph and the caption paragraph to both appear on the second page if there was not enough room to display them both on the first page. I can't think of a simpler example than this. I also do not have any other way to test this other than on the iPad.

cheers,
Michael

eclecticguy
06-10-2010, 12:55 PM
Just for additional info: adding an extra line "<p>line 11</p>" to the code causes the longer paragraph to break in the middle. 2 lines appear on page 1, 2 lines appear on page 2 followed by the caption.

eclecticguy
06-10-2010, 01:03 PM
Ah, this might be the answer: http://www.w3schools.com/CSS/pr_print_pageba.asp

The page-break-after property is supported in all major browsers.

Note: No versions of Internet Explorer (including IE8) support the property values "left", "right", or "inherit".

Note: Firefox, Chrome, and Safari do not support the property values "avoid", "left", or "right".

charleski
06-10-2010, 01:07 PM
The code you provide works perfectly in ADE (after fixing the double brace error:
p.figure_caption {text-align: center; font-weight: bold; font-size: .9em; page-break-before: avoid;})

The iPad is 1024x768, and iBooks adds enough UI fluff and margin padding that I doubt there'll be any display area left over from a 680x800 image.

eclecticguy
06-10-2010, 01:14 PM
Not sure how the extra "}" got there! It is not in my file.

This code with simple text does not work on the iPad. But, given the comment on w3schools about safari, firefox and chrome, it looks like WebKit does not support the "avoid" value. So, I think we can conclude that iPad will not support this non-breaking behavior.

cheers,
Michael

Dellaster
06-11-2010, 02:48 AM
Not sure how the extra "}" got there! It is not in my file.

This code with simple text does not work on the iPad. But, given the comment on w3schools about safari, firefox and chrome, it looks like WebKit does not support the "avoid" value. So, I think we can conclude that iPad will not support this non-breaking behavior.

My iPad has yet to arrive so I can't check. But I've also read that it doesn't honor page-break-before:always either.

If you absolutely need to keep the caption with the image (or other kind of block) and you don't mind it going to a second page, split the HTML file in two right before the image. All ePub readers go to a new page when moving to a new HTML file.

Be sure to remove any page break code so you don't generate a blank page on readers that do honor them.

JSWolf
06-12-2010, 08:52 PM
One solution that might work is to use a graphics editor to type in the caption so it becomes a part of the image. Then there is no way for the text and image to be seoerated.