View Single Post
Old 07-09-2016, 11:38 PM   #13
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
dgatwood's Avatar
 
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by Hitch View Post
Avoid pretty much doesn't work, ANY-PLACE. Yeah, yeah, in ePUB3, on an iPad, you can kinda rely on it. That's it, however. Maybe ePUB3 in Readium/Azardi. After that, you might as well just light joss sticks and pray a lot.
Careful, there. You're overgeneralizing slightly. "Avoid" works in lots of rendering engines, but only when used with "inside", not "before" or "after". Avoiding page breaks inside has worked in WebKit since about 2004, so it should work in Kindle KF8 content as well, with a long list of caveats. Unfortunately, many of the ways that people tend to use it run into one or more of those caveats (#3 below in particular). And, of course, there's no way to get that behavior on MOBI7 readers except to fake it by forcing a page break before the element in question.

AFAIK, even iBooks ignores page-break-after/before:avoid unless they've fixed it in the last year or so and failed to close the canonical bug.

With that said, if you can wrap the two pieces of content in a div and mark that with page-break-inside: avoid, you should usually prevent the break without forcing a break before the first item, provided that:
  1. Neither the enclosing div nor the content inside it uses position: absolute or position: fixed
  2. The content of the enclosing div can fit on a single page
  3. None of the interior elements expand to fill the screen
  4. The enclosing element is a block element (not inline or inline-block or table-*)
  5. The enclosing content is not inside a table (known WebKit bug)

But as mentioned, nothing is guaranteed, and if the renderer cannot make it work, it is allowed to ignore it.

Unfortunately, #3 above makes it unusable for what many folks want to use it for—keeping captions with images—but if you're not trying to do this with an auto-sized image, it ought to work for you. Let us know if it doesn't, because that would be an interesting breakage by Amazon (or an edge case, and I'd have to see your actual code to know which).

Last edited by dgatwood; 07-09-2016 at 11:43 PM.
dgatwood is offline   Reply With Quote