How can I prevent HTML text orphans?

Question

I often have an image that I wrap text around, and sometimes the texts wraps awkwardly, like so:

In the HTML, the image is floated to the left and the text simply follows:

<p><img style="float:left;" src="/images/[image]" /></p>
<p>This is my David Copperfield, <em>I was born</em> kind of bio.  For a more concise one, please see the <a href="/jenny/press-kit#bio">press kit</a>.</p>
...

This mostly works, except when the text length just happens to run past the bottom of the image and flow back to the left margin, and when the amount of text isn't long enough to fill more than one line (in this case, it's only one word). When that happens, it looks really bad.

So, is there a way to control the text flow so that this doesn't happen?

Answer 1

This is how floating works. If you don’t want that, don’t use float; you can e.g. use positioning instead, so that the text appears as a block on the right of the image.

There’s unfortunately no way to use floating and request e.g. that the last line should not be short. You can prevent the very last word from appearing on a line of its own by using a no-break space between it and the preceding word, e.g. it will. And you could extend this to a group of short words. But this would just mean that the group appears on a line of its own and the preceding line is correspondingly shorter (and may therefore look odd).

If the text is just a little too long, you could modify its rendering to take less space vertically e.g. by removing empty lines between paragraphs, though this would be a major layout change (though perhaps a good one):

p { margin: 0 }
p + p { text-indent: 1.3em; }

Answer 2

This question actually had me thinking although it is actually annoying sometimes, In the past i have fixed similar problems to this by adjusting the line height a little,

line-height:20px;

or adjusting the actual size of the image a little bigger or smaller,

<img style="float:left;" src="/images/[image]" width="100" height="200" />

or alter the tracking of the text

letter-spacing: 0.1em;

or use hyphenation (I don't like it or recommend it)

hyphens: auto; 

However as far as my knowledge goes i do not know of any css rules to eliminate text orphans. There might be scripts but i have never heard of it and have doen a bit of research on it a while back. Hope it helped :)

Answer 3

<img style="float:left; clear="both" src="/images/[image]" />

Answer 4

What you could do is add overflow: hidden to the p tags where there is text. This will make it so any text that wraps after the image will be in line with the larger part. Now when you have large paragraphs this may look funny, however if your paragraphs are all fairly short this should help.

Example: http://jsfiddle.net/8ZsKy/2/

alternately you could just add a class rule and apply it to potential "problem" paragraphs.

p.wrap-inline {
    overflow:hidden;
}

EDIT: updated jsfiddle (oops)