How to make uneven text wrapping (not square or round) like this with semantic and clean HTML, CSS?

Question

How to make text wrapping like this with semantic and clean HTML, CSS ? With compatible in all browser.

Adding different classes to <p> is the only solution I'm thinking if there is no other solution.

but with that way every time client would not be able to change classes, which is drawback.

Answer 1

http://www.alistapart.com/articles/sandbags/

Answer 2

You could set the image as a background on your <p> and then float transparent containers overtop of the background image in the shape that you don't want text to overlap.

<p>
    <span id="block1"></span>  
    <span id="block2"></span>  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
</p>

With the following CSS:

p {
   background: url(your-image.png) no-repeat 100% 0;
}

#block1 {
   float: right;
   width: 100px;
   height: 100px;
}

#block2 {
   clear: both;
   float: right;
   width: 200px;
   height: 50px;
}

The drawback though is that as with your paragraph class solution, this is a very manual fix. You can see it in action here.