Page-Break-Inside: Avoid - Solution or Hack?

[sab1234]

Dear All,

I am currently working on a book for a client with a lot of images and tables for .mobi. It is really important to them to keep the paragraph headings and images/text together.

I have tried to group heading and image/text in a <div> and apply page-break-inside: avoid in the css. I have also tried to apply page-break-after: avoid; to the headings (<h3>). None is working and I assume both CSS elements are not working yet. Is there any other hack to circumvent this issue and force paragraphs to not break apart from putting the whole paragraph in an image.

I would be super happy for any ideas.

Best,
Sabine

[Jellby]

The old mobi format does not support any kind of CSS, although some CSS properties can be translated by the converter into something that achieves a similar effect (some pseudo-HTML code). But I don't think there's any equivalent for page-break-after: avoid (or -before, or -inside).

With KF8 it might be different, though.

[pdurrant]

Jellby has it exactly right. The old mobi format had no method of specifying "all this must fit or go to a new page".

[dgatwood]

Not per se, but that doesn't mean it isn't possible to approximate it. The MOBI format does support forcing a page break at a particular spot, so what I would do is this:

<div class="nobreak">
content here
</div>

@media amzn-mobi
{
    /* MOBI7 styles */
    .nobreak {
        page-break-before: always;
    }
}

@media not amzn-mobi
{
    /* KF8 styles */
    .nobreak {
        page-break-inside: avoid;
    }
}