eBook CSS to make the image float and the text flood when the image doesn’t fit

float-and-flood.css

.float-image {
	width: 100%;
	float: left;
	padding: 0;
	display: block;
	text-align: center;
	margin: 0.75em 0;
	margin-top: 1vh;    /* will collapse if float + margin-top because your entire CSS will be ignored by legacy RMSDK if you’re using margin: 1vh 0; */
	margin-bottom: 1vh;
}

.float-image > img {
	vertical-align: top;  /* Look ma, no additional spacing as the line-height now exactly matches the image’s height */
        width: auto;
        max-width: 100%;
        height: auto;
}

.float-image + * {
	widows: 1;  /* prevent text cut off if image doesn’t float */
}

/* Since bullets don’t play well with this trick, we must clear lists (consequently, they won't flood) */
.float-image ~ ul, .float-image ~ ol {
    clear: both;
}

/* Basically, the following are margin-top and margin-bottom */

/* This is the trigger */
.float-image:before {
	display: block;
	content: '';
	width: 1px;
	height: 0;  /* Don’t ask me why, you get text cut off if the image floats and you’ve got any other value, even 1px */
	margin-top: 1vh; /* will collapse if float */
	float: right;
	clear: right;
}

/* This should be the clearer—except it currently doesn’t do its job when bullets (either span or list-style-type) are involved. */
.float-image:after {
	display: block;
	content: '';
	width: 100%;
	height: 1vh;
	float: none;
}

To sum up, using this snippet, the image will float to the next column if it doesn’t fit. But since it is outside the flow (because float), it won’t prevend text from flooding the whitespace it doesn’t fit. Else, it will behave as your typical image.

It ships with a few caveats though:

• it will only work in RS using columns to paginate;
• you’ve got a pretty visible “flash of unfloated image” when changing font-size in some configurations (like say scroll in iBooks iOS);
• if the text is really small, your image may be pushed really far in the flow so if you need to keep some relationship between the image and the text, you’re screwed;
• widows and orphans can’t be used because text may be cut off;
• it’s just terrible when you apply “page-break-inside: avoid” to your figure so you can’t use it for images with captions;
• it’s a float so… watch your bullets and lists and shit as they are likely to float inside the image’s wrap.

It somehow works not that badly with the worst test suite I can throw at this but well, the float should ideally be added using JavaScript if some conditions are met.

But since JavaScript is optional…