3

Before I start, let me be clear about what I’m not trying to do:

  • I’m not trying to keep particular text on the same page as an image.
  • I’m not trying to force a page break before an image.

That said, I’m looking for the approximate equivalent of LaTeX’s \begin{figure}[ht]. Basically,

  • If there’s enough room on this page for the image, put it here.
  • Otherwise, put it on the top of next page—but don’t break the page here; put the next paragraphs of text here until the end of the page.

Can this be done with HTML+CSS? (The answer to Can I float an image to the top or the bottom of the screen? is not encouraging, but does not address this directly.)

1

My guess is no. You want the img (or the div container) to be a block element. At the same time, you want the image to act like an inline element -- adjusting to the display.

A block element by definition cannot switch order with other elements depending on the display. In other words, you have to change the semantics to get what you want. But you still are not changing the order of elements.

One thought is that you could use CSS media queries to conditionally change the img or div elements from block display to inline display depending on the device's screen dimensions. That might help if you could boil your use cases to maybe two or three display sizes.

I am not a css expert, so I'd love to hear if there is a way that works. But my guess is currently no, and even if a method exists, it probably won't be supported on Kindles anytime soon.

I don't know much about Latex, but it can perform these conditional tricks because you are dealing with a fixed display size. With ebooks you are dealing with an endless variety of display sizes and devices.

UPDATE: I'm having second thoughts about the answer. CSS has some new mechanisms like flexbox and grid formatting to deal with these cases. I could easily see a time in the next 5 years where ebook readers can deal with positioning of an image on a fixed point in the page. Jimmy Panoz pointed out that because reading systems use browser rendering systems, eventually reading systems will allow you to use CSS Feature Queries to try CSS experimental features.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.