How can I wrap text around a moveable image?

I am trying to implement an interface where users can dynamically enter text and upload images. I wish for the interface to have these features:

  1. The images should be moveable i.e, ability to drag and drop the images around.
  2. The text entered should automatically wrap around the images.

How could I accomplish this? I have looked at some jquery scripts and also looked through HTML5’s canvas features, but am unable to find a solution.

Thanks for your time.

EDIT: This video shows the effect I wish to obtain:

http://www.youtube.com/watch?v=mYnj4Mz9g9g

How an I wrap text around a non rectangular image?

Is it possible to wrap text around a non rectangular image? I want text around maps of different countries to wrap around the country’s shape in such a way that the text always keeps the same distance

Java wrap text around image

How to wrap text around an image in Java? Or how to accomplish CSS float in Java? I am loading a HTML text with some image tags into JTextPane component. Example: text text text text <img src=ima

How can I wrap text around an image in the bottom right of its container?

I want to place my link button in the bottom right corner of its containing div and have the text wrap around it. The only way I can think is to use the code below (absolute positioning) and put break

How can I wrap text around a partial

I’m trying to wrap the text from a post around a partial, which renders a but is seems the best i can do is get it to do is align right. Any ideas? <%= render shared/slider %> <%= render s

How to wrap text around an image

I’m trying to wrap the text around the image but no success. <span>Zion Church</span> <div><a href=#><img src=member.jpg width= height= class=floatleft></a

How to wrap text around left floating image in wordpress

If you visit http://www.timkainu.com/journal/ you can see that there are some featured images floating to the left of the text. How can the text wrap around the image? I’ve used Firebug to try and f

How to wrap text around image [closed]

I have a UIImageView and a UITextView, and I wish to wrap the UITextView around the image that I have, exactly as it is done using Microsoft Word using the Wrapping Style -> Square, which is found

How to wrap image around the long text?

If text is long then text moves to next line after image. How to wrap text around image? CSS: img { float: left; width: 200px; height: 200px; } .description { border: 1px solid #000; display: inline;

How to have text wrap around an image?

What’s the best approach to achieve the following effect? [Image Removed by Poster] I need that text to wrap around the image, which should always be in the bottom right corner. Thanks.

Wrap text around the image in TextBlock

How to wrap text around the image in TextBlock? The text is always at the bottom… Which are the basic approach in general to do it? Thank you! var image = new BitmapImage(); image.BeginInit(); imag

Answers

This is possible in IE10, using positioned floats: http://ie.microsoft.com/testdrive/HTML5/PositionedFloats/Default.html

Other browsers have yet to support this.

Well, at least for the wrapping, if you want to use jQuery, you can use this jQSlickWrap plugin to have the text wrap around the irregularly-shaped image. It uses a nice HTML5 canvas technique.

See the text wrap example here: http://www.jwf.us/projects/jQSlickWrap/example2.html

Hope it helps!

TL;DR

This is a common and desirable feature that has been discussed numerous times in the history of CSS, and there is a specification under development to make it possible. Unfortunately, implementations are few and far-between, and some implementers are reluctant to work on it. Doing it with JavaScript is a complex problem for any non-trivial layout; such a solution is unlikely to be fast enough for your purposes and you will fast approach the sort of markup you’d expect from a PDF-to-HTML converter.

Background

There are two questions here: irregular text flow and excluding text and other inline elements from an arbitrary region of the page.

This is not the first time either feature has been discussed for CSS. In particular, flowing text around irregular floated shapes was mentioned in a CSS level 1 working draft back in 1996, and Eric Meyer’s ragged float demo dates from at least 2002. This is a long overdue feature!

In June 2007, James Elmore suggested adding position values to the float property, enabling elements to be positioned arbitrarily on the page while excluding other elements from flowing underneath.

SVG 1.2 initially specified a model for flowed text regions, and goes into some detail on how this would be implemented. Unfortunately, the latest version of the spec (which is still in development) blows this out of the water by noting that previous work will be replaced with “a superset of the SVG 1.2 Tiny textArea feature”.

Current status (revised August 2012)

More recently, we have the CSS Exclusions specification, a proposal from Adobe and what you see being shown off in that video. As of August 2012, these have been implemented in IE 10 RTM and are slowly being rolled out in WebKit, but developers working for other vendors have expressed mixed feelings about the proposal.*

Adobe maintain a handy support matrix for easy reference.

Hack*cough* “Polyfilling”?

It would be difficult achieve a similar effect using JavaScript, and even more difficult to do it efficiently. I can think of two very naive approaches to make room for an absolutely positioned element in a region:

  1. “block out” space for element using strategically-inserted inline spans; or
  2. surround each word with a span element, and style each word individually to make room for the excluded element using padding.

I’ve hacked up a very broken demo of how the second approach might work. It’s horrible, buggy and easy to break. I actually spent a few weeks after answering this question working on a polyfill for the Exclusions spec, but gave up because there were too many bugs and performance issues.

You will have myriad issues with either approach: columns, text alignment, errant child elements (especially floated or positioned elements!), various edge conditions, horrible things if you change the HTML, hyphenation—merciful heavens, I don’t even want to think about hyphenation—and, of course, potentially magnificent performance issues after taking account of these things.

Performance issues can be ameliorated somewhat; for example, I’ve used elementFromPoint to try and get the span containing the first overlapping word directly, and some browsers even support caretPositionFromPoint, which may also help. I think that with a lot of work, you could make something that works pretty well for static content; but making it fast enough that you can drag it around with the mouse? My demo page has precious little content and doesn’t address any of the mind-bendingly complex issues you’d have to deal with to make this work on real web pages. Even if you can get around all of those issues, making it fast enough to drag around smoothly would be very challenging.


* I strongly hope vendors will implement CSS Exclusions. People have been asking for these features since the earliest days of CSS, and it is a common and legitimate visual design objective both on screen and in print.