1

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.

Darakshan Farber
  • 11
  • 1

1 Answers1

0

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/

beautifulcoder
  • 10,832
  • 3
  • 19
  • 29
  • Yes and no, in the most general sense it is supported, just not fully supported. This is to help the flow of text in a column layout but its a bit buggy in browsers. It's meant for things like printing and yes, ereaders but you can apply it to your site for better flow, i would just do heavy testing. http://caniuse.com/#search=break-before – Daemedeor Jun 09 '15 at 21:09
  • My language came off a bit strong, but yes, I completely agree – beautifulcoder Jun 10 '15 at 02:08
  • I would also warn that its dangerous to assume what it an element is intended for if the only clue you have is that it is not really supported in the browser. some just have very bad implementation/non-conforming and may come into spec in the next version – Daemedeor Jun 10 '15 at 02:13