Looking for a way to render an outline around flowing text on a web page

As far as I know this isn't possible.

I would like to draw an outline around text that is flowing around a floated picture on a web page. Any CSS or Javascript tricks that could help with this would be appreciated.

Horrible Mockup: http://i.stack.imgur.com/Wf7BW.png

Edit:

This link to a demo for the Aloha Editor will give you an idea of the purpose of the outline: http://www.aloha-editor.org/demos/wordpress-demo/

Why?

In a CMS I'm working on, users can edit information in contentEditable divs on th开发者_运维百科e front end of the website. In the situation above having an outline around the entire div would create confusion for the user as they cannot edit that black block.

Currently I have been adding a class to create an outline around content that can be edited. This worked well at first, but as soon as I got even a little creative with the formatting (e.g. no margin on the bottom of a div, content wrapped in a div with an outline) things started getting hacky and ugly. If there were some way to just wrap the text of div with an nicely spaced outline and I could apply that consistently on the site it would make things so much easier. Plus I'm at an impasse with the content structure that I outlined above.

I'm also open to other ideas besides an outline to convey to the users what text can be edited on the page. I'm experimenting with setting the background color on inner <p> elements in the contentEditables, but it doesn't seem as nice as having the outlines.

This might help, although I think it might be a bit too contrived for general use, because I tried to make it look "exactly like" your mockup.

Live Demo

CSS:

#content {
    border: 3px solid orange;
    font: 12px sans-serif;
    width: 500px
}
#content .imgContainer {
    padding: 0 9px 9px 0;
    float: left;
    margin: -3px 9px 9px -3px;
    border-right: 3px solid orange;
    border-bottom: 3px solid orange;
    background: #fff
}

HTML:

<div id="content">
    <div class="imgContainer"><img src="http://dummyimage.com/220x204/f0c/fff" /></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus  diam porttitor dui eleifend egestas. Nullam eros purus, dapibus ut  ultrices lacinia, ornare id ante. Suspendisse arcu mauris, fermentum  quis vehicula non, posuere et urna. Suspendisse hendrerit nulla quis  metus condimentum ultricies. Fusce vel egestas tortor. Sed eleifend  tincidunt eleifend. Aliquam erat volutpat. Ut hendrerit, metus nec  posuere dignissim, mauris felis pharetra erat, at elementum eros velit  id libero. Mauris egestas, felis in semper vestibulum, eros felis  lobortis dui, sed consectetur justo urna volutpat urna. Vestibulum  vestibulum congue magna id pharetra. Aliquam venenatis consectetur  rhoncus. Etiam convallis laoreet mauris id rhoncus. Nullam tincidunt  nunc sit amet turpis tincidunt quis hendrerit mauris porttitor. Cum  sociis natoque penatibus et magnis dis parturient montes, nascetur  ridiculus mus.
</div>

Well... everything can be done, with Javascript! In my case I have a kind of crazy solution, using jQuery. It works for your mockup and with a bit of tweaking it can work in different cases, just adapt it.

The idea is to use jQuery to insert the borders around the image and hide unwanted borders. width, height and position is calculated dynamically based on image size.

Enjoy: http://jsfiddle.net/E64w3/