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: https://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 the 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.
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/