Variation in alignment?

I want to make a visual effect where a piece of text is adjusted left, right, center, whatever, but the origin of the alignment varies from line to line by a few pixels. This would work well with small paragraphs, and would provide a break from monotony.

Except I have no idea开发者_如何转开发 how to implement this...

There's an excellent CSS demo that I came across a long time back that uses a bunch of floated DIVs coupled with the "diagonal border" trick to create a neat effect -- I believe you're looking for something similar.

If you only need the alignment, just plain DIVs will do -- float and clear them left/right and give them varying widths, and they will cause the text to flow around them. For example:

.spacer {
  float: left;
  clear: left;
  height: 1em;
  /* vary the width using inline styles */
}

The diagonal borders add to the effect by separating the text from the background using different colours.