css ebook image float

429 Views Asked by At

I'm developing an ebook for kindle epub reader, with flowing layout and several illustrations. The exact placement of the illustrations relative to the text is not critical.

As you know, unlike normal browsers, an ebook reader breaks the text into pages based on the font size and screen size. If there is text on a page and an image comes along which does not fit, the reader just inserts a page break and places the image at the top of the next page, leaving an empty spot on the current page.

Is there a way to set up the CSS or HTML to let the text continue flowing on the current page after the image insertion point, and still place the image at the top of the next page? This seems pretty basic to me, but I have searched high and low and have only found suggestions to switch to fixed layout, which is not an option.

1

There are 1 best solutions below

3
On

There is a CSS specification for break-before / break-after. It's not really supported in any of the browsers so I assume it is intended for e-readers.

http://www.w3.org/TR/css3-page/