This is an old archived post from my former blog The Idea Shower. It's where I cataloged my product explorations and releases, one of which ultimately became Pocket.
This post was published back in 2007. It may not function as originally intended or may be missing images.
This post was published back in 2007. It may not function as originally intended or may be missing images.
CSS Text Wrapper
December 05, 2007
- Wrap content to any shape. Including curves, slants, non-linear images, or whatever you can think of
- Trace images for quick creation
- Content Independent Your content and text can change but your wrap shape will stay the same.
- Multiple Export Methods help ensure you can find an efficient way to add the code to your site.
Overview
The CSS Text Wrapper allows you to generate HTML and CSS to wrap text on your website into any shape.Jump down after the video for more information.
Video Example: How To Use the Wrapper
This video covers how the wrapping works, how to use the wrapper to create a simple text wrap around two circular images, and how to add the generated code to your website or blog.How It Came To Be and Why It's Better Than What's Available
One of the things I do for contract work is coding PSDs to CSS/HTML. I stand by telling my clients, if they can design it, I can code it, so sometimes I get myself into a rut with a tricky design element. Well a design came along that had a curved layer of text around a curved graphic. The design was going into a CMS system so the content would be changed from time to time, and therefore needed to be independent of the markup. I found that by floating divs to the left and the right of the each line of content, you would be able to force the text into place. But it took a loooong time. Each div on each line required tweaking over and over again pixel by pixel until it was just right. There had to be a better way to do that.
Feedback
The Wrapper is very new and still needs a lot of work. So please leave me any problems you find, as well as suggestions and examples of work you've done with it!FAQ
Q: Long single strings without spaces (like long URLS) do not wrap? A: This unfortunately is the same behavior you'd see even if you didn't use the wrap. Your browser will not break up long strings to wrap them. (Internet Explorer has some alternatives)Q: Does this mean I have to use flash on my website? A: No, flash is only used in the tool to create the wrap. You use it to draw the shapes you want to wrap, the tool then generates the CSS/XHTML code to make your wrap. No flash is required on your site.
Q: Can I use this with standard inline images (img tag) and not just backgrounds? A: Yes, though you will need to use absolute positioning to put them into place.