flow text around a transparent png with css/jquery/anything

Question

For now, i have:

lorem ipsum dolor

Which nicely sets the i

Answer 1

This is definitely possible. You just need to create blank elements with a height equal to the line-height of text and the width of where you want the text to break. Then float these elements in your text, with a clear: both CSS style and have your image be absolutely positioned with a z-index under the text.

Answer 2

The "right" way to do this is CSS3 Shapes / Exclusions (shape-outside/inside, etc.).

Unfortunately as of April 2013 these have not yet been widely implemented. Chrome/Webkit has a test in its canary builds. Perhaps Mozilla will follow on.

Answer 3

Any automatic breaking point detection would involve very complex edge detection, text-metrics and flow computation which are TOO complicated for little gain.

The only feasible way that comes to my mind is to manually approximate the image with a few floating boxes (DIVs) that overlay the image (using HTML+CSS).

Answer 4

The only conceivable way I could think of for wrapping text around images without hardcoding anything is to enlist the help of jQuery. There is a plugin called jQSlickWrap - it might be the solution that you're looking for. However, it does require HTML5 support on the browser's behalf, so it will not work for IE users as of yet.