keep together? - Page 2

eclecticguy · 06-10-2010, 11:38 AM

No I am not. There is plenty of space for both to fit. Simply remove "line 5" 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, 11:52 AM

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:

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 line 10 results in everything rendering on a single page. With the page-break markup specified on the 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, 11:55 AM

Just for additional info: adding an extra line "line 11" 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, 12:03 PM

Ah, this might be the answer: http://www.w3schools.com/CSS/pr_print_pageba.asp

Quote:

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, 12:07 PM

The code you provide works perfectly in ADE (after fixing the double brace error:

Code:

  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, 12: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, 01:48 AM

Quote:

Originally Posted by eclecticguy

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, 07: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.

06-10-2010, 11:38 AM	#16
eclecticguy Member Posts: 19 Karma: 10 Join Date: Jun 2010 Location: Massachusetts Device: iPad	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

06-10-2010, 11:55 AM	#18
eclecticguy Member Posts: 19 Karma: 10 Join Date: Jun 2010 Location: Massachusetts Device: iPad	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.

06-10-2010, 12:07 PM	#20
charleski Wizard Posts: 1,196 Karma: 1281258 Join Date: Sep 2009 Device: PRS-505	The code you provide works perfectly in ADE (after fixing the double brace error: Code: 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.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

06-10-2010, 12:14 PM	#21
eclecticguy Member Posts: 19 Karma: 10 Join Date: Jun 2010 Location: Massachusetts Device: iPad	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

06-12-2010, 07:52 PM	#23
JSWolf Resident Curmudgeon Posts: 80,746 Karma: 150249619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	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.