kevin hamilton rocks!

 

 

 

 

 

 

 

 

 

In response to my request from a few days ago, Kevin Hamilton has a first draft of an awesome web-based tool for generating markup for flowing text around irregular images.

This is much more than I could have hoped for and worthy of a very wide audience. I'm sure that I'm not the only one that was looking for a clean and easy solution to this design issue. Check it out and be sure to tell your friends! While I'm on the subject of awesome web-based tools for bloggers and web developers, I absolutely must point out a great color tool developed by Eric Meyer. The tool, called Color Blender, should satisfy all of your color picking needs.

If you know of other great tools like these, please let me know. There really should be a collection posted at some well-known URL :-)

update: After playing around with the tool for a few minutes (and using it to compose this post) I realized that it's somewhat different than the method I was using. Where I was wrapping all of the left floated "spacer" divs in a relatively positioned div and using a fixed position on the image, Kevin was using relative positions for each of the spacer divs and using a background:url for the image.

My markup looks something like this:
<div style="position: relative;">
<img src="foo.png" style="position: absolute; width: 100px">
<div style="float: left; clear: left; height: 10px; width: 110px;"></div>
<div style="float: left; clear: left; height: 10px; width: 160px;"></div>
<div style="float: left; clear: left; height: 10px; width: 110px;"></div>
</div>
<p>Some text and some more text</p>

And Kevin's looks something like this:
<div style="background:url('foo.png') no-repeat top left;">
<div style="float: left; clear: left; position: relative; font-size: 12pt; margin-right: 10px; width: 100px;"> </div>
<div style="float: left; clear: left; position: relative; font-size: 12pt; margin-right: 10px; width: 150px;"> </div>
<div style="float: left; clear: left; position: relative; font-size: 12pt; margin-right: 10px; width: 100px;"> </div>
Some text and some more text.
</div>

I'm no web developer and so I don't know if there are significant differences between these two approaches. What do you all think?

update2: After a bit more playing around, one problem I see with Kevin's approach is that because he uses a non-breaking space as the height of the spacer div, scaling the fonts changes the height of each div so the curve changes as the fontsize changes. I think that a fixed height on the spacer divs is a better approach because the image doesn't necessarily scale when a user zooms the fonts (not in Firefox, anyway). In my earlier posts I used various heights and found that 4px was about as fine a granularity as I needed to get a decent curve.