Text Hugger

Generate HTML, Javascript or CSS to hug text to any pre-defined shape.

Define the outline of your text

This HTML/CSS compliant Text Hugger allows you to easily make a HTML text area into a shape and not just the default rectangle. You can make text hug curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your web page/site.

Tested in Internet Explorer 6+, Firefox, Safari, Opera, and Netscape.

Instructions
  1. Add points to the black lines by clicking anywhere on the line.
  2. Drag the points into place to adjust the shape of the line.
  3. If you want to trace an image, enter the image's URL in the optional values below.
  4. Use one of the three methods at the bottom of the page to generate your hugging shape on your own web site.

Alternative content

Textarea Options
  • px
  • px
  • px
Preview Options
  • px
Text Content Option

To apply the hugging shape to your site

There are three different ways to apply the hugging shape to your site. Each has it's benefits/drawbacks, but with these three you should be able to find a method that suits you.

Method 1: Inline CSS/XHTML

This is the fully generated HTML/CSS code. It's really bulky, but it's the easiest to apply.

This method has one step:

1. Copy and Paste this code into your site, right above the start of your text content.

Method 2: XHTML w/ Classes

This is the fully generated HTML with class names. Smaller markup, but you will need to have a stylesheet for this to work.

This method has two steps:

1. Copy and Paste the text below into your site's stylesheet.

2. Copy and Paste this code into your site, right above the start of your text content.

Method 3: Javascript

The most lightweight, applies two lines of javascript to generate the hugging markup. It requires the loading of a small external javascript file.

This method has two steps:

1. Save and then upload this javascript file onto your site.
Download: shapehugger.js

2. Copy and Paste this code into your site, right above the start of your text content.