8

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

enter image description here

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?

Joshua Frank
  • 13,120
  • 11
  • 46
  • 95
  • There are orphan and widow controls in CSS but most browsers only support these when printing: https://css-tricks.com/almanac/properties/o/orphans/ – Andrew Feb 01 '19 at 00:25

4 Answers4

2

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)

Don
  • 3,987
  • 15
  • 32
  • I tried applying this to all p tags, but this forced everything below the image. Applying it selectively to the offending paragraphs does seem to work, but it's a bit ad-hoc, in that you have to apply it manually, but I can live with it for now. But why does overflow have anything to do with layout and flow in the first place? – Joshua Frank Sep 03 '13 at 19:15
  • 1
    I got that issue when the image was also in a `p` tag. So if you wish to apply it to all of them be sure the image isn't in one. When you apply `overflow:hidden` in this case it creates a "BFC" or Block Formatting Context. More info here if you're extremely interested: http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work and http://colinaarts.com/articles/the-magic-of-overflow-hidden/ – Don Sep 03 '13 at 21:17
0

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 :)

henk.io
  • 296
  • 1
  • 3
  • 15
  • I could fix it by ad hoc adjustments to the HTML, but I'm looking for a solution that works globally, without tuning for each individual situation. – Joshua Frank Sep 03 '13 at 18:50
0

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&nbsp;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; }
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • How would you use positioning without having to manually layout the whole page, i.e. work out which paragraphs should go with the image, and box them separately from the other paragraphs? That seems really kludgy, and very fragile, as the text content changes. – Joshua Frank Sep 03 '13 at 19:18
  • @JoshuaFrank, positioning would indeed require grouping of texts so that a block of text is shown on the right of a specific image. If you want freely flowing text with images floated on the left, then I’m afraid you cannot avoid the risk dispresented in the question – Jukka K. Korpela Sep 03 '13 at 21:08
-7
<img style="float:left; clear="both" src="/images/[image]" />
Vikas Singhal
  • 20
  • 4